/*
Theme Name: NP POS Landing
Theme URI: https://github.com/ekumarstha/nppos-landing
Author: NP POS
Author URI: https://app.nppos.com/
Description: Gutenberg-ready landing theme for NP POS, designed to match the user-supplied NPPOS Pro HTML design. Includes a hero slider, feature grid, reviews, FAQ, enquiry form (submissions saved in wp-admin), pricing, blog, category, search and 404 templates. No plugin dependency and no build step.
Version: 1.1.21
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nppos-landing
Tags: landing-page, blog, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, editor-style, wide-blocks
*/

/* ============================================================
   NP POS Landing — main stylesheet
   Section 1: the design system + component CSS from the
   user-supplied HTML design file
   (deepseek_html_20261112_acb3f6__1.html), copied verbatim.
   Section 2: WordPress integration styles (templates, post
   content, comments, widgets, pagination, menus) written in
   the same design language. The HTML file has no equivalent
   for those, so they are the only styles authored here.
   Fonts: Inter + Space Grotesk via Google Fonts (enqueued in
   functions.php) with system-font fallbacks below.
   ============================================================ */

    /* ============================================================
       DESIGN SYSTEM — NPPOS PRO
       ============================================================ */
    :root {
      --brand: #3b6eff;
      --brand-light: #6b91ff;
      --brand-soft: #eef2ff;
      --accent: #00d4a0;
      --accent-soft: #e6fcf5;
      --navy: #071022;
      --navy-2: #0d1b36;
      --ink: #111c33;
      --slate: #44546f;
      --muted: #6b7a96;
      --line: #e7ecf4;
      --paper: #ffffff;
      --paper-alt: #f7f9fd;

      --r-sm: 10px;
      --r-md: 16px;
      --r-lg: 24px;
      --r-xl: 32px;

      --shadow-xs: 0 1px 2px rgba(7, 16, 34, 0.05);
      --shadow-sm: 0 4px 14px rgba(7, 16, 34, 0.06);
      --shadow-md: 0 18px 40px -12px rgba(7, 16, 34, 0.14);
      --shadow-lg: 0 40px 80px -20px rgba(7, 16, 34, 0.22);
      --shadow-brand: 0 16px 36px -10px rgba(59, 110, 255, 0.45);

      --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-display: 'Space Grotesk', var(--font-body);

      --wrap: 1200px;
      --gutter: 24px;
      --section-y: 112px;
    }

    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
    }

    body {
      font-family: var(--font-body);
      color: var(--ink);
      background: var(--paper);
      line-height: 1.65;
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }

    img, svg { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
    ul, ol { list-style: none; }

    ::selection { background: var(--brand); color: #fff; }

    .wrap {
      width: min(var(--wrap), calc(100% - 48px));
      margin-inline: auto;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--brand);
    }

    .eyebrow::before {
      content: "";
      width: 18px;
      height: 2px;
      border-radius: 2px;
      background: var(--brand);
    }

    .eyebrow--light { color: var(--brand-light); }
    .eyebrow--light::before { background: var(--brand-light); }

    h1, h2, h3, h4 {
      font-family: var(--font-display);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -0.025em;
      color: var(--navy);
    }

    .section-head {
      max-width: 640px;
      margin: 0 auto 64px;
      text-align: center;
    }

    .section-head h2 {
      font-size: clamp(2rem, 4vw, 3rem);
      margin: 18px 0 16px;
    }

    .section-head p {
      color: var(--slate);
      font-size: 17px;
      line-height: 1.7;
    }

    .section { padding: var(--section-y) 0; }
    .section--alt { background: var(--paper-alt); }

    /* ============ BUTTONS ============ */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 14px 28px;
      border-radius: 12px;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 14.5px;
      line-height: 1;
      border: 1.5px solid transparent;
      transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
      white-space: nowrap;
    }

    .btn svg { transition: transform 0.22s ease; }
    .btn:hover svg { transform: translateX(3px); }

    .btn--primary {
      background: var(--brand);
      color: #fff;
      box-shadow: var(--shadow-brand);
    }
    .btn--primary:hover {
      background: #2a5cf0;
      transform: translateY(-2px);
      box-shadow: 0 22px 44px -10px rgba(59, 110, 255, 0.55);
    }

    .btn--ghost {
      background: transparent;
      color: var(--ink);
      border-color: var(--line);
    }
    .btn--ghost:hover {
      border-color: var(--brand);
      color: var(--brand);
      transform: translateY(-2px);
    }

    .btn--dark {
      background: var(--navy);
      color: #fff;
    }
    .btn--dark:hover {
      background: var(--navy-2);
      transform: translateY(-2px);
    }

    .btn--white {
      background: #fff;
      color: var(--navy);
      box-shadow: var(--shadow-sm);
    }
    .btn--white:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .btn--block { width: 100%; }
    .btn--lg { padding: 17px 34px; font-size: 15.5px; }

    /* ============ TOP BAR ============ */
    .topbar {
      background: var(--navy);
      color: #a5b6d6;
      font-size: 12.5px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .topbar .wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      min-height: 40px;
      flex-wrap: wrap;
    }

    .topbar-contacts {
      display: flex;
      align-items: center;
      gap: 22px;
      flex-wrap: wrap;
    }

    .topbar-contacts a {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #c8d5ea;
      transition: color 0.18s;
    }
    .topbar-contacts a:hover { color: #fff; }

    .topbar-social {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .topbar-social a {
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border-radius: 7px;
      font-size: 11px;
      font-weight: 700;
      color: #a5b6d6;
      transition: all 0.18s;
    }
    .topbar-social a:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    /* ============ NAVBAR ============ */
    .navbar {
      position: sticky;
      top: 0;
      z-index: 200;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: saturate(180%) blur(18px);
      -webkit-backdrop-filter: saturate(180%) blur(18px);
      border-bottom: 1px solid var(--line);
      transition: box-shadow 0.25s;
    }

    .navbar .wrap {
      display: flex;
      align-items: center;
      height: 76px;
      gap: 12px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 23px;
      letter-spacing: -0.05em;
      color: var(--navy);
      flex-shrink: 0;
    }

    .brand-mark {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--brand) 0%, #7aa0ff 100%);
      color: #fff;
      font-size: 21px;
      font-weight: 700;
      box-shadow: 0 6px 16px -4px rgba(59, 110, 255, 0.5);
    }

    .brand em { font-style: normal; color: var(--brand); }

    .brand-logo {
      display: block;
      height: 44px;
      width: auto;
    }

    .nav {
      position: relative;
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: auto;
    }

    .nav-link {
      padding: 9px 15px;
      border-radius: 9px;
      font-size: 14px;
      font-weight: 500;
      color: var(--slate);
      transition: all 0.16s;
    }
    .nav-link:hover {
      color: var(--navy);
      background: var(--brand-soft);
    }

    .nav-cta { margin-left: 10px; }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .header-actions .nav-cta { margin-left: 0; }

    .nav-toggle {
      display: none;
      width: 42px;
      height: 42px;
      border-radius: 11px;
      border: 1px solid var(--line);
      margin-left: auto;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: var(--ink);
      transition: all 0.18s;
    }
    .nav-toggle:hover {
      border-color: var(--brand);
      color: var(--brand);
    }

    /* Mobile menu */
    .mobile-menu {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 300;
      background: rgba(7, 16, 34, 0.45);
      backdrop-filter: blur(4px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s;
    }

    .mobile-menu.is-open {
      display: block;
      opacity: 1;
      pointer-events: auto;
    }

    .mobile-menu__panel {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(360px, 88vw);
      background: #fff;
      padding: 28px 26px;
      transform: translateX(100%);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
    }

    .mobile-menu.is-open .mobile-menu__panel {
      transform: translateX(0);
    }

    .mobile-menu__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 28px;
    }

    .mobile-menu__close {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      border: 1px solid var(--line);
      display: grid;
      place-items: center;
      font-size: 20px;
      transition: all 0.18s;
    }
    .mobile-menu__close:hover {
      background: var(--paper-alt);
      border-color: var(--brand);
      color: var(--brand);
    }

    .mobile-menu__nav {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-bottom: 26px;
    }

    .mobile-menu__nav a {
      padding: 13px 14px;
      border-radius: 11px;
      font-size: 15.5px;
      font-weight: 500;
      color: var(--ink);
      transition: all 0.16s;
    }
    .mobile-menu__nav a:hover {
      background: var(--brand-soft);
      color: var(--brand);
    }

    .mobile-menu__footer {
      margin-top: auto;
      padding-top: 24px;
      border-top: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .mobile-menu__contact {
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: 13.5px;
      color: var(--muted);
    }
    .mobile-menu__contact a { color: var(--slate); }

    /* ============ HERO ============ */
    .hero {
      position: relative;
      background: var(--navy);
      color: #fff;
      padding: 88px 0 120px;
      overflow: hidden;
      isolation: isolate;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 55% 60% at 78% 18%, rgba(59, 110, 255, 0.42) 0%, transparent 60%),
        radial-gradient(ellipse 40% 45% at 12% 82%, rgba(0, 212, 160, 0.14) 0%, transparent 60%);
      z-index: -1;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 80%);
      z-index: -1;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.02fr 0.98fr;
      gap: 64px;
      align-items: center;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px 14px 6px 6px;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.12);
      font-size: 12.5px;
      font-weight: 500;
      color: #c8d5ea;
      margin-bottom: 26px;
    }

    .hero-badge b {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 100px;
      background: var(--accent);
      color: var(--navy);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .hero h1 {
      font-size: clamp(2.6rem, 5vw, 4.2rem);
      color: #fff;
      letter-spacing: -0.035em;
      margin-bottom: 24px;
    }

    .hero h1 .grad {
      background: linear-gradient(100deg, #7aa0ff 0%, #b8ccff 45%, var(--accent) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .hero-sub {
      font-size: 18px;
      line-height: 1.7;
      color: #a9bad6;
      max-width: 500px;
      margin-bottom: 36px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 40px;
    }

    .hero-proof {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 28px;
    }

    .hero-proof__item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13.5px;
      color: #a9bad6;
    }
    .hero-proof__item svg { flex-shrink: 0; }
    .hero-proof__item strong { color: #fff; font-weight: 600; }

    /* Hero visual */
    .hero-visual { position: relative; }

    .hero-visual__frame {
      position: relative;
      border-radius: var(--r-lg);
      background: linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      padding: 10px;
      box-shadow: var(--shadow-lg);
      backdrop-filter: blur(8px);
    }

    .hero-visual__screen {
      border-radius: 18px;
      overflow: hidden;
      background: #f8faff;
      min-height: 400px;
      position: relative;
    }

    .app {
      display: grid;
      grid-template-columns: 124px 1fr;
      min-height: 400px;
      font-family: var(--font-body);
      color: var(--ink);
    }

    .app__sidebar {
      background: var(--navy-2);
      padding: 20px 12px;
      color: #8ea2c6;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .app__logo {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #fff;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 26px;
      padding-left: 6px;
    }

    .app__logo i {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 7px;
      background: var(--brand);
      color: #fff;
      font-style: normal;
      font-size: 13px;
    }

    .app__nav-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 10px;
      border-radius: 8px;
      font-weight: 500;
      transition: all 0.18s;
    }
    .app__nav-item svg { opacity: 0.75; flex-shrink: 0; }
    .app__nav-item.is-active {
      background: var(--brand);
      color: #fff;
      box-shadow: 0 6px 14px -4px rgba(59, 110, 255, 0.6);
    }
    .app__nav-item.is-active svg { opacity: 1; }

    .app__main { padding: 22px 24px; min-width: 0; }

    .app__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .app__header h3 {
      font-size: 17px;
      font-family: var(--font-display);
      letter-spacing: -0.02em;
    }

    .app__pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 10.5px;
      font-weight: 600;
      color: #0e9f7a;
      background: var(--accent-soft);
      padding: 4px 10px;
      border-radius: 100px;
    }
    .app__pill::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
    }

    .app__metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 18px;
    }

    .metric {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 14px 15px;
      box-shadow: var(--shadow-xs);
    }

    .metric small {
      display: block;
      font-size: 10.5px;
      font-weight: 500;
      color: var(--muted);
      margin-bottom: 6px;
    }

    .metric strong {
      display: block;
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 700;
      color: var(--navy);
      letter-spacing: -0.03em;
    }

    .metric .trend {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 10px;
      font-weight: 600;
      color: #0e9f7a;
      margin-top: 4px;
    }
    .metric .trend.down { color: #e5484d; }

    .app__chart {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 18px;
      box-shadow: var(--shadow-xs);
    }

    .app__chart-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .app__chart-head strong { font-size: 12.5px; font-weight: 600; }
    .app__chart-head span { font-size: 10.5px; color: var(--muted); }

    .bars {
      display: flex;
      align-items: flex-end;
      gap: 10px;
      height: 118px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--line);
      position: relative;
    }

    .bars::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(var(--line) 1px, transparent 1px);
      background-size: 100% 33%;
      opacity: 0.6;
      pointer-events: none;
    }

    .bars i {
      flex: 1;
      border-radius: 5px 5px 2px 2px;
      background: linear-gradient(180deg, #c9d9ff 0%, #dfe9ff 100%);
      position: relative;
      z-index: 1;
    }
    .bars i:nth-child(2n) {
      background: linear-gradient(180deg, var(--brand) 0%, #6b91ff 100%);
    }

    .hero-float {
      position: absolute;
      right: -18px;
      bottom: 42px;
      display: flex;
      align-items: center;
      gap: 12px;
      background: #fff;
      border-radius: 16px;
      padding: 14px 18px;
      box-shadow: var(--shadow-lg);
      border: 1px solid var(--line);
      animation: float 5s ease-in-out infinite;
      z-index: 2;
    }

    .hero-float__icon {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border-radius: 11px;
      background: var(--accent-soft);
      color: #0e9f7a;
      flex-shrink: 0;
    }

    .hero-float small {
      display: block;
      font-size: 10.5px;
      color: var(--muted);
      font-weight: 500;
    }
    .hero-float strong {
      display: block;
      font-family: var(--font-display);
      font-size: 15px;
      color: var(--navy);
      letter-spacing: -0.02em;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    /* ============ LOGO STRIP ============ */
    .logo-strip {
      background: var(--paper);
      padding: 44px 0;
      border-bottom: 1px solid var(--line);
    }

    .logo-strip__label {
      text-align: center;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 26px;
    }

    .logo-strip__row {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px 54px;
    }

    .logo-strip__item {
      display: flex;
      align-items: center;
      gap: 9px;
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 600;
      color: #94a3bd;
      letter-spacing: -0.03em;
      transition: color 0.2s;
    }
    .logo-strip__item:hover { color: var(--slate); }
    .logo-strip__item svg { opacity: 0.85; }

    /* ============ STATS ============ */
    .stats {
      background: var(--navy);
      color: #fff;
      padding: 60px 0;
      position: relative;
      overflow: hidden;
    }

    .stats::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 50% 90% at 50% 120%, rgba(59, 110, 255, 0.3) 0%, transparent 70%);
      pointer-events: none;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
      position: relative;
    }

    .stat { text-align: center; position: relative; }

    .stat:not(:last-child)::after {
      content: "";
      position: absolute;
      right: -16px;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 44px;
      background: rgba(255, 255, 255, 0.12);
    }

    .stat strong {
      display: block;
      font-family: var(--font-display);
      font-size: clamp(2rem, 3.4vw, 2.6rem);
      font-weight: 700;
      letter-spacing: -0.04em;
      background: linear-gradient(100deg, #fff 30%, #9fbaff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 6px;
    }

    .stat span {
      font-size: 13px;
      color: #8ea2c6;
      font-weight: 500;
    }

    /* ============ SPLIT ============ */
    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: center;
    }

    .split--reverse .split__visual { order: -1; }

    .split h2 {
      font-size: clamp(1.9rem, 3.4vw, 2.7rem);
      margin: 16px 0 18px;
    }

    .split p {
      color: var(--slate);
      font-size: 16px;
      line-height: 1.75;
      margin-bottom: 26px;
    }

    .check-list {
      display: grid;
      gap: 14px;
      margin-bottom: 32px;
    }

    .check-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 15px;
      font-weight: 500;
      color: var(--ink);
    }

    .check-list li svg {
      flex-shrink: 0;
      margin-top: 3px;
      color: var(--accent);
    }

    .visual-card {
      background: linear-gradient(150deg, var(--brand-soft) 0%, #f5f8ff 55%, #eaf6f2 100%);
      border-radius: var(--r-xl);
      padding: 34px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(59, 110, 255, 0.1);
    }

    .visual-card::before {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(59, 110, 255, 0.16) 0%, transparent 70%);
      top: -80px;
      right: -60px;
    }

    .visual-card__inner {
      position: relative;
      background: #fff;
      border-radius: var(--r-lg);
      padding: 28px;
      box-shadow: var(--shadow-md);
      border: 1px solid var(--line);
    }

    .visual-card__inner h3 {
      font-size: 19px;
      margin-bottom: 20px;
    }

    .row-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
      font-size: 14px;
      font-weight: 500;
    }
    .row-item:last-child { border-bottom: none; }

    .row-item .left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .row-item .icon {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 9px;
      background: var(--brand-soft);
      font-size: 15px;
    }

    .row-item b { color: var(--accent); font-size: 14px; }

    .tile-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .tile {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 22px 14px;
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      transition: all 0.2s;
      box-shadow: var(--shadow-xs);
    }

    .tile:hover {
      border-color: var(--brand);
      transform: translateY(-3px);
      box-shadow: var(--shadow-sm);
    }

    .tile span {
      display: block;
      font-size: 30px;
      margin-bottom: 8px;
    }

    /* ============ FEATURE CARDS ============ */
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .feature-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: 32px 28px;
      transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .feature-card::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 3px;
      width: 0;
      background: linear-gradient(90deg, var(--brand), var(--accent));
      transition: width 0.35s ease;
    }

    .feature-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-md);
      border-color: transparent;
    }
    .feature-card:hover::after { width: 100%; }

    .feature-card__icon {
      display: grid;
      place-items: center;
      width: 54px;
      height: 54px;
      border-radius: 15px;
      background: var(--brand-soft);
      color: var(--brand);
      margin-bottom: 22px;
      transition: all 0.28s;
    }

    .feature-card:hover .feature-card__icon {
      background: var(--brand);
      color: #fff;
      transform: scale(1.06);
    }

    .feature-card h3 { font-size: 18px; margin-bottom: 10px; }
    .feature-card p {
      font-size: 14.5px;
      color: var(--slate);
      line-height: 1.65;
    }

    /* ============ INDUSTRIES ============ */
    .industry-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .industry {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      padding: 30px 16px;
      text-align: center;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--ink);
      transition: all 0.24s;
    }

    .industry:hover {
      border-color: var(--brand);
      box-shadow: var(--shadow-sm);
      transform: translateY(-3px);
    }

    .industry span {
      display: block;
      font-size: 34px;
      margin-bottom: 12px;
      transition: transform 0.24s;
    }

    .industry:hover span { transform: scale(1.12); }

    /* ============ PRICING ============ */
    /* Auto-fit columns (v1.1.14): the API now returns four
       packages, so a fixed 3-column grid would strand the fourth
       card alone on a second row. Auto-fit shows three or four
       cards across on desktop; the tablet/mobile queries below
       still force 2 / 1 columns. */
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
      gap: 22px;
      align-items: stretch;
    }

    .price-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: 36px 30px;
      display: flex;
      flex-direction: column;
      transition: all 0.26s;
      position: relative;
    }

    .price-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-4px);
    }

    .price-card--featured {
      border: 2px solid var(--brand);
      box-shadow: 0 30px 60px -20px rgba(59, 110, 255, 0.22);
    }

    .price-card--featured::before {
      content: "MOST POPULAR";
      position: absolute;
      top: -13px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(90deg, var(--brand), var(--brand-light));
      color: #fff;
      font-family: var(--font-display);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      padding: 6px 16px;
      border-radius: 100px;
      box-shadow: 0 8px 20px -6px rgba(59, 110, 255, 0.6);
    }

    .price-card h3 { font-size: 21px; margin-bottom: 8px; }

    .price-card__desc {
      font-size: 14px;
      color: var(--muted);
      margin-bottom: 22px;
      min-height: 42px;
    }

    .price-card__amount {
      font-family: var(--font-display);
      font-size: 26px;
      font-weight: 700;
      color: var(--navy);
      letter-spacing: -0.03em;
      margin-bottom: 4px;
    }

    .price-card__amount small {
      font-size: 13px;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: 0;
    }

    .price-card__note {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 24px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--line);
    }

    .price-card__features {
      display: grid;
      gap: 13px;
      margin-bottom: 30px;
    }

    .price-card__features li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 14px;
      color: var(--slate);
    }

    .price-card__features svg {
      flex-shrink: 0;
      margin-top: 3px;
      color: var(--accent);
    }

    .price-card .btn { margin-top: auto; }

    /* ============ FAQ ============ */
    .faq {
      max-width: 820px;
      margin: 0 auto;
    }

    .faq__item {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      margin-bottom: 14px;
      overflow: hidden;
      transition: all 0.2s;
    }

    .faq__item[open] {
      border-color: rgba(59, 110, 255, 0.35);
      box-shadow: var(--shadow-sm);
    }

    .faq__item summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 22px 26px;
      cursor: pointer;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 15.5px;
      color: var(--ink);
      list-style: none;
      transition: color 0.18s;
    }

    .faq__item summary::-webkit-details-marker { display: none; }
    .faq__item summary:hover { color: var(--brand); }

    .faq__item summary .chevron {
      flex-shrink: 0;
      transition: transform 0.28s ease;
      color: var(--muted);
    }

    .faq__item[open] summary .chevron {
      transform: rotate(180deg);
      color: var(--brand);
    }

    .faq__item p {
      padding: 0 26px 24px;
      font-size: 14.5px;
      line-height: 1.7;
      color: var(--slate);
    }

    /* ============ TESTIMONIALS ============ */
    .review-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .review-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: 30px 28px;
      display: flex;
      flex-direction: column;
      transition: all 0.24s;
    }

    .review-card:hover {
      box-shadow: var(--shadow-sm);
      transform: translateY(-3px);
    }

    .review-card__stars {
      display: flex;
      gap: 3px;
      color: #f5a524;
      margin-bottom: 16px;
    }

    .review-card p {
      font-size: 15px;
      line-height: 1.7;
      color: var(--slate);
      margin-bottom: 24px;
      flex-grow: 1;
    }

    .review-card__author {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .review-card__avatar {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--brand-soft), #dce6ff);
      color: var(--brand);
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 15px;
      flex-shrink: 0;
    }

    .review-card__author strong {
      display: block;
      font-size: 14px;
      color: var(--ink);
    }

    .review-card__author small {
      display: block;
      font-size: 12px;
      color: var(--muted);
    }

    /* ============ BLOG ============ */
    .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .blog-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      overflow: hidden;
      transition: all 0.26s;
      display: flex;
      flex-direction: column;
    }

    .blog-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
      border-color: transparent;
    }

    .blog-card__art {
      height: 170px;
      display: grid;
      place-items: center;
      font-size: 50px;
      background: linear-gradient(140deg, var(--brand-soft) 0%, #f2f6ff 50%, #e8f8f2 100%);
      position: relative;
    }

    .blog-card__art::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 70% 30%, rgba(59, 110, 255, 0.1), transparent 60%);
    }

    .blog-card__body {
      padding: 26px 24px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .blog-card__tag {
      display: inline-flex;
      align-self: flex-start;
      padding: 4px 11px;
      border-radius: 100px;
      background: var(--brand-soft);
      color: var(--brand);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.02em;
      margin-bottom: 14px;
    }

    .blog-card h3 {
      font-size: 17.5px;
      margin-bottom: 10px;
      line-height: 1.35;
    }

    .blog-card p {
      font-size: 13.5px;
      color: var(--slate);
      margin-bottom: 20px;
      flex-grow: 1;
    }

    .blog-card__link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--brand);
      transition: gap 0.2s;
    }
    .blog-card__link:hover { gap: 11px; }

    /* ============================================================
       FOOTER + CTA (attached block)
       ============================================================ */
    .footer-wrap {
      background: var(--navy);
      color: #92a5c5;
      position: relative;
      overflow: hidden;
    }

    .footer-wrap::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(59, 110, 255, 0.5), transparent);
    }

    /* CTA band: full viewport width, same blue gradient (v1.1.2).
       The design file renders this as a rounded card inset in the
       footer's navy; the user asked for a full-width blue band, so
       the gradient and the decorative overlays moved from
       .footer-cta__inner onto .footer-cta itself (which spans the
       full width), and the card styling (radius, shadow, border)
       was dropped. The inner content keeps its exact max-width
       (.wrap), centering and 68px vertical spacing. */
    .footer-cta {
      position: relative;
      padding: 68px 0;
      margin-top: -1px;
      background: linear-gradient(120deg, #0d1b36 0%, #1a3a8a 55%, var(--brand) 100%);
      overflow: hidden;
      isolation: isolate;
    }

    .footer-cta__inner {
      position: relative;
      padding: 0 40px;
      text-align: center;
    }

    .footer-cta::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 10%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 10%, transparent 80%);
      z-index: -1;
    }

    .footer-cta::after {
      content: "";
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 212, 160, 0.22) 0%, transparent 65%);
      bottom: -280px;
      right: -120px;
      z-index: -1;
    }

    .footer-cta h2 {
      font-size: clamp(1.9rem, 4vw, 3rem);
      color: #fff;
      margin-bottom: 16px;
    }

    .footer-cta p {
      color: #b8c9e8;
      font-size: 17px;
      max-width: 520px;
      margin: 0 auto 34px;
    }

    .footer-cta__actions {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 14px;
    }

    .footer-cta__note {
      margin-top: 22px;
      font-size: 12.5px;
      color: #8ea2c6;
    }

    /* Footer main */
    .footer {
      background: var(--navy);
      color: #92a5c5;
      padding: 72px 0 0;
      font-size: 14px;
      position: relative;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.7fr 1fr 1fr 1.4fr;
      gap: 48px;
      padding-bottom: 56px;
    }

    .footer .brand {
      color: #fff;
      margin-bottom: 20px;
    }

    .footer p {
      font-size: 13.5px;
      line-height: 1.8;
      margin-bottom: 24px;
      color: #92a5c5;
    }

    .footer h4 {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 20px;
      letter-spacing: -0.01em;
    }

    .footer-links {
      display: grid;
      gap: 11px;
    }

    .footer-links a {
      font-size: 13.5px;
      color: #92a5c5;
      transition: color 0.18s;
    }
    .footer-links a:hover { color: #fff; }

    .footer-downloads {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 22px;
    }

    .footer-downloads a {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 9px 14px;
      border-radius: 9px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      font-size: 11.5px;
      font-weight: 600;
      color: #fff;
      transition: all 0.18s;
    }
    .footer-downloads a:hover {
      border-color: var(--brand);
      background: rgba(59, 110, 255, 0.15);
    }

    .footer-social {
      display: flex;
      gap: 8px;
    }

    .footer-social a {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.06);
      color: #c8d5ea;
      font-size: 13px;
      font-weight: 700;
      transition: all 0.18s;
    }
    .footer-social a:hover {
      background: var(--brand);
      color: #fff;
      transform: translateY(-2px);
    }

    .footer-contact {
      display: grid;
      gap: 14px;
      margin-bottom: 22px;
    }

    .footer-contact a,
    .footer-contact span {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13.5px;
      color: #92a5c5;
      transition: color 0.18s;
    }
    .footer-contact a:hover { color: #fff; }
    .footer-contact svg { flex-shrink: 0; opacity: 0.7; }

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding: 26px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      font-size: 12.5px;
      color: #7d90b0;
    }

    .footer-bottom__links {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
    }

    .footer-bottom__links a {
      color: #7d90b0;
      transition: color 0.18s;
    }
    .footer-bottom__links a:hover { color: #fff; }

    /* ============ RESPONSIVE ============ */
    @media (max-width: 1080px) {
      .hero-grid { gap: 44px; }
      .app { grid-template-columns: 108px 1fr; }
      .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 40px;
      }
      .footer-grid > div:first-child { grid-column: 1 / -1; }
    }

    @media (max-width: 920px) {
      :root { --section-y: 84px; }
      .nav { display: none; }
      .nav-toggle { display: flex; margin-left: 0; }
      .header-actions { margin-left: auto; }
      .header-actions .btn { padding: 11px 18px; font-size: 13.5px; }
      .hero-grid { grid-template-columns: 1fr; gap: 56px; }
      .hero { padding: 64px 0 90px; }
      .hero-sub { max-width: 100%; }
      .split { grid-template-columns: 1fr; gap: 48px; }
      .split--reverse .split__visual { order: 0; }
      .feature-grid,
      .pricing-grid,
      .review-grid,
      .blog-grid { grid-template-columns: repeat(2, 1fr); }
      .industry-grid { grid-template-columns: repeat(2, 1fr); }
      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
      .stat:nth-child(2)::after { display: none; }
      .stat:nth-child(1)::after,
      .stat:nth-child(3)::after { display: block; }
      .hero-float { right: 10px; bottom: -20px; }

      .footer-cta { padding: 52px 0; }
      .footer-cta__inner { padding: 0 28px; }
    }

    @media (max-width: 640px) {
      :root { --section-y: 68px; --gutter: 20px; }
      .wrap { width: min(var(--wrap), calc(100% - 36px)); }
      .topbar .wrap { justify-content: center; }
      .topbar-social { display: none; }
      .topbar-contacts { gap: 16px; font-size: 11.5px; }
      .navbar .wrap { height: 68px; }
      .brand { font-size: 20px; }
      .brand-logo { height: 40px; }
      .header-actions .btn { padding: 9px 13px; font-size: 13px; }
      .header-actions .nav-link { padding: 8px 10px; font-size: 13px; }
      .brand-mark { width: 36px; height: 36px; font-size: 19px; }
      .hero { padding: 52px 0 80px; }
      .hero-actions { flex-direction: column; align-items: stretch; }
      .hero-actions .btn { width: 100%; }
      .hero-proof { gap: 16px; }
      .hero-float {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 20px;
        animation: none;
      }
      .app { grid-template-columns: 1fr; min-height: auto; }
      .app__sidebar { display: none; }
      .app__main { padding: 16px; }
      .app__metrics { gap: 8px; }
      .metric { padding: 11px 10px; }
      .metric strong { font-size: 17px; }
      .bars { height: 90px; gap: 6px; }
      .pricing-grid,
      .review-grid,
      .blog-grid { grid-template-columns: 1fr; }
      .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
      .feature-card { padding: 22px 18px; }
      .feature-card__icon { width: 46px; height: 46px; margin-bottom: 16px; }
      .feature-card h3 { font-size: 16px; }
      .feature-card p { font-size: 13.5px; }
      .section-head { margin-bottom: 44px; }
      .section-head p { font-size: 15px; }
      .visual-card { padding: 20px; }
      .visual-card__inner { padding: 22px; }
      .stats-grid { gap: 28px; }
      .stat::after { display: none !important; }

      .footer-cta { padding: 44px 0; }
      .footer-cta__inner { padding: 0 20px; }
      .footer-cta__actions { flex-direction: column; align-items: stretch; }

      .footer { padding-top: 56px; }
      .footer-logo__img { margin: 0 auto; }
      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px 28px;
        padding-bottom: 40px;
      }
      .footer-grid > div:first-child { grid-column: 1 / -1; text-align: center; }
      .footer-grid > div:first-child .footer-downloads,
      .footer-grid > div:first-child .footer-social { justify-content: center; }
      .footer-grid > div:last-child { grid-column: 1 / -1; }
      .footer-bottom { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
      .footer-bottom__links { gap: 18px; justify-content: center; }
    }

    @media (max-width: 420px) {
      .topbar-contacts a:last-child { display: none; }
      .hero-badge { font-size: 11.5px; }
      .hero-badge b { font-size: 10px; }
      .stat strong { font-size: 1.9rem; }
    }

    @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;
      }
    }

    :focus-visible {
      outline: 2.5px solid var(--brand);
      outline-offset: 3px;
      border-radius: 4px;
    }
  

/* ============================================================
   SECTION 2 — WORDPRESS INTEGRATION
   Only what the supplied HTML design does not cover: template
   layout, post content, comments, widgets, pagination and
   WordPress menu markup. All values reuse the design tokens
   from section 1 above.
   ============================================================ */

/* Container alias: templates use .container, the design uses
   .wrap. Both resolve to the same measure. */
.container {
  width: min(var(--wrap), calc(100% - 48px));
  margin-inline: auto;
}

@media (max-width: 640px) {
  .container { width: min(var(--wrap), calc(100% - 36px)); }
}

/* Sticky navbar must clear the WordPress admin bar. */
body.admin-bar .navbar { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .navbar { top: 46px; }
}

/* Accessibility helpers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 400;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; color: #fff; }

/* Legacy theme button classes map onto the design buttons, so
   templates, the slider block and the enquiry form keep working. */
.nppos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1;
  border: 1.5px solid transparent;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.nppos-btn--primary {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.nppos-btn--primary:hover {
  background: #2a5cf0;
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -10px rgba(59, 110, 255, 0.55);
  color: #fff;
}
.nppos-btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.nppos-btn--outline:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-2px);
}
.nppos-btn--dark { background: var(--navy); color: #fff; }
.nppos-btn--dark:hover { background: var(--navy-2); transform: translateY(-2px); color: #fff; }
/* Secondary buttons sit on dark slider slides: ghost on dark. */
.nppos-btn--secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
.nppos-btn--secondary:hover {
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
}

/* Section-head / eyebrow aliases used by blocks and templates. */
.nppos-section-head {
  max-width: 640px;
  margin: 0 auto 64px;
  text-align: center;
}
.nppos-section-head h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 18px 0 16px;
}
.nppos-section-head p {
  color: var(--slate);
  font-size: 17px;
  line-height: 1.7;
}
.nppos-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}
.nppos-eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}

/* WordPress menu markup inside the design navbar. */
.nav .menu,
.nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav .menu-item a {
  display: block;
  padding: 9px 15px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
  transition: all 0.16s;
  white-space: nowrap;
}
.nav .menu-item a:hover,
.nav .menu-item.current-menu-item > a,
.nav .menu-item.current_page_item > a {
  color: var(--navy);
  background: var(--brand-soft);
}
/* Sub-menus are not part of the supplied design; the "POS For"
   dropdown is a mega-menu panel (v1.1.17-18). */
.nav .menu-item { position: relative; }
/* Mega-menu alignment (v1.1.18): the parent item is static so the
   panel positions against .nav instead of the parent — its left
   edge lines up under "Home" (the first menu item) and the panel
   opens flush with the bottom of the navbar (top: 100%, no gap),
   so the cursor never leaves the hover area on the way down and
   no hover bridge is needed. */
.nav .menu-item-has-children { position: static; }
.nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: min(620px, calc(100vw - 40px));
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 2px 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  z-index: 210;
}
.nav .menu-item:hover > .sub-menu,
.nav .menu-item:focus-within > .sub-menu,
.nav .menu-item.is-open > .sub-menu { display: grid; }
.nav .sub-menu a { white-space: normal; padding: 10px 14px; }
/* Three-column mega-menu (v1.1.19; four columns in v1.1.17-18):
   19 industries in 3 columns instead of one tall scrolling list.
   Two columns on narrower desktop widths so the panel never
   overflows the viewport; the desktop navbar itself hides at
   920px (hamburger below that). */
@media (max-width: 1100px) {
  .nav .sub-menu {
    grid-template-columns: repeat(2, 1fr);
    width: min(430px, calc(100vw - 40px));
  }
}

/* WordPress menu markup inside the mobile menu panel. */
.mobile-menu__nav .menu,
.mobile-menu__nav ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-menu__nav .menu-item a,
.mobile-menu__nav > a {
  display: block;
  padding: 13px 14px;
  border-radius: 11px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  transition: all 0.16s;
}
.mobile-menu__nav .menu-item a:hover,
.mobile-menu__nav > a:hover {
  background: var(--brand-soft);
  color: var(--brand);
}
.mobile-menu__nav .sub-menu { padding-left: 16px; }

/* Custom logo inside the brand lockup. */
.brand .custom-logo {
  width: auto;
  height: 40px;
  max-width: 200px;
  object-fit: contain;
}
.custom-logo-link { display: inline-flex; align-items: center; }

/* Page hero band for blog, archive, category, tag, search and
   single pages: the navy hero treatment from the design. */
.page-hero {
  background: var(--navy);
  color: #fff;
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 60% at 78% 18%, rgba(59, 110, 255, 0.42) 0%, transparent 60%);
}
.page-hero .container { position: relative; }
.page-hero h1,
.page-hero .archive-title,
.page-hero .entry-title {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 14px 0 12px;
}
.page-hero .nppos-eyebrow,
.page-hero .eyebrow { color: var(--brand-light); }
.page-hero .nppos-eyebrow::before,
.page-hero .eyebrow::before { background: var(--brand-light); }
.page-hero p,
.page-hero .archive-description {
  color: #a9bad6;
  font-size: 17px;
  max-width: 640px;
}
.page-hero .archive-description p { margin: 0; }
.page-hero a { color: #fff; text-decoration: underline; }

/* Template layout: content + sidebar. */
.site-main > .container,
.site-main > .page-hero + .container { padding-top: 64px; padding-bottom: 64px; }
.content-with-sidebar {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.content-area { flex: 1; min-width: 0; }
.widget-area {
  width: 320px;
  flex-shrink: 0;
}
@media (max-width: 920px) {
  .content-with-sidebar { flex-direction: column; }
  .widget-area { width: 100%; }
}

/* Single posts get their own background tint (v1.1.21) so a post
   page reads differently from the rest of the site. The navbar and
   footer keep their own backgrounds. */
body.single { background: var(--brand-soft); }

/* Listing grids: archive, category, tag, search (2 columns). Post
   cards reuse the design's .blog-card component (see content.php).
   The blog index itself is 4 columns — see the body.blog rule. */
body.archive .content-area,
body.search .content-area {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  align-items: stretch;
}
/* Blog index (home.php): full-width 4-column card grid (v1.1.20). */
body.blog .content-area {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 920px) {
  body.blog .content-area { grid-template-columns: repeat(2, 1fr); }
}
body.blog .content-area .pagination,
body.archive .content-area .pagination,
body.search .content-area .pagination,
body.blog .content-area .no-results,
body.archive .content-area .no-results,
body.search .content-area .no-results {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  body.blog .content-area,
  body.archive .content-area,
  body.search .content-area { grid-template-columns: 1fr; }
}

/* Blog cards for real posts: thumbnail art + meta row. */
.blog-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-card__art:empty { min-height: 170px; }
/* Fallback art: the NP POS logo, contained and centered in the
   gradient art area instead of filling it like a photo. */
.blog-card__art img.blog-card__fallback {
  width: auto;
  height: 120px;
  object-fit: contain;
}
.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 12px;
}
.blog-card__meta a { color: var(--slate); }
.blog-card__meta a:hover { color: var(--brand); }
.blog-card h2 {
  font-size: 17.5px;
  margin-bottom: 10px;
  line-height: 1.35;
}
.blog-card h2 a:hover { color: var(--brand); }
/* Card title links keep the heading colour (the .entry-content link
   rule excludes them via :not()); hover takes the brand colour. */
.blog-card__title-link { color: inherit; text-decoration: none; }
.blog-card__title-link:hover { color: var(--brand); text-decoration: none; }
.blog-card .entry-summary p {
  font-size: 13.5px;
  color: var(--slate);
  margin-bottom: 20px;
  flex-grow: 1;
}
.blog-card .more-link { margin-top: auto; }

/* Entry content: restore readable flow inside the design reset. */
.entry-content > * + * { margin-top: 1.25rem; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content h1 { font-size: 2.4rem; }
.entry-content h2 { font-size: 1.9rem; margin-top: 2.25rem; }
.entry-content h3 { font-size: 1.5rem; margin-top: 2rem; }
.entry-content h4 { font-size: 1.2rem; margin-top: 1.75rem; }
.entry-content p,
.entry-content li { color: var(--slate); }
/* Button links and industry cards keep their own colours: without
   the :not() exclusions this rule (specificity 0,1,1) beat
   .nppos-btn--primary (0,1,0) and painted the hero CTA label
   brand-blue on its brand-blue pill, making it invisible on static
   front pages (v1.1.1 fix); the same would repaint the linked
   .industry cards brand-blue with underlines (v1.1.6), and the
   blog card title and Read more links brand-blue with underlines
   inside page content (v1.1.9). */
.entry-content a:not(.nppos-btn):not(.btn):not(.industry):not(.blog-card__link):not(.blog-card__title-link) { color: var(--brand); text-decoration: underline; }
.entry-content a:not(.nppos-btn):not(.btn):not(.industry):not(.blog-card__link):not(.blog-card__title-link):hover { color: #2a5cf0; }
.entry-content ul,
.entry-content ol {
  list-style: revert;
  padding-left: 1.5rem;
}
.entry-content ul li + li,
.entry-content ol li + li { margin-top: 0.5rem; }
.entry-content blockquote {
  border-left: 3px solid var(--brand);
  padding: 0.5rem 0 0.5rem 1.25rem;
  color: var(--ink);
  font-size: 1.1rem;
}
.entry-content blockquote p { color: var(--ink); }
.entry-content hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2rem 0;
}
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.entry-content th,
.entry-content td {
  padding: 10px 14px;
  border: 1px solid var(--line);
  text-align: left;
}
.entry-content th { background: var(--paper-alt); color: var(--navy); }
.entry-content code {
  background: var(--brand-soft);
  color: var(--navy);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.9em;
}
.entry-content pre {
  background: var(--navy);
  color: #e6ecf7;
  padding: 20px 22px;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.6;
}
.entry-content pre code {
  background: none;
  color: inherit;
  padding: 0;
}
.entry-content figure { margin: 1.5rem 0; }
.entry-content figcaption,
.wp-caption-text {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
}
.entry-content img { border-radius: var(--r-md); }
.entry-content .alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.entry-content .alignright { float: right; margin: 0 0 1rem 1.5rem; }
.entry-content .aligncenter { margin-inline: auto; text-align: center; }
.entry-content .alignwide { max-width: 1320px; }
.entry-content .wp-block-group.has-background { padding: 2rem; }
.entry-content .wp-block-columns { gap: 22px; }

/* Core block buttons match the design buttons. */
.wp-block-button__link,
.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1;
  border: 1.5px solid transparent;
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
  text-decoration: none;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.wp-block-button__link:hover,
.wp-element-button:hover {
  background: #2a5cf0;
  transform: translateY(-2px);
  color: #fff;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.entry-content .wp-block-button__link { text-decoration: none; }

/* Query / post-template grids used by the Blog Grid pattern. */
.wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.wp-block-post-template .wp-block-post { margin: 0; }
@media (max-width: 920px) {
  .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .wp-block-post-template { grid-template-columns: 1fr; }
}
.wp-block-query-pagination {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* Single post header, meta, footer, navigation. */
.entry-header { margin-bottom: 28px; }
.entry-header .entry-title {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  margin-bottom: 14px;
}
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13.5px;
  color: var(--muted);
}
.entry-meta a { color: var(--slate); }
.entry-meta a:hover { color: var(--brand); }
.post-thumbnail { margin-bottom: 28px; }
.post-thumbnail img { border-radius: var(--r-lg); width: 100%; height: auto; }
.entry-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.cat-links a,
.tags-links a {
  display: inline-flex;
  padding: 4px 11px;
  border-radius: 100px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 6px 6px 0;
}
.cat-links a:hover,
.tags-links a:hover { background: var(--brand); color: #fff; }
.page-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
}
.page-links a,
.page-links > span {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--ink);
}
.page-links a:hover { border-color: var(--brand); color: var(--brand); }
.page-links > span { background: var(--brand); border-color: var(--brand); color: #fff; }
.post-navigation { margin-top: 40px; }
.post-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.post-navigation a {
  display: block;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  max-width: 48%;
}
.post-navigation a:hover { border-color: var(--brand); color: var(--brand); }
@media (max-width: 640px) {
  .post-navigation a { max-width: 100%; width: 100%; }
}

/* Pagination. */
.pagination { margin-top: 40px; }
.pagination .nav-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.pagination a.page-numbers:hover { border-color: var(--brand); color: var(--brand); }
.pagination .page-numbers.current {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.pagination .page-numbers.dots { border-color: transparent; }

/* Read-more links. */
.more-link,
.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand);
  transition: gap 0.2s;
}
.more-link:hover,
.blog-card__link:hover { gap: 11px; color: var(--brand); }

/* Centered "View all" link below the latest-posts grid. */
.blog-view-all { text-align: center; margin-top: 28px; }

/* Search form. */
.search-form {
  display: flex;
  gap: 10px;
  max-width: 520px;
}
.search-form label { flex: 1; min-width: 0; }
.search-form .search-field {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.search-form .search-field:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(59, 110, 255, 0.15);
}
.search-form .search-submit { flex-shrink: 0; }

/* 404 and no-results. */
.error-404 { text-align: center; padding: 32px 0 8px; }
.error-404__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(100deg, var(--brand) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.error-404 h1 { margin: 16px 0 12px; }
.error-404 p { color: var(--slate); max-width: 520px; margin-inline: auto; }
.error-404 .search-form { margin: 28px auto; }
.error-404 .search-form + p { margin-top: 24px; }
.no-results { padding: 16px 0; }
.no-results h1 { margin-bottom: 12px; }
.no-results p { color: var(--slate); margin-bottom: 20px; }

/* Comments. */
.comments-area { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.comments-title { font-size: 1.5rem; margin-bottom: 24px; }
.comment-list { display: grid; gap: 20px; }
.comment-list .children { margin: 20px 0 0 48px; display: grid; gap: 20px; }
.comment-body {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 22px;
}
.comment-author { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.comment-author .avatar { border-radius: 50%; }
.comment-author .fn { font-weight: 600; color: var(--ink); font-style: normal; }
.comment-author .fn a { color: var(--ink); }
.comment-author .says { color: var(--muted); font-size: 13px; }
.comment-metadata { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.comment-metadata a { color: var(--muted); }
.comment-content p { color: var(--slate); font-size: 15px; }
.comment-content p + p { margin-top: 0.75rem; }
.comment-content a { color: var(--brand); }
.reply { margin-top: 12px; }
.comment-reply-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
}
.comment-reply-link:hover { color: #2a5cf0; }
.comment-awaiting-moderation { color: var(--muted); font-size: 13.5px; font-style: italic; }
.no-comments { color: var(--muted); margin-top: 20px; }
.comment-navigation { margin: 20px 0; }
.comment-navigation .nav-links { display: flex; justify-content: space-between; gap: 12px; }
.comment-navigation a { font-weight: 600; font-size: 14px; color: var(--brand); }

/* Comment form + generic WordPress forms. */
.comment-form { margin-top: 32px; }
.comment-reply-title { font-size: 1.4rem; margin-bottom: 8px; }
.comment-reply-title small { font-size: 13px; font-family: var(--font-body); font-weight: 500; margin-left: 10px; }
.comment-reply-title small a { color: var(--brand); }
.comment-notes,
.logged-in-as { color: var(--muted); font-size: 13.5px; margin-bottom: 20px; }
.comment-notes a,
.logged-in-as a { color: var(--brand); }
.comment-form p { margin-bottom: 16px; }
.comment-form label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.post-password-form input[type="password"] {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.comment-form input:focus,
.comment-form textarea:focus,
.post-password-form input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(59, 110, 255, 0.15);
}
.comment-form .form-submit { margin-bottom: 0; }
.comment-form #submit,
.post-password-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1;
  border: 1.5px solid transparent;
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
  transition: all 0.22s;
  cursor: pointer;
}
.comment-form #submit:hover,
.post-password-form input[type="submit"]:hover {
  background: #2a5cf0;
  transform: translateY(-2px);
}
.comment-form-cookies-consent label {
  display: inline;
  font-weight: 500;
  color: var(--slate);
  margin: 0 0 0 8px;
}
.comment-form-cookies-consent input { width: auto; }

/* Widgets. */
.widget { margin-bottom: 36px; }
.widget:last-child { margin-bottom: 0; }
.widget-title {
  font-size: 15px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.widget ul { display: grid; gap: 10px; }
.widget li { font-size: 14.5px; color: var(--slate); }
.widget li a { color: var(--slate); }
.widget li a:hover { color: var(--brand); }
.widget select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: 14.5px;
  background: #fff;
  color: var(--ink);
}
.widget .tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.widget .tagcloud a {
  padding: 4px 11px;
  border-radius: 100px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12px !important;
  font-weight: 600;
}
.widget .tagcloud a:hover { background: var(--brand); color: #fff; }
.widget_calendar table { width: 100%; border-collapse: collapse; font-size: 13.5px; text-align: center; }
.widget_calendar th,
.widget_calendar td { padding: 6px; border: 1px solid var(--line); }
.widget_calendar caption { font-weight: 600; margin-bottom: 10px; color: var(--navy); }
.widget_calendar a { color: var(--brand); font-weight: 600; }
.widget .wp-block-search__inside-wrapper { display: flex; gap: 10px; }
.widget .wp-block-search__input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: 14.5px;
}
.widget .wp-block-search__button {
  padding: 12px 18px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

/* Footer menu (only when a Footer menu is assigned; otherwise the
   fixed legal links from the supplied design are shown). */
.footer-bottom .menu {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-bottom .menu a { color: #7d90b0; transition: color 0.18s; }
.footer-bottom .menu a:hover { color: #fff; }

/* Footer logo at the top of the footer (user-supplied NP POS logo,
   assets/img/nppos-logo.png). Left-aligned with the footer brand
   column. The PNG has transparent corners, so no border-radius is
   needed to hide them. */
.footer-logo { margin-bottom: 28px; }
.footer-logo__img { height: 56px; width: auto; display: block; }
@media (max-width: 640px) {
  .footer-logo__img { height: 48px; }
}

/* Gallery / caption fallbacks. */
.gallery { display: grid; gap: 16px; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-item img { border-radius: var(--r-md); width: 100%; height: auto; }
.gallery-caption { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 6px; }
.bypostauthor > .comment-body { border-color: rgba(59, 110, 255, 0.35); }

/* Industry archive pages (taxonomy-industry.php, v1.1.3). The
   feature cards reuse the design's .feature-card component, but the
   icon SVGs come from the theme icon helper without width/height
   attributes, so size them here. The intro section's section-head
   holds two paragraphs and is the section's only content: give the
   paragraphs a gap and drop the trailing margin. */
.feature-card__icon svg {
  width: 24px;
  height: 24px;
}
.section-head p + p { margin-top: 16px; }
.section-head:last-child { margin-bottom: 0; }

/* Page-hero call-to-action buttons (industry hero). The generic
   .page-hero a rule would otherwise underline button links and
   recolour them; buttons keep their own colours and no underline. */
.page-hero .btn { text-decoration: none; }
.page-hero .hero-actions { margin: 28px 0 0; }

/* Contact Form 7 (optional plugin): style CF7 forms in the design
   language, mirroring the enquiry form fields and primary button.
   CSS only — the theme works fine without the plugin installed.
   Response-output selectors are scoped to beat the plugin's own
   stylesheet, which colours the output border by form state. */
.wpcf7-form p { margin: 0 0 18px; }
.wpcf7-form label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(59, 110, 255, 0.15);
}
.wpcf7-form textarea {
  resize: vertical;
  min-height: 120px;
}
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover {
  background: #2a5cf0;
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -10px rgba(59, 110, 255, 0.55);
}
.wpcf7-form .wpcf7-form-control.wpcf7-not-valid {
  border-color: #e5484d;
}
.wpcf7-form .wpcf7-not-valid-tip {
  display: block;
  color: #c92a2a;
  font-size: 13px;
  font-weight: 500;
  margin-top: 6px;
}
.wpcf7 form.wpcf7-form .wpcf7-response-output {
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-size: 14.5px;
  font-weight: 500;
  margin: 24px 0 0;
  text-align: center;
}
.wpcf7 form.wpcf7-form.sent .wpcf7-response-output,
.wpcf7 form.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
  background: #e6fcf5;
  color: #0e9f7a;
  border: 1px solid rgba(0, 212, 160, 0.4);
}
.wpcf7 form.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 form.wpcf7-form.failed .wpcf7-response-output,
.wpcf7 form.wpcf7-form.spam .wpcf7-response-output,
.wpcf7 form.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7 form.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors,
.wpcf7 form.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ng {
  background: #fdeeee;
  color: #c92a2a;
  border: 1px solid rgba(229, 72, 77, 0.4);
}