/* Brand tokens sampled directly from AccurDigital-2026-v7.pdf */
    @font-face{ font-family:'Lato'; src:url('../fonts/lato-400.woff2') format('woff2');
      font-weight:400; font-style:normal; font-display:swap; }
    @font-face{ font-family:'Lato'; src:url('../fonts/lato-700.woff2') format('woff2');
      font-weight:700; font-style:normal; font-display:swap; }
    @font-face{ font-family:'Montserrat'; src:url('../fonts/montserrat-600.woff2') format('woff2');
      font-weight:600; font-style:normal; font-display:swap; }
    @font-face{ font-family:'Montserrat'; src:url('../fonts/montserrat-700.woff2') format('woff2');
      font-weight:700; font-style:normal; font-display:swap; }

    :root{
      --bg:#FFFFFF;
      --bg2:#F7F9FC;
      --navy:#203757;         /* deck wordmark navy */
      --line:rgba(18,38,63,.12);
      --text:#12263F;         /* deck navy for body type */
      --muted:#4A5B72;
      --muted2:#7B8899;
      --accent:#B84C34;       /* AD mark rust-orange */
      --accent2:#539DF4;      /* deck blue dots */
      --good:#539DF4;
      --shadow: 0 18px 60px rgba(18,38,63,0.12);
      --radius: 20px;
      --max: 1120px;
    }

    *{ box-sizing:border-box; }
    html,body{
      margin:0; padding:0;
      background:
        radial-gradient(900px 520px at 88% 4%, rgba(184,76,52,.05), transparent 60%),
        radial-gradient(760px 520px at 4% 96%, rgba(83,157,244,.07), transparent 62%),
        url("../images/wave-motif.svg") center top / 100% auto no-repeat,
        #FFFFFF;
      background-attachment: fixed, fixed, fixed, scroll;
      color:var(--text);
      font-family: 'Lato', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      overflow-x:hidden;
      scroll-behavior:smooth;
    }
    a{ color:inherit; text-decoration:none; }
    .wrap{ max-width:var(--max); margin:0 auto; padding: 0 20px; }
    .skip{
      position:absolute; left:-9999px; top:0; z-index:100;
      background:var(--bg2); color:var(--text); padding:12px 16px; border-radius:0 0 12px 0;
    }
    .skip:focus{ left:0; }

    .noise{
      position:fixed; inset:0; pointer-events:none; opacity:0.02; mix-blend-mode:overlay; z-index:0;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
      background-size: 240px 240px;
    }

    /* ---------- Header ---------- */
    header{
      position:sticky; top:0; z-index:60;
      backdrop-filter: blur(12px);
      background: linear-gradient(180deg, rgba(7,10,16,.88), rgba(7,10,16,.55));
      border-bottom:1px solid rgba(18,38,63,0.033);
    }
    .nav{ display:flex; justify-content:space-between; align-items:center; height:72px; gap:16px; }
    .brand{ display:flex; gap:10px; align-items:center; flex:0 0 auto; }

    .logoWrap{
      /* wordmark is 246x39 (6.3:1) - a square frame renders it illegible */
      height:38px; padding:0 12px; border-radius:14px;
      display:grid; place-items:center;
      /* kept dark: the wordmark is white, so a bright fill would wash it out */
      background:
        radial-gradient(circle at 30% 20%, rgba(184,76,52,.38), rgba(83,157,244,.16) 55%, rgba(83,157,244,.08) 75%, transparent),
        rgba(7,10,16,.88);
      box-shadow: 0 12px 30px rgba(18,38,63,0.08);
      border:1px solid rgba(18,38,63,.12);
      position:relative; overflow:hidden; flex:0 0 auto;
    }
    .logoImg{
      height:20px; width:auto; object-fit:contain; position:relative; z-index:1;
      animation: logoGlow 4s ease-in-out infinite;
    }
    @keyframes logoGlow{
      0%, 100%{
        filter: drop-shadow(0 6px 18px rgba(18,38,63,0.08))
                drop-shadow(0 0 2px rgba(184,76,52,.10));
      }
      50%{
        filter: drop-shadow(0 6px 18px rgba(18,38,63,0.08))
                drop-shadow(0 0 7px rgba(184,76,52,.75))
                drop-shadow(0 0 14px rgba(83,157,244,.45));
      }
    }

    /* Primary nav with dropdowns */
    .mainnav{ display:flex; gap:4px; align-items:center; margin-left:auto; }
    .menu{ position:relative; }
    .menu > button{
      font: inherit; font-size:13px; color:var(--muted);
      background:none; border:0; cursor:pointer;
      padding:10px 12px; border-radius:12px;
      display:inline-flex; align-items:center; gap:7px;
      transition: background .2s ease, color .2s ease;
    }
    .menu > button:hover, .menu > button:focus-visible{ background:rgba(18,38,63,0.033); color:var(--text); }
    .menu > button .caret{ width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); opacity:.7; }
    .menu-panel{
      position:absolute; top:calc(100% + 6px); left:0; min-width:236px;
      padding:8px; border-radius:16px;
      background:#FFFFFF;
      border:1px solid rgba(18,38,63,.10);
      box-shadow: var(--shadow);
      opacity:0; visibility:hidden; transform:translateY(6px);
      transition: opacity .16s ease, transform .16s ease;
    }
    .menu:hover .menu-panel,
    .menu:focus-within .menu-panel{ opacity:1; visibility:visible; transform:none; }
    .menu-panel a{
      display:block; padding:9px 11px; border-radius:10px;
      font-size:13px; color:var(--muted);
      transition: background .18s ease, color .18s ease;
    }
    .menu-panel a:hover, .menu-panel a:focus-visible{ background:rgba(18,38,63,0.039); color:var(--text); }

    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:11px 14px; border-radius:14px; font-size:13px;
      border:1px solid rgba(18,38,63,.12);
      background: rgba(18,38,63,0.033);
      box-shadow: 0 12px 40px rgba(18,38,63,0.06);
      transition: transform .15s ease, background .2s ease, border-color .2s ease;
      user-select:none; white-space:nowrap; cursor:pointer;
      font-family:inherit; color:inherit;
    }
    .btn:hover{ transform: translateY(-1px); background: rgba(18,38,63,0.050); border-color: rgba(18,38,63,0.088); }
    .btn.primary{
      background: linear-gradient(135deg, #B84C34, #D2603F);
      border-color: transparent; color:#fff;
    }
    .btn.primary:hover{ background: linear-gradient(135deg, #C25438, #DE6B47); }
    .btn.lg{ padding:14px 20px; font-size:14px; border-radius:16px; }

    /* Mobile menu */
    .burger{ display:none; }
    #mobilePanel{ display:none; }
    #mobilePanel.open{ display:block; }
    #mobilePanel{
      border-top:1px solid rgba(18,38,63,0.044);
      background:rgba(7,10,16,.98);
      padding:14px 0 20px;
      max-height:70vh; overflow-y:auto;
    }
    #mobilePanel .grp{ padding:10px 0; border-top:1px dashed rgba(18,38,63,0.055); }
    #mobilePanel .grp:first-child{ border-top:none; }
    #mobilePanel .grp h4{ margin:0 0 6px; font-size:12px; color:var(--muted2); font-weight:600; letter-spacing:.4px; text-transform:uppercase; }
    #mobilePanel .grp a{ display:block; padding:8px 0; font-size:14px; color:var(--muted); }

    /* ---------- Hero ---------- */
    .hero{ position:relative; z-index:1; padding: 62px 0 12px; }
    .pill{
      display:inline-flex; gap:10px; align-items:center;
      padding:8px 12px; border-radius:999px;
      background: rgba(18,38,63,0.033);
      border:1px solid rgba(18,38,63,.12);
      color:var(--muted); font-size:12px; width: fit-content;
    }
    .dot{ width:8px; height:8px; border-radius:999px; background: var(--good); box-shadow: 0 0 0 4px rgba(83,157,244,.10); }
    h1, h2, h3, .counter, .section-head h2, .cta h3{
      font-family:'Montserrat', 'Lato', ui-sans-serif, system-ui, sans-serif;
    }
    h1{
      font-size: clamp(32px, 4.2vw, 54px);
      line-height:1.06; margin: 16px 0 14px; letter-spacing:-.8px;
      max-width: 20ch;
    }
    .lead{ font-size: 16px; color: var(--muted); line-height:1.6; max-width: 62ch; }
    .hero-actions{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; align-items:center; }

    .hero-grid{
      display:grid; grid-template-columns: 1.02fr .98fr;
      gap:38px; align-items:center;
    }
    .hero-visual{ position:relative; }
    .hero-visual:before{
      content:""; position:absolute; inset:-14% -10%;
      background:
        radial-gradient(closest-side, rgba(184,76,52,.34), transparent 72%),
        radial-gradient(closest-side, rgba(83,157,244,.22), transparent 78%);
      filter: blur(6px); z-index:0;
    }
    .hero-visual img{
      position:relative; z-index:1;
      width:100%; height:auto; display:block;
      filter: drop-shadow(0 34px 64px rgba(18,38,63,0.14));
    }

    /* Wide photographic band, toned to sit in the dark palette */
    .figure{
      position:relative; margin: 0 0 22px;
      border-radius: var(--radius); overflow:hidden;
      border:1px solid rgba(18,38,63,.10);
      box-shadow: var(--shadow);
    }
    .figure img{
      display:block; width:100%; height:auto;
      filter: saturate(.85) brightness(.78) contrast(1.02);
    }
    .figure:after{
      content:""; position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(7,10,16,.10), rgba(7,10,16,.72)),
                  linear-gradient(90deg, rgba(184,76,52,.20), transparent 55%);
      pointer-events:none;
    }

    /* Proof point chips */
    .chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
    .chip{
      display:inline-flex; align-items:center; gap:8px;
      padding:9px 13px; border-radius:999px; font-size:12.5px;
      border:1px solid rgba(18,38,63,0.061);
      background: rgba(18,38,63,0.028);
      color:var(--muted);
    }
    .chip b{ color:var(--text); font-weight:600; }
    .chip .sq{
      width:7px; height:7px; border-radius:2px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      flex:0 0 auto;
    }

    /* ---------- Business impact callout ---------- */
    .impact{
      margin-top:18px; padding:14px 16px;
      border-left:3px solid transparent;
      border-image: linear-gradient(180deg, var(--accent), var(--accent2)) 1;
      background: linear-gradient(90deg, rgba(184,76,52,.10), rgba(83,157,244,.03) 70%, transparent);
      color:var(--text); font-size:13.5px; line-height:1.6; font-weight:600;
      border-radius: 0 12px 12px 0;
    }
    .impact .k{
      display:block; font-size:11px; letter-spacing:.7px; text-transform:uppercase;
      color:var(--muted2); font-weight:700; margin-bottom:5px;
    }

    /* ---------- Sections ---------- */
    section{ position:relative; z-index:1; padding: 62px 0; scroll-margin-top: 84px; }
    .section-head{ margin-bottom: 22px; max-width: 72ch; }
    .eyebrow{
      font-size:11.5px; letter-spacing:1px; text-transform:uppercase;
      color:var(--accent2); font-weight:700; margin-bottom:10px;
    }
    .section-head h2{ margin:0 0 10px; font-size: clamp(22px, 2.4vw, 30px); letter-spacing:-.5px; line-height:1.15; }
    .section-head p{ margin:0 0 8px; color:var(--muted); font-size:14px; line-height:1.65; }

    .grid{ display:grid; gap:14px; grid-template-columns: repeat(12, 1fr); }
    .card{
      grid-column: span 4;
      border:1px solid rgba(18,38,63,.12);
      background: linear-gradient(180deg, rgba(18,38,63,0.033), rgba(18,38,63,0.017));
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: 0 14px 48px rgba(18,38,63,0.07);
      transition: transform .18s ease, border-color .2s ease, background .2s ease;
    }
    .card:hover{
      transform: translateY(-2px);
      border-color: rgba(18,38,63,0.099);
      background: linear-gradient(180deg, rgba(18,38,63,0.044), rgba(18,38,63,0.022));
    }
    .card h3{ margin: 10px 0 5px; font-size: 15.5px; letter-spacing:-.2px; }
    .card .tagline{ margin:0 0 8px; color:var(--accent2); font-size:12.5px; font-weight:600; line-height:1.45; }
    .card p{ margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
    .card.c6{ grid-column: span 6; }
    .card.c3{ grid-column: span 3; }

    .badge{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
    .icon{
      width:28px; height:28px; border-radius:12px; flex:0 0 auto;
      border:1px solid rgba(18,38,63,.10);
      background: radial-gradient(circle at 30% 20%, rgba(184,76,52,.55), rgba(83,157,244,.09) 55%, rgba(18,38,63,0.022));
    }
    .num{
      display:inline-grid; place-items:center;
      width:34px; height:34px; border-radius:12px;
      border:1px solid rgba(18,38,63,0.077);
      background: linear-gradient(135deg, rgba(184,76,52,.28), rgba(83,157,244,.12));
      font-size:12.5px; font-weight:800; letter-spacing:.3px;
    }

    .split{ display:grid; gap:16px; grid-template-columns: 1fr 1fr; align-items:stretch; }
    .box{
      border:1px solid rgba(18,38,63,.12);
      background: rgba(18,38,63,0.028);
      border-radius: var(--radius);
      padding: 20px;
      box-shadow: var(--shadow);
    }
    .list{ margin:14px 0 0; padding:0; list-style:none; color:var(--muted); font-size:13.5px; }
    .list li{ padding:11px 0; border-top:1px dashed rgba(18,38,63,0.055); display:flex; gap:10px; align-items:flex-start; }
    .list li:first-child{ border-top:none; padding-top:0; }
    .check{
      display:inline-grid; place-items:center;
      width:19px; height:19px; border-radius:9px; flex:0 0 auto; margin-top:1px;
      border:1px solid rgba(18,38,63,0.099);
      background: rgba(83,157,244,.14);
      font-size:11px; color:var(--good);
    }

    /* KPI / platform counter */
    .kpi{
      border:1px solid rgba(18,38,63,.12);
      background: rgba(18,38,63,0.028);
      border-radius: var(--radius);
      padding: 20px; box-shadow: var(--shadow);
      position:relative; overflow:hidden;
    }
    .kpi:before{
      content:""; position:absolute; inset:-60% -50%;
      background:
        radial-gradient(circle at 40% 30%, rgba(184,76,52,.22), transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(83,157,244,.09), transparent 55%);
    }
    .kpi > *{ position:relative; z-index:1; }
    .counter{
      font-size: clamp(40px, 6vw, 64px); font-weight:800; letter-spacing:-2px; line-height:1;
      background: linear-gradient(135deg, #12263F, #B84C34);
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    .counter-label{ color:var(--muted); font-size:13px; margin-top:8px; }

    /* AccurPulse feature section */
    .feature{
      border:1px solid rgba(18,38,63,0.077);
      border-radius: 28px;
      padding: 30px;
      background:
        radial-gradient(900px 460px at 15% 0%, rgba(184,76,52,.12), transparent 60%),
        radial-gradient(760px 420px at 85% 25%, rgba(83,157,244,.10), transparent 62%),
        rgba(18,38,63,0.019);
      box-shadow: var(--shadow);
    }

    /* CTA */
    .cta{
      border:1px solid rgba(18,38,63,.12);
      background:
        radial-gradient(800px 420px at 20% 0%, rgba(184,76,52,.10), transparent 60%),
        radial-gradient(800px 420px at 80% 20%, rgba(83,157,244,.09), transparent 62%),
        rgba(18,38,63,0.022);
      border-radius: 28px; padding: 24px;
      box-shadow: var(--shadow);
      display:flex; justify-content:space-between; align-items:center; gap:18px;
    }
    .cta h3{ margin:0; font-size:19px; letter-spacing:-.2px; }
    .cta p{ margin:8px 0 0; color:var(--muted); font-size:13.5px; line-height:1.6; }
    .cta a.plain{ color:var(--text); text-decoration:underline; text-decoration-color: rgba(18,38,63,0.100); }
    .cta-final{
      border-radius:32px; padding:40px 34px; text-align:center;
      flex-direction:column; justify-content:center;
      border:1px solid rgba(18,38,63,0.099);
      background:
        radial-gradient(900px 500px at 50% 0%, rgba(184,76,52,.16), transparent 62%),
        radial-gradient(700px 420px at 20% 100%, rgba(83,157,244,.14), transparent 60%),
        radial-gradient(700px 420px at 85% 90%, rgba(83,157,244,.14), transparent 58%),
        rgba(18,38,63,0.028);
    }
    .cta-final h3{ font-size: clamp(24px, 3vw, 34px); letter-spacing:-.6px; max-width:22ch; }
    .cta-final p{ max-width: 68ch; margin-left:auto; margin-right:auto; }

    .section-cta{ margin-top:20px; }

    /* Contact form */
    .form{ display:grid; gap:13px; margin:24px auto 0; max-width:580px; text-align:left; }
    .form .row{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
    .field label{ display:block; font-size:12px; color:var(--muted2); margin-bottom:6px; }
    .field input, .field textarea{
      width:100%; font:inherit; font-size:14px; color:var(--text);
      background:rgba(18,38,63,0.028);
      border:1px solid rgba(18,38,63,0.077);
      border-radius:12px; padding:11px 13px; outline:none;
      transition:border-color .18s ease, background .18s ease;
    }
    .field input::placeholder, .field textarea::placeholder{ color:rgba(18,38,63,0.100); }
    .field input:focus, .field textarea:focus{
      border-color:rgba(184,76,52,.75); background:rgba(18,38,63,0.044);
      box-shadow:0 0 0 3px rgba(184,76,52,.16);
    }
    .field textarea{ resize:vertical; min-height:118px; }
    .form-foot{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:space-between; }
    .form-status{ font-size:13px; line-height:1.5; min-height:20px; color:var(--muted); }
    .form-status.ok{ color:var(--good); }
    .form-status.err{ color:#FF9B9B; }
    .hp{ position:absolute; left:-9999px; top:-9999px; }

    /* Verification progress, driven by the Turnstile lifecycle */
    .verify{ margin-top:4px; }
    .verify-head{
      display:flex; justify-content:space-between; align-items:center; gap:12px;
      font-size:12px; color:var(--muted2); margin-bottom:8px;
    }
    .verify-state{ font-weight:600; color:var(--muted); display:inline-flex; align-items:center; gap:7px; }
    .verify-state:before{
      content:""; width:7px; height:7px; border-radius:999px;
      background:var(--muted2); flex:0 0 auto;
    }
    .verify-track{
      height:6px; border-radius:999px; overflow:hidden;
      background:rgba(18,38,63,0.039);
      border:1px solid rgba(18,38,63,0.050);
    }
    .verify-fill{
      height:100%; width:6%; border-radius:999px; position:relative;
      background:linear-gradient(90deg, var(--accent), var(--accent2));
      transition: width .55s cubic-bezier(.2,.8,.2,1), background .3s ease;
    }
    .verify.is-busy .verify-fill:after{
      content:""; position:absolute; inset:0;
      background:linear-gradient(90deg, transparent, rgba(18,38,63,0.100), transparent);
      animation: sheen 1.1s linear infinite;
    }
    @keyframes sheen{ from{ transform:translateX(-100%);} to{ transform:translateX(100%);} }
    .verify.is-busy .verify-state:before{ background:var(--accent2); box-shadow:0 0 0 3px rgba(83,157,244,.09); }
    .verify.is-ok .verify-fill{ background:linear-gradient(90deg, var(--good), var(--accent2)); }
    .verify.is-ok .verify-state{ color:var(--good); }
    .verify.is-ok .verify-state:before{ background:var(--good); box-shadow:0 0 0 3px rgba(83,157,244,.09); }
    .verify.is-err .verify-fill{ background:linear-gradient(90deg, #FF7A7A, #FFB199); }
    .verify.is-err .verify-state{ color:#FF9B9B; }
    .verify.is-err .verify-state:before{ background:#FF9B9B; box-shadow:0 0 0 3px rgba(255,155,155,.18); }
    @media (prefers-reduced-motion: reduce){
      .verify-fill{ transition:none; }
      .verify.is-busy .verify-fill:after{ animation:none; }
    }
    @media (max-width:560px){ .form .row{ grid-template-columns:1fr; } }

    /* Reveal — only active when JS is available */
    .js .reveal{ opacity:0; transform:translateY(12px); }
    .js .reveal.is-visible{
      opacity:1; transform:none;
      transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
    }

    footer{
      padding: 44px 0 60px; color:var(--muted2);
      border-top:1px solid rgba(18,38,63,0.033);
      margin-top: 30px; position:relative; z-index:1;
    }
    .foot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center; }
    .foot a{ color:var(--muted); }
    .foot a:hover{ color:var(--text); }

    /* ---------- Responsive ---------- */
    @media (max-width: 1060px){
      .mainnav{ display:none; }
      .burger{ display:inline-flex; }
    }
    @media (max-width: 960px){
      .hero-grid{ grid-template-columns: 1fr; gap:28px; }
      .grid .card{ grid-column: span 6; }
      .grid .card.c3{ grid-column: span 6; }
      .grid .card.c6{ grid-column: span 12; }
      .split{ grid-template-columns: 1fr; }
      .cta{ flex-direction:column; align-items:flex-start; }
      .cta-final{ align-items:center; }
    }
    @media (max-width: 560px){
      .grid .card, .grid .card.c3, .grid .card.c6{ grid-column: span 12; }
      section{ padding: 46px 0; }
    }

    @media (prefers-reduced-motion: reduce){
      html{ scroll-behavior:auto; }
      .logoImg{ animation:none; filter: drop-shadow(0 6px 18px rgba(18,38,63,0.08)); }
      .js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
      .btn,.card{ transition:none; }
    }
/* ---------- Module page additions ---------- */
.crumb{ font-size:12px; color:var(--muted2); margin-bottom:14px; }
.crumb a{ color:var(--muted); } .crumb a:hover{ color:var(--text); }
.mod-hero{ padding: 54px 0 8px; position:relative; z-index:1; }
.mod-hero h1{ font-size: clamp(28px, 3.4vw, 44px); max-width:24ch; }
.pill-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:26px; }
.pill-card{
  border:1px solid rgba(18,38,63,.12); border-radius:16px; padding:14px 16px;
  background:linear-gradient(180deg, rgba(18,38,63,0.033), rgba(18,38,63,0.017));
}
.pill-card .t{ font-size:11px; letter-spacing:.9px; text-transform:uppercase; color:var(--accent2); font-weight:700; }
.pill-card .d{ margin-top:6px; font-size:13px; color:var(--muted); line-height:1.5; }
.cap-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cap{
  display:flex; gap:11px; align-items:flex-start;
  border:1px solid rgba(18,38,63,0.050); border-radius:14px; padding:14px 15px;
  background:rgba(18,38,63,0.022); font-size:13.5px; color:var(--muted); line-height:1.55;
}
.related{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.related a{
  display:block; border:1px solid rgba(18,38,63,.12); border-radius:16px; padding:15px 16px;
  background:rgba(18,38,63,0.022); transition:border-color .2s ease, background .2s ease, transform .18s ease;
}
.related a:hover{ border-color:rgba(18,38,63,0.100); background:rgba(18,38,63,0.039); transform:translateY(-2px); }
.related .n{ font-size:14px; font-weight:600; }
.related .s{ font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.5; }
.card .more{ display:inline-block; margin-top:12px; font-size:12.5px; color:var(--accent2); font-weight:600; }
.card .more:hover{ text-decoration:underline; }
@media (max-width:820px){
  .pill-row{ grid-template-columns:1fr; }
  .cap-grid{ grid-template-columns:1fr; }
  .related{ grid-template-columns:1fr; }
}

/* ---------- Credibility: customers, partners, marketplace ---------- */
/* Logos keep their own brand colours, so they sit on a light tile
   rather than being inverted or knocked out. */
.logo-tile{
  background:#F4F6FA; border:1px solid rgba(18,38,63,.12);
  border-radius:16px; padding:18px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* max-* rather than width/height:100% - a centred flex/grid item is sized to
   its content, so percentage heights do not resolve and the logo overflows. */
.logo-tile img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block;
}
.logo-tile:hover{ transform:scale(1.025); box-shadow:0 16px 40px rgba(18,38,63,0.08); }

/* 01 Customers - the most prominent proof point */
.cust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cust{ text-align:center; }
.cust .logo-tile{ height:132px; }
.cust .yr{ display:inline-block; margin-top:12px; font-size:11.5px; font-weight:700;
  letter-spacing:1px; color:var(--accent2); }
.cust .nm{ margin-top:4px; font-size:14px; font-weight:600; }
.cust .note{ margin-top:4px; font-size:12px; color:var(--muted2); }

/* 02 / 03 Partners - present but visually quieter than customers */
.partner-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 280px));
  gap:16px; justify-content:center; }
.partner .logo-tile{ height:96px; }
.partner .nm{ margin-top:10px; font-size:13.5px; font-weight:600; text-align:center; }
.tech-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.tech{ border:1px solid rgba(18,38,63,.12); background:rgba(18,38,63,0.022);
  border-radius:var(--radius); padding:18px; }
.tech .logo-tile{ height:84px; margin-bottom:14px; }
.tech h3{ margin:0 0 6px; font-size:15px; }
.tech p{ margin:0; color:var(--muted); font-size:13px; line-height:1.6; }

/* 04 Marketplace callout */
.market{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  border:1px solid rgba(91,157,255,.35); border-radius:24px; padding:22px 24px;
  background:
    radial-gradient(700px 300px at 12% 0%, rgba(0,120,212,.28), transparent 62%),
    rgba(18,38,63,0.025);
}
.market .mk-logo{ width:56px; height:56px; background:#fff; border-radius:14px;
  display:flex; align-items:center; justify-content:center; padding:11px; flex:0 0 auto; overflow:hidden; }
.market .mk-logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.market h3{ margin:0 0 5px; font-size:18px; letter-spacing:-.2px; }
.market p{ margin:0; color:var(--muted); font-size:13.5px; line-height:1.55; }
@media (max-width:900px){
  .cust-grid{ grid-template-columns:repeat(2,1fr); }
  .tech-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .cust-grid, .partner-grid{ grid-template-columns:1fr 1fr; }
  .market{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Hero background video ---------- */
.hero-video{ position:relative; overflow:hidden; }
.hero-video > video, .hero-video > .hv-poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; border:0;
}
.hero-video:after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,21,32,.93) 0%, rgba(6,21,32,.72) 48%, rgba(6,21,32,.34) 100%),
    linear-gradient(180deg, rgba(6,21,32,.42), rgba(9,31,52,.88));
}
.hero-video > .wrap{ position:relative; z-index:2; }
/* No video for people who ask for less motion - the poster still shows. */
@media (prefers-reduced-motion: reduce){ .hero-video > video{ display:none; } }

/* ---------- Long-form legal / policy pages ---------- */
.policy{ max-width:820px; }
.policy h1{ font-size: clamp(28px,3.2vw,40px); }
.policy h2{
  font-size:17px; margin:34px 0 10px; letter-spacing:-.2px;
  padding-top:18px; border-top:1px solid rgba(18,38,63,0.055);
}
.policy h2:first-of-type{ border-top:none; padding-top:0; }
.policy p, .policy li{ color:var(--muted); font-size:14.5px; line-height:1.75; }
.policy ul{ margin:10px 0 0; padding-left:20px; }
.policy li{ margin:6px 0; }
.policy a{ color:var(--accent2); text-decoration:underline; text-decoration-color:rgba(83,157,244,.45); }
.policy a:hover{ color:var(--text); }
.policy strong{ color:var(--text); }
.policy address{ font-style:normal; color:var(--muted); font-size:14.5px; line-height:1.75; }
.policy .box{ margin-top:18px; }

/* inherited containers from the previous Privacy markup carry their own
   padding/width - neutralise them so .policy controls the measure */
.policy section, .policy > div{ padding:0; margin:0; max-width:none; }
.policy .box{ padding:20px; margin:18px 0 0; }
.policy > p:first-of-type{ margin-top:0; }

/* ---------- Hero animation (canvas grid + typewriter) ---------- */
.hero-fx{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}
/* A hidden copy of the longest phrase holds the line open, and the live text
   sits on top of it - so the headline never changes height and the paragraph
   below it stays put while typing. */
.tw-wrap{ position:relative; display:inline-block; white-space:nowrap; }
.tw-ghost{ visibility:hidden; }
.tw-live{ position:absolute; left:0; top:0; white-space:nowrap; }
.tw-cursor{
  display:inline-block; width:3px; height:.92em; margin-left:6px;
  background:var(--accent); vertical-align:-.08em;
  animation: twBlink 1s steps(1) infinite;
}
@keyframes twBlink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
@media (prefers-reduced-motion: reduce){
  .tw-cursor{ display:none; }
  .hero-fx{ display:none; }
}


/* hero sits on the same white ground as the rest of the page */
.hero-light{ position:relative; overflow:hidden; }
.hero-light > .wrap{ position:relative; z-index:2; }
.dot-row{ display:flex; gap:7px; margin-bottom:18px; }
.dot-row i{ width:7px; height:7px; border-radius:999px; background:var(--accent2); display:block; opacity:.85; }
.dot-row i:nth-child(2){opacity:.7} .dot-row i:nth-child(3){opacity:.58}
.dot-row i:nth-child(4){opacity:.46} .dot-row i:nth-child(5){opacity:.34}
.dot-row i:nth-child(6){opacity:.22}
.header-solid{ background:rgba(255,255,255,.88) !important; }
.logo-tile{ background:#FFFFFF; border-color:rgba(18,38,63,.10); }
.tw-cursor{ background:var(--accent); }

/* ---------- Light-theme corrections ---------- */
/* the logo sat in a dark "glow pill" built for the dark theme - on white the
   deck simply places the mark on the page, so drop the container entirely */
.logoWrap{
  background:none !important; border:none !important; box-shadow:none !important;
  padding:0 !important; height:auto !important;
}
.logoWrap:after{ display:none !important; }
.logoImg{ height:26px; animation:none; filter:none; }

/* icons were radial glows; on white they need to read as solid marks */
.icon{
  background:linear-gradient(135deg, rgba(184,76,52,.14), rgba(83,157,244,.16));
  border:1px solid rgba(18,38,63,.12);
}
.num{
  background:linear-gradient(135deg, rgba(184,76,52,.12), rgba(83,157,244,.14));
  border:1px solid rgba(18,38,63,.14);
  color:var(--text);
}
.check{ border-color:rgba(18,38,63,.16); background:rgba(83,157,244,.16); color:#2E7DD1; }

/* cards: solid white with a real border beats translucency on a light ground */
.card, .box, .kpi, .panel, .tech, .pill-card, .cap, .related a, .menu-panel{
  background:#FFFFFF;
  border-color:rgba(18,38,63,.12);
}
.card{ box-shadow:0 6px 20px rgba(18,38,63,.06); }
.card:hover{ background:#FFFFFF; border-color:rgba(18,38,63,.22); box-shadow:0 12px 30px rgba(18,38,63,.10); }
.box, .kpi{ box-shadow:0 8px 26px rgba(18,38,63,.07); }
.menu-panel{ box-shadow:0 18px 44px rgba(18,38,63,.14); }
.menu-panel a:hover{ background:rgba(18,38,63,.05); }
nav a:hover, .menu > button:hover{ background:rgba(18,38,63,.05); }

header{ border-bottom:1px solid rgba(18,38,63,.10); }
footer{ border-top:1px solid rgba(18,38,63,.10); }
.list li{ border-top-color:rgba(18,38,63,.12); }
.impact{ color:var(--text); }
.hero-fx{ display:none; }

/* ============================================================
   Contrast + colour system pass
   Palette verified against WCAG AA on white:
     ink #0F1B2D 17.3:1 · body #3B4B60 8.9:1 · label #56677D 5.8:1
     link #1A6BC4 5.3:1 · rust #B0442B 5.7:1 (and white-on-rust 5.7:1)
   The previous --muted2 (3.61:1) and light blue (2.80:1) both failed.
   ============================================================ */
:root{
  --text:#0F1B2D;
  --muted:#3B4B60;
  --muted2:#56677D;
  --accent:#B0442B;          /* logo rust, darkened just enough to pass AA */
  --accent2:#1A6BC4;         /* readable blue for labels and links */
  --line:rgba(15,27,45,.14);
  --surface:#FFFFFF;
  --surface-alt:#F4F7FA;     /* console-style panel tint */
}
body, .lead, .card p, .section-head p, .list li, .policy p, .policy li,
.tech p, .cta p, .kpi p, .related .s{ color:var(--muted); }
.eyebrow, .badge, .chip, .crumb, .counter-label, .pill,
.cust .yr, .partner .nm, .form-status, .foot{ color:var(--muted2); }
.eyebrow{ color:var(--accent2); font-weight:700; }
.card .tagline{ color:var(--accent2); }
.chip{ color:var(--muted); }
.chip b, .mini b{ color:var(--text); }

/* text boxes read as defined panels, not tinted washes */
.card, .box, .kpi, .tech, .pill-card, .cap, .related a, .panel{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(15,27,45,.05), 0 8px 24px rgba(15,27,45,.05);
}
.card:hover, .related a:hover{
  border-color:rgba(15,27,45,.28);
  box-shadow:0 2px 4px rgba(15,27,45,.06), 0 14px 32px rgba(15,27,45,.10);
}
.cap, .panel{ background:var(--surface-alt); box-shadow:none; }
.impact{
  background:var(--surface-alt);
  border-left:3px solid var(--accent);
  border-image:none;
  color:var(--text);
  border-radius:0 10px 10px 0;
}
.impact .k{ color:var(--muted2); }

/* actions: rust is the single "do this" colour, console-style */
.btn{ background:var(--surface); border:1px solid rgba(15,27,45,.22); color:var(--text); box-shadow:none; }
.btn:hover{ background:var(--surface-alt); border-color:rgba(15,27,45,.34); transform:none; }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover{ background:#9C3B24; border-color:#9C3B24; }
a.plain, .policy a{ color:var(--accent2); }
.check{ background:rgba(26,107,196,.12); border-color:rgba(26,107,196,.30); color:#12508F; }
.icon{ background:linear-gradient(135deg, rgba(176,68,43,.16), rgba(26,107,196,.16)); border:1px solid var(--line); }
.num{ background:var(--surface-alt); border:1px solid var(--line); color:var(--text); }
.dot-row i{ background:var(--accent2); }
.counter{ background:linear-gradient(135deg,#0F1B2D,#B0442B); -webkit-background-clip:text; background-clip:text; color:transparent; }
header{ background:rgba(255,255,255,.92) !important; border-bottom:1px solid var(--line); }
nav a, .menu > button{ color:var(--muted); }
nav a:hover, .menu > button:hover{ color:var(--text); background:var(--surface-alt); }
.list li{ border-top-color:var(--line); }

/* logo: show it whole, never cropped or squeezed */
.brand{ overflow:visible; }
.logoWrap{ overflow:visible !important; display:inline-flex !important; align-items:center; }
.logoImg{
  height:30px !important; width:auto !important; max-width:none !important;
  max-height:none !important; object-fit:contain; flex:0 0 auto;
}
footer .logoImg{ height:26px !important; }

/* ---------- Animated waves ---------- */
.waves{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.waves span{
  position:absolute; left:0; top:0; width:200%; height:100%;
  background:url("../images/wave-anim.svg") repeat-x left center;
  background-size:1200px auto;
  will-change:transform;
}
.waves span:nth-child(1){ opacity:.55; animation:waveDrift 48s linear infinite; }
.waves span:nth-child(2){ opacity:.32; transform:scaleY(-1); animation:waveDrift 78s linear infinite reverse; }
@keyframes waveDrift{ from{ transform:translateX(0) } to{ transform:translateX(-1200px) } }
.waves span:nth-child(2){ animation-name:waveDriftFlip; }
@keyframes waveDriftFlip{ from{ transform:scaleY(-1) translateX(0) } to{ transform:scaleY(-1) translateX(-1200px) } }
@media (prefers-reduced-motion: reduce){ .waves span{ animation:none !important; } }
main, footer{ position:relative; z-index:1; }
/* header must out-rank page content or the hero's wrap paints over the
   open dropdown (this is what made sub-items unclickable) */
header{ position:sticky; z-index:60; }
.menu-panel{ z-index:70; }

/* social icons */
.social-row{ display:flex; gap:10px; align-items:center; }
.social-row a{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.social-row a:hover{ border-color:var(--accent); background:var(--surface-alt); color:var(--accent); }
.social-row svg{ width:17px; height:17px; fill:currentColor; display:block; }

/* ============================================================
   Body copy was #3B4B60 - 8.89:1, so contrast was never the issue.
   The problem is hue: a desaturated blue-gray reads as "gray" on
   bright white however high the ratio. Shift body copy to near-black
   (console style) and demote the old body colour to secondary.
   ============================================================ */
:root{
  --muted:#1C2836;     /* body copy - near black, 13.9:1 */
  --muted2:#3B4B60;    /* secondary labels - 8.9:1 */
  --muted3:#55637A;    /* rare tertiary - 6.0:1 */
}
body{ color:var(--text); }
p, li, .lead, .card p, .section-head p, .list li, .policy p, .policy li,
.tech p, .cta p, .kpi p, .related .s, .desc, .description{
  color:var(--muted);
}
/* Lato at small sizes looks thin on white - a touch more size and
   line-height does as much for legibility as colour does. */
.lead{ font-size:16.5px; line-height:1.68; }
.card p, .section-head p, .tech p, .related .s{ font-size:14px; line-height:1.65; }
.list li{ font-size:14px; line-height:1.6; }
.policy p, .policy li{ font-size:15px; line-height:1.75; }

/* keep hierarchy: labels and chrome stay a step lighter than body */
.eyebrow{ color:var(--accent2); }
.crumb, .counter-label, .foot, .form-status, .impact .k, .badge{ color:var(--muted2); }
.chip{ color:var(--muted); }
.chip b{ color:var(--text); }
nav a, .menu > button, .menu-panel a{ color:var(--muted2); }
nav a:hover, .menu > button:hover, .menu-panel a:hover{ color:var(--text); }

/* ============================================================
   Dropdown fix.
   The panel sat 6px below the button, so the cursor crossed a dead
   gap on its way down and :hover dropped - the menu closed before you
   could click anything. An invisible bridge spans that gap, and it is
   a child of .menu so hovering it keeps the menu open.
   ============================================================ */
.menu-panel::before{
  content:""; position:absolute; left:0; right:0; top:-18px; height:18px;
}
/* keep it open while the pointer is anywhere over button or panel */
.menu:hover .menu-panel,
.menu:focus-within .menu-panel,
.menu.open .menu-panel{
  opacity:1; visibility:visible; transform:none;
}
.menu.open > button{ background:var(--surface-alt); color:var(--text); }
/* generous hit area so items are easy to land on */
.menu-panel a{ padding:10px 12px; }

/* ============================================================
   Mobile fixes
   1. #mobilePanel kept a near-black background from the dark theme while
      its links moved to near-black text - invisible on invisible.
   2. logo + CTA + burger overflowed 390px viewports by ~14px.
   ============================================================ */
#mobilePanel{
  background:#FFFFFF !important;
  border-top:1px solid var(--line) !important;
  box-shadow:0 18px 40px rgba(15,27,45,.12);
}
#mobilePanel .grp{ border-top:1px dashed var(--line); }
#mobilePanel .grp h4{ color:var(--muted2); }
#mobilePanel .grp a{ color:var(--muted); padding:11px 0; }
#mobilePanel .grp a:active,
#mobilePanel .grp a:hover{ color:var(--accent); }

@media (max-width:640px){
  /* trim the header so logo, CTA and burger all fit */
  .nav{ height:62px; gap:10px; }
  .logoImg{ height:22px !important; }
  .header-solid .btn.primary,
  header .btn.primary{ padding:8px 11px; font-size:12px; border-radius:10px; }
  .burger{ padding:8px 11px; font-size:12px; }

  /* comfortable reading measure on a phone */
  .wrap{ padding:0 18px; }
  h1{ font-size:clamp(26px,7.6vw,34px); line-height:1.12; }
  .lead{ font-size:15.5px; line-height:1.65; }
  .section-head h2{ font-size:clamp(20px,5.6vw,26px); }
  section{ padding:40px 0; }

  /* the typewriter's nowrap sizer must not force the page wide */
  .tw-wrap{ white-space:normal; max-width:100%; }
  .tw-live{ white-space:normal; width:100%; }

  .chips{ gap:7px; }
  .chip{ font-size:12px; padding:8px 11px; }
  .cta, .cta-final{ padding:20px 16px; border-radius:18px; }
  .cta-final h3{ font-size:clamp(20px,5.8vw,26px); }
  .impact{ padding:13px 14px; }
  .form .row{ grid-template-columns:1fr; }
  .social-row a{ width:38px; height:38px; }   /* comfortable tap target */
  .foot{ gap:18px; }
}
@media (max-width:400px){
  .logoImg{ height:20px !important; }
  header .btn.primary{ padding:7px 9px; font-size:11.5px; }
}

/* ============================================================
   Badge icons.
   .icon used to be an empty 28px gradient swatch - a coloured square
   with nothing in it. It is now a chip that holds a real glyph, drawn
   from the inline <symbol> sprite at the top of the page. Strokes use
   currentColor so the mark stays on-brand without per-icon fills.
   These rules come last on purpose: they must beat the three earlier
   .icon declarations.
   ============================================================ */
.icon{
  display:inline-grid; place-items:center;
  width:30px; height:30px; border-radius:9px; flex:0 0 auto;
  border:1px solid rgba(176,68,43,.20);
  background:linear-gradient(135deg, rgba(176,68,43,.10), rgba(26,107,196,.08));
  color:var(--accent);
}
.icon svg{
  width:16px; height:16px; display:block;
  fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
/* the sprite itself must never take up layout space */
svg.icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* label-less badges (the "One Platform" row) would otherwise leave the
   chip floating with 8px of dead gap beside it */
.badge:has(> .icon:only-child){ gap:0; }

@media (max-width:640px){
  .icon{ width:27px; height:27px; border-radius:8px; }
  .icon svg{ width:15px; height:15px; }
}

/* ============================================================
   Careers page.
   .field only ever styled input and textarea; the application form
   adds <select>, which would otherwise render as a raw OS control
   sitting next to two styled inputs.
   ============================================================ */
.field select{
  width:100%; font:inherit; font-size:14px; color:var(--text);
  background:rgba(18,38,63,0.028);
  border:1px solid rgba(18,38,63,0.077);
  border-radius:12px; padding:11px 13px; outline:none;
  appearance:none; -webkit-appearance:none;
  /* caret drawn inline so the control needs no image request */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%233B4B60' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:12px 8px;
  padding-right:36px;
  transition:border-color .18s ease, background-color .18s ease;
}
.field select:focus{
  border-color:rgba(184,76,52,.75); background-color:rgba(18,38,63,0.044);
  box-shadow:0 0 0 3px rgba(184,76,52,.16);
}
.field select:invalid{ color:var(--muted2); }
.field select option{ color:var(--text); background:#fff; }

/* the "how we hire" cards use .num inside .badge rather than an icon */
.badge .num{ width:30px; height:30px; border-radius:9px; font-size:12px; }

/* the careers form sits under a left-aligned section head, so it should not
   inherit the contact form's auto-centring */
#applyForm{ margin-left:0; }

/* placeholders were rgba(18,38,63,.10) - about 1.3:1 on the field fill, i.e.
   effectively invisible. This reads as a hint without reading as a value. */
.field input::placeholder,
.field textarea::placeholder{ color:#7A8798; opacity:1; }

/* ============================================================
   Cookie consent banner.
   Injected by new-assets/scripts/consent.js, which is also the only
   place Microsoft Clarity is loaded - analytics stays off until the
   visitor accepts. Sits above the sticky header (z-index 60) and the
   nav dropdown panels (70).
   ============================================================ */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:var(--surface, #fff);
  border-top:1px solid var(--line);
  box-shadow:0 -14px 40px rgba(15,27,45,.14);
  /* A keyframe animation rather than a class-toggled transition: the toggle
     depended on requestAnimationFrame firing, and when rAF is throttled (a
     background tab) the banner stayed parked below the viewport - invisible,
     and therefore never consented to. An animation always runs. */
  animation:cookie-in .28s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes cookie-in{
  from{ transform:translateY(102%); }
  to{ transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .cookie-banner{ animation:none; transform:none; }
}

.cookie-inner{
  max-width:1180px; margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.cookie-text{ flex:1 1 460px; min-width:0; }
.cookie-banner h2{
  margin:0 0 5px; font-size:15px; letter-spacing:-.2px; color:var(--text);
}
.cookie-banner p{
  margin:0; font-size:13px; line-height:1.6; color:var(--muted);
  max-width:78ch;
}
.cookie-banner a{ color:var(--accent2); text-decoration:underline; }

.cookie-actions{
  display:flex; gap:10px; flex:0 0 auto; flex-wrap:wrap;
}
.cookie-actions .btn{ white-space:nowrap; }

@media (max-width:640px){
  .cookie-inner{ padding:16px 18px; gap:14px; }
  .cookie-banner h2{ font-size:14.5px; }
  .cookie-banner p{ font-size:12.5px; }
  .cookie-actions{ width:100%; }
  /* full-width, equal-weight targets rather than a cramped row */
  .cookie-actions .btn{ flex:1 1 0; justify-content:center; text-align:center; }
}

/* "Enquiry about: <module>" line, shown when the demo form is reached from a
   module page via ?m=<slug> */
.demo-context-note{
  margin:18px auto 0; max-width:580px; text-align:left;
  font-size:13px; line-height:1.5; font-weight:600;
  color:var(--accent);
  background:rgba(176,68,43,.07);
  border:1px solid rgba(176,68,43,.22);
  border-radius:10px; padding:9px 13px;
}