/* Inter webfont (Rooban, Oct 2026): used across all new pages.
   Speed fix (Oct 2026): the Google Fonts @import used to sit here and blocked the first paint.
   Inter is now loaded from base_fmcg.twig without blocking. "Inter Fallback" is Arial sized to
   match Inter, so text does not jump when Inter arrives. */
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Helvetica');ascent-override:90.49%;descent-override:22.56%;line-gap-override:0%;size-adjust:107.06%}

*{margin:0;padding:0;box-sizing:border-box}
  body{font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif;background:#F5F6F8;color:#1a1a2e;line-height:1.6;font-size:18px}


  /* LOGO */

  /* NAV */
  .nav{background:#1a335f !important;padding:0 4rem !important;display:flex;align-items:center;justify-content:space-between;height:60px;position:sticky;top:0;z-index:100}
  .nav-logo{color:#fff;font-size:16px;font-weight:600;letter-spacing:0.01em}
  .nav-logo span{color:#00baf2}
  .nav-links{
    display:flex;
    gap:2rem;
    align-items:center;
  }
  .nav-links a{color:rgba(255,255,255,0.72);font-size:16px;text-decoration:none;transition:color 0.15s;text-align: center;width: auto;}
  .nav-links a:hover{color:#fff}
  .nav-cta{background:#00baf2;color:#fff !important;font-size:16px;padding:8px 18px;border-radius:6px;font-weight:500}
  .hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px}
  .hamburger span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;transition:0.2s}

  /* HERO */
  .hero{background:#1B3A6B;padding:5rem 4rem 4.5rem;position:relative;overflow:hidden}
  .hero::before{content:'';position:absolute;right:-80px;top:-80px;width:420px;height:420px;border-radius:50%;background:rgba(0,186,242,0.07);pointer-events:none}
  .hero::after{content:'';position:absolute;left:-40px;bottom:-100px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,0.03);pointer-events:none}
  .hero-eyebrow{font-size:11px;color:#00baf2;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:1.25rem;font-weight:600}
  .hero h1{font-size:40px;font-weight:600;color:#fff;line-height:1.2;max-width:620px;margin-bottom:1.5rem}
  .hero h1 em{color:#00baf2;font-style:normal}
  .hero-sub{font-size:18px;color:rgba(255,255,255,0.68);max-width:520px;line-height:1.75;margin-bottom:2.5rem}
  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
  .btn-primary{background:#00baf2;color:#fff;padding:12px 26px;border-radius:7px;font-size:16px;font-weight:500;text-decoration:none;display:inline-block;transition:background 0.15s}
  .btn-primary:hover{background:#0098cc}
  .btn-secondary{background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.25);padding:12px 26px;border-radius:7px;font-size:16px;text-decoration:none;display:inline-block;transition:background 0.15s}
  .btn-secondary:hover{background:rgba(255,255,255,0.17)}

  /* PROBLEM */
  .problem{padding:4rem;background:#fff}
  .section-eyebrow{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#888;margin-bottom:0.75rem;font-weight:600}
  .section-title{font-size:26px;font-weight:600;color:#1B3A6B;margin-bottom:0.75rem;line-height:1.25}
  .problem-lead{font-size:18px;color:#555;max-width:600px;line-height:1.75;margin-bottom:2.5rem}
  .problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .problem-card{border:1px solid #E8EAF0;border-radius:10px;padding:1.5rem;background:#F9FAFB}
  .problem-card-icon{width:40px;height:40px;border-radius:8px;background:#EBF4FD;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
  .problem-card-icon svg{width:20px;height:20px;stroke:#00baf2;fill:none;stroke-width:1.8}
  .problem-card h3{font-size:18px;font-weight:600;margin-bottom:0.5rem;color:#1B3A6B}
  .problem-card p{font-size:16px;color:#666;line-height:1.65}

  /* CRED BAR */
  .cred-bar{background:#1B3A6B;padding:4.5rem 4rem;display:grid;grid-template-columns:repeat(5,1fr);gap:2rem;align-items:start}
  .cred-item{text-align:left;padding:0}
  .cred-item::before{content:'';display:block;width:100%;height:1px;background:#fff;margin-bottom:1.5rem;opacity:0.3}
  .cred-num{font-size:72px;font-weight:300;color:#1B3A6B;display:block;margin-bottom:0.75rem;letter-spacing:-2px;line-height:1}
  .cred-label{font-size:16px;color:rgba(255,255,255,0.75);line-height:1.5;font-weight:400}
  .cred-bar-title{grid-column:1/-1;font-size:28px;font-weight:400;color:#fff;margin-bottom:1rem}
  .cred-quote{grid-column:1/-1;border-top:1px solid rgba(255,255,255,0.15);margin-top:1.5rem;padding-top:1.75rem}
  .cred-quote-mark{font-size:36px;color:#00baf2;line-height:0.6;margin-bottom:0.75rem;font-family:Georgia,serif;opacity:0.7;display:block}
  .cred-quote-text{font-size:16px;color:rgba(255,255,255,0.88);line-height:1.75;font-style:italic;margin-bottom:0.75rem;max-width:700px}
  .cred-quote-attr{font-size:16px;color:rgba(255,255,255,0.55)}
  .cred-quote-attr strong{color:#00baf2;font-weight:500}
  .quote-flag{background:rgba(255,243,205,0.15);color:#ffc107;font-size:11px;padding:2px 8px;border-radius:4px;font-weight:500}

  /* HOW WE HELP */
  .how{padding:4rem;background:#fff}
  .how-intro{font-size:18px;color:#555;max-width:600px;line-height:1.75;margin-bottom:2.5rem}
  .how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .how-card{border:1px solid #E8EAF0;border-radius:10px;padding:1.75rem;background:#fff;display:flex;flex-direction:column;transition:border-color 0.15s}
  .how-card:hover{border-color:#00baf2}
  .how-card.featured{border-color:#00baf2;background:#F0FAFF}
  .how-card-icon{width:44px;height:44px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}
  .how-card-icon svg{width:22px;height:22px;fill:none;stroke-width:1.7}
  .how-card h3{font-size:18px;font-weight:600;margin-bottom:0.6rem;color:#1B3A6B}
  .how-card p{font-size:16px;color:#666;line-height:1.65;flex:1;margin-bottom:1.25rem}
  .how-card-link{font-size:16px;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:5px}
  .how-card-link::after{content:'→';font-size:16px}

  /* QUESTIONS */
  .questions{padding:4rem;background:#F5F6F8}
  .q-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:2rem}
  .q-card{background:#fff;border:1px solid #E8EAF0;border-radius:10px;padding:1.5rem;display:flex;gap:14px}
  .q-icon{width:36px;height:36px;border-radius:8px;background:#E5F5EE;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
  .q-icon svg{width:18px;height:18px;stroke:#0F6E56;fill:none;stroke-width:1.8}
  .q-card h3{font-size:18px;font-weight:600;margin-bottom:5px;color:#1B3A6B}
  .q-card p{font-size:16px;color:#666;line-height:1.6}

  /* DECISIONS */
  .topics{padding:4rem;background:#fff}
  .decisions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:2rem}
  .decisions-row2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:20px}
  .decision-card{border:1px solid #E8EAF0;border-radius:10px;padding:1.5rem;background:#F9FAFB;transition:border-color 0.15s}
  .decision-card:hover{border-color:#00baf2}
  .decision-num{font-size:11px;font-weight:700;color:#00baf2;letter-spacing:0.1em;margin-bottom:0.75rem}
  .decision-card h3{font-size:18px;font-weight:600;margin-bottom:0.5rem;color:#1B3A6B}
  .decision-card p{font-size:16px;color:#666;line-height:1.65}

  /* BUILT ON */
  .built{padding:4rem;background:#F5F6F8}
  .built-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:2rem}
  .built-item{display:flex;gap:12px;padding:1.25rem;background:#fff;border:1px solid #E8EAF0;border-radius:9px}
  .built-item svg{width:20px;height:20px;stroke:#00baf2;fill:none;stroke-width:1.8;flex-shrink:0;margin-top:2px}
  .built-item p{font-size:16px;color:#555;line-height:1.6}
  /* PROOF */
  .proof{padding:4rem;background:#fff}
  .proof-intro{font-size:18px;color:#555;max-width:600px;line-height:1.75;margin-bottom:2rem}
  .trusted-by-label{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#888;margin-bottom:1.25rem;font-weight:600}
  .logos{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:2.5rem}

  .audience-card h3{font-size:18px;font-weight:600;color:#1B3A6B;margin-bottom:0.5rem}
  .audience-card p{font-size:16px;color:#666;line-height:1.6}

  /* INSIGHTS */
  .insights{padding:4rem;background:#F5F6F8}
  .insights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:2rem}
  .insight-card{background:#fff;border:1px solid #E8EAF0;border-radius:10px;overflow:hidden;transition:border-color 0.15s}
  .insight-card:hover{border-color:#00baf2}
  .insight-img{height:90px;display:flex;align-items:center;justify-content:center}
  .insight-img svg{width:36px;height:36px;stroke-width:1.4;fill:none}
  .insight-body{padding:1.25rem}
  .insight-tag{font-size:11px;color:#00baf2;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:5px}
  .insight-body h3{font-size:16px;font-weight:500;line-height:1.5;color:#1B3A6B}

  /* FOOTER CTA */
  .footer-cta{background:#1B3A6B;padding:4.5rem 4rem;text-align:center}
  .footer-cta h2{font-size:30px;font-weight:600;color:#fff;margin-bottom:0.85rem}
  .footer-cta p{font-size:16px;color:rgba(255,255,255,0.62);margin-bottom:2rem;line-height:1.7}


  .footer-brand-mark{display:inline-flex;align-items:center;gap:12px;text-decoration:none;}
  .fg-icon{border:2px solid rgba(255,255,255,0.25);border-radius:8px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .fg-f{font-size:20px;font-weight:700;color:#fff;font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif}
  .fg-g{font-size:20px;font-weight:700;color:#00baf2;font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif}
  .footer-wordmark{font-size:18px;font-weight:600;color:#fff}
  /* FOOTER */
  .footer{background:#1a335f !important;padding:3rem 4rem 2rem}
  .footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:1.5rem}
  .footer-logo{font-size:17px;font-weight:600;color:#fff;margin-bottom:0.85rem}
  .footer-logo span{color:#00baf2}
  .footer-brand a{color:#fff;text-decoration:none}
  .footer-wordmark{font-size:16px;font-weight:600;color:#fff;display:block;margin-bottom:0.75rem}
  .footer-wordmark span{color:#00baf2}
  .footer-brand p{font-size:16px;color:rgba(255,255,255,0.42);line-height:1.75}
  .footer-col h4{font-size:11px;font-weight:600;color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:1rem}
  .footer-col a{display:block;font-size:16px;color:rgba(255,255,255,0.58);text-decoration:none;margin-bottom:0.55rem;transition:color 0.15s}
  .footer-col a:hover{color:#fff}
  .footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:1.25rem;color:rgba(255,255,255,0.28);justify-content:space-between}
  .footer-sub-bottom{display:flex;justify-content: space-between;}

  /* MOBILE */
  @media(max-width:768px){
    .nav{padding:0 1.25rem}
    .nav-links{
        display:none !important;
    }

    .nav-links.open{
        display:flex !important;
        flex-direction:column;
        position:absolute;
        top:60px;
        left:0;
        right:0;
        background:#1B3A6B;
        padding:1rem 1.25rem;
        gap:2rem;
        z-index:99;
    }

    .hamburger{
        display:block;
    }   
    .hero{padding:3.5rem 1.5rem 3rem}
    .hero h1{font-size:28px}
    .hero-sub{font-size:16px}
    .problem,.how,.questions,.topics,.built,.proof,.insights,.footer-cta,.footer{padding:2.5rem 1.5rem}
    .problem-grid,.how-grid,.q-grid,.built-grid,.insights-grid,.footer-grid,.audience-grid,.decisions-grid,.decisions-row2{grid-template-columns:1fr}
    [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
    .challenge-logo-grid{grid-template-columns:1fr !important}
    .challenge-logo-grid .logo-col{display:flex;justify-content:center;padding-top:0 !important;margin-top:1rem}
    .topics-grid{grid-template-columns:repeat(2,1fr)}
    .cred-bar{grid-template-columns:repeat(2,1fr);padding:2rem 1.5rem}
    .footer-bottom{flex-direction:column;gap:0.75rem}
    .footer-sub-bottom{flex-direction:column;gap:0.75rem}
    .section-title{font-size:22px}
  }


  @media(max-width:768px){
    .home-grid{
      grid-template-columns:1fr!important;
    }
  }
  
.page-wrap{max-width:1100px;margin:0 auto;padding:4rem 2rem;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}

.left-col h1{font-size:36px;font-weight:600;color:#1B3A6B;line-height:1.2;margin-bottom:1rem}
.left-col .sub{font-size:16px;color:#555;line-height:1.75;margin-bottom:2.5rem;max-width:420px}

.what-youll-see{margin-bottom:2.5rem}
.what-youll-see h3{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:#888;margin-bottom:1rem}
.demo-point{display:flex;gap:12px;margin-bottom:1rem;align-items:flex-start}
.demo-point-num{width:24px;height:24px;border-radius:50%;background:#1B3A6B;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.demo-point p{font-size:16px;color:#444;line-height:1.55}

.divider{height:1px;background:#E8EAF0;margin:2rem 0}

.trusted-label{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:0.08em;font-weight:600;margin-bottom:1rem}
.logo-row{display:flex;flex-wrap:wrap;gap:8px}
.logo-chip{font-size:12px;font-weight:500;color:#555;background:#fff;border:1px solid #E8EAF0;border-radius:5px;padding:5px 12px}

.form-card{background:#fff;border:1px solid #E8EAF0;border-radius:12px;padding:2.5rem}
.form-card h2{font-size:22px;font-weight:600;color:#1B3A6B;margin-bottom:0.5rem}
.form-card .form-sub{font-size:16px;color:#666;margin-bottom:2rem;line-height:1.6}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-group{display:flex;flex-direction:column;margin-bottom:16px}
.form-group label{font-size:16px;font-weight:500;color:#333;margin-bottom:6px}
.form-group input,
.form-group select{padding:10px 14px;border:1px solid #D8DAE0;border-radius:7px;font-size:16px;color:#1a1a2e;background:#fff;outline:none;transition:border-color 0.15s;font-family:inherit}
.form-group input:focus,
.form-group select:focus{border-color:#00baf2;box-shadow:0 0 0 3px rgba(0,186,242,0.1)}
.form-group input::placeholder{color:#aaa}
.form-group select{color:#444;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}

.submit-btn{width:100%;background:#1B3A6B;color:#fff;border:none;padding:14px;border-radius:7px;font-size:16px;font-weight:600;cursor:pointer;transition:background 0.15s;margin-top:8px;font-family:inherit}
.submit-btn:hover{background:#00baf2}
.form-legal{font-size:14px;color:#999;margin-top:12px;line-height:1.6;text-align:center}
.form-legal a{color:#888;text-decoration:underline}

.success-msg{display:none;background:#E5F5EE;border:1px solid #0F6E56;border-radius:8px;padding:1.5rem;text-align:center;margin-top:1rem}
.success-msg h3{color:#0F6E56;font-size:16px;font-weight:600;margin-bottom:0.5rem}
.success-msg p{color:#0F6E56;font-size:16px}

.news-card{text-decoration:none;background:#fff;border:1px solid #E8EAF0;border-radius:10px;padding:1.5rem;display:flex;flex-direction:column;gap:0.75rem;transition:border-color 0.15s}
.news-card:hover{border-color:#00baf2}

.res-card{text-decoration:none;background:#fff;border:1px solid #E8EAF0;border-radius:10px;padding:1.5rem;display:flex;flex-direction:column;gap:0.75rem;transition:border-color 0.15s}
.res-card:hover{border-color:#00baf2}
.cat-card{text-decoration:none;background:#fff;border:1px solid #E8EAF0;border-radius:10px;padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;transition:all 0.15s}
.cat-card:hover{border-color:#00baf2;background:#F9FAFB}
.web-card{background:#fff;border:1px solid #E8EAF0;border-radius:10px;overflow:hidden;display:flex;flex-direction:column}

@media(max-width:768px){
  .page-wrap{grid-template-columns:1fr;gap:2.5rem;padding:2rem 1.25rem}
  .form-row{grid-template-columns:1fr}
  .nav{padding:0 1.25rem}  
  .left-col h1{font-size:26px}
}

.prepublish {
      background: #fff3cd; border: 2px solid #e8a000; border-radius: 10px;
      padding: 22px 26px; margin: 36px auto 0; max-width: 860px;
    }
    .prepublish h3 { font-size: 16px; font-weight: 600; color: #7a4f00; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
    .prepublish ol { padding-left: 18px; }
    .prepublish ol li { font-size: 16px; color: #5a3a00; margin-bottom: 7px; }
    .prepublish .note { font-size: 16px; color: #7a4f00; margin-top: 12px; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 10px; }

    .container { max-width: 860px; margin: 0 auto; padding: 48px 40px 80px; }

    .ph { display: inline-block; background: #fff3cd; border: 1.5px dashed #e8a000; border-radius: 4px; padding: 1px 8px; font-size: 16px; font-weight: 600; color: #7a4f00; font-family: monospace; }

    /* TOC */
    .toc { background: #e6e9ef; border-radius: 10px; padding: 22px 26px; margin-bottom: 40px; }
    .toc h3 { font-size: 12px; font-weight: 600; color: #1B3A6B; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 12px; }
    .toc-cols { columns: 2; column-gap: 24px; }
    @media(max-width:560px){ .toc-cols { columns: 1; } }
    .toc-cols a { display: block; font-size: 16px; color: #1B3A6B; text-decoration: none; padding: 3px 0; break-inside: avoid; }
    .toc-cols a:hover { color: #00baf2; }

    .section { margin-bottom: 40px; }
    .section h2 { font-size: 18px; font-weight: 600; color: #1B3A6B; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid #e4eaf5; }
    .section h3 { font-size: 16px; font-weight: 600; color: #1a1a2e; margin: 18px 0 8px; }
    .section p { margin-bottom: 12px; color: #333; font-size: 16px; }
    .section p:last-child { margin-bottom: 0; }
    .section ul { list-style: disc; padding-left: 20px; margin: 8px 0 12px; }
    .section ul li { font-size: 16px; color: #333; margin-bottom: 4px; }
    .section a { color: #1B3A6B; }

    .entity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 20px; }
    @media(max-width:560px){ .entity-grid { grid-template-columns: 1fr; } }
    .entity-card { border: 1px solid #dde4ef; border-radius: 8px; padding: 16px 18px; }
    .entity-card .flag { font-size: 18px; margin-bottom: 7px; }
    .entity-card .en { font-weight: 700; font-size: 16px; color: #1B3A6B; margin-bottom: 5px; }
    .entity-card .ed { font-size: 16px; color: #555; line-height: 1.6; }

    /* no-list */
    .no-list { list-style: none; padding: 0; margin: 10px 0 14px; }
    .no-list li { padding: 6px 0 6px 24px; font-size: 16px; color: #333; position: relative; border-bottom: 1px solid #f2f2f2; }
    .no-list li:last-child { border-bottom: none; }
    .no-list li::before { content: '✕'; position: absolute; left: 0; top: 6px; color: #c62828; font-size: 16px; font-weight: 700; }

    /* priority */
    .p-list { list-style: none; padding: 0; margin: 10px 0 14px; counter-reset: p; }
    .p-list li { padding: 7px 0 7px 34px; font-size: 16px; color: #333; position: relative; counter-increment: p; border-bottom: 1px solid #f2f2f2; }
    .p-list li:last-child { border-bottom: none; }
    .p-list li::before { content: counter(p); position: absolute; left: 0; top: 5px; width: 22px; height: 22px; background: #1B3A6B; color: #fff; border-radius: 50%; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 22px; }

    .note-box { background: #f0f6ff; border-left: 4px solid #1B3A6B; border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 14px 0; font-size: 16px; color: #1B3A6B; }
    .warn-box { background: #fff8f0; border-left: 4px solid #e07329; border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 14px 0; font-size: 16px; color: #555; }

    .contact-block { background: #1B3A6B; color: #fff; border-radius: 10px; padding: 26px 30px; margin-top: 44px; }
    .contact-block h2 { color: #fff; font-size: 18px; font-weight: 600; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid rgba(255,255,255,0.2); }
    .contact-block p { color: rgba(255,255,255,0.82); font-size: 16px; margin-bottom: 10px; }
    .contact-block a { color: #00baf2; text-decoration: none; }

    
    
    /* RETENTION TABLE */
    .ret-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 16px; }
    .ret-table th { background: #1B3A6B; color: #fff; padding: 9px 14px; text-align: left; font-weight: 600; }
    .ret-table td { padding: 9px 14px; border-bottom: 1px solid #e8edf5; vertical-align: top; color: #333; }
    .ret-table tr:last-child td { border-bottom: none; }
    .ret-table tr:nth-child(even) td { background: #f8fafd; }

    /* RIGHTS GRID */
    .rights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
    @media(max-width:560px){ .rights-grid { grid-template-columns: 1fr; } }
    .right-card { border: 1px solid #dde4ef; border-radius: 7px; padding: 12px 14px; }
    .right-card .rt { font-weight: 700; font-size: 16px; color: #1B3A6B; margin-bottom: 3px; }
    .right-card p { font-size: 16px; color: #555; margin: 0; }

    /* ICO BOX */
    .ico-box { background: #f4f7fb; border-radius: 8px; padding: 16px 20px; margin: 14px 0; font-size: 16px; color: #333; line-height: 1.7; }

    /* COOKIE TABLE */
    .cookie-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 16px; }
    .cookie-table th { background: #1B3A6B; color: #fff; padding: 9px 14px; text-align: left; font-weight: 600; }
    .cookie-table td { padding: 9px 14px; border-bottom: 1px solid #e8edf5; vertical-align: top; color: #333; }
    .cookie-table tr:last-child td { border-bottom: none; }
    .cookie-table tr:nth-child(even) td { background: #f8fafd; }
    .badge { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 12px; font-weight: 600; }
    .badge-ok { background: #e8f5e9; color: #2e7d32; }
    .badge-c { background: #fff3e0; color: #e65100; }
  
    
    /* DECISION ENGINE DEMO */
  .de-section{padding:68px 0;background:#1B3A6B}
  .de-container{width:min(1180px,calc(100% - 48px));margin:auto}
  .de-head{text-align:center;max-width:800px;margin:0 auto 44px}
  .de-kicker{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#00baf2;font-weight:700;margin-bottom:11px}
  .de-head h2{font-size:clamp(24px,3vw,33px);line-height:1.15;color:#fff;letter-spacing:-.5px;margin-bottom:12px;font-weight:600}
  .de-head p{font-size:16px;color:rgba(255,255,255,.65);line-height:1.75}
  .de-shell{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:stretch}
  .de-list{display:flex;flex-direction:column;gap:12px}
  .de-btn{width:100%;text-align:left;background:#fff;border:1.5px solid #dfe6f0;border-radius:12px;padding:18px;cursor:pointer;transition:.2s;font-family:inherit}
  .de-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(27,58,107,.09)}
  .de-btn.de-active{border-color:rgba(0,186,242,.65);box-shadow:0 0 0 3px rgba(0,186,242,.1)}
  .de-num{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#00baf2;font-weight:700;margin-bottom:7px}
  .de-title{font-size:16px;font-weight:700;color:#0d1b2e;line-height:1.35;margin-bottom:5px}
  .de-meta{font-size:13px;color:#667085}
  .de-note{margin-top:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:12px;padding:18px}
  .de-note strong{display:block;font-size:16px;margin-bottom:5px}
  .de-note p{font-size:16px;color:rgba(255,255,255,.55)}
  .de-engine{background:#fff;border:1px solid #dfe6f0;border-radius:14px;overflow:hidden;box-shadow:0 14px 50px rgba(27,58,107,.1);min-height:470px}
  .de-top{background:#1B3A6B;padding:13px 18px;color:#fff;display:flex;justify-content:space-between;align-items:center}
  .de-brand{font-size:16px;font-weight:700}.de-brand span{color:#00baf2}
  .de-status{font-size:11px;color:rgba(255,255,255,.55)}
  .de-tags{display:flex;gap:7px;flex-wrap:wrap;padding:11px 17px;background:#eff4fa;border-bottom:1px solid #d7e0ee}
  .de-tag{font-size:11px;font-weight:700;padding:5px 10px;border-radius:18px}
  .de-tag:nth-child(1){background:#e6f1fb;color:#0c447c}
  .de-tag:nth-child(2){background:#e1f5ee;color:#085041}
  .de-tag:nth-child(3){background:#faeeda;color:#633806}
  .de-building{display:none;padding:60px 30px;text-align:center}
  .de-building.de-show{display:block}
  .de-spinner{width:32px;height:32px;border:3px solid #dfe8f3;border-top-color:#00baf2;border-radius:50%;margin:0 auto 16px;animation:de-spin .9s linear infinite}
  @keyframes de-spin{to{transform:rotate(360deg)}}
  .de-building h3{font-size:17px;color:#1B3A6B;margin-bottom:5px;font-weight:600}
  .de-building p{font-size:16px;color:#667085}
  .de-card{opacity:1;transition:opacity .2s}
  .de-card.de-hide{display:none}
  .de-verdict{background:linear-gradient(150deg,#1B3A6B,#102b57);padding:20px 22px;color:#fff}
  .de-vlabel{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#00baf2;font-weight:700;margin-bottom:6px}
  .de-verdict h3{font-size:18px;line-height:1.4;font-weight:600}
  .de-metrics{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #dfe6f0}
  .de-metric{padding:16px 10px;text-align:center;border-right:1px solid #edf1f6}.de-metric:last-child{border-right:0}
  .de-metric-name{font-size:10px;color:#8a94a6;line-height:1.3;margin-bottom:3px}
  .de-metric-val{font-size:24px;font-weight:700;color:#1B3A6B}
  .de-insights{display:grid;grid-template-columns:1fr 1fr}
  .de-insight{padding:17px 20px}.de-insight:first-child{background:#eaf6f0;border-right:1px solid #cce7db}.de-insight:last-child{background:#fef1f1}
  .de-insight h4{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;margin-bottom:5px}
  .de-insight:first-child h4,.de-insight:first-child p{color:#0f6e56}
  .de-insight:last-child h4,.de-insight:last-child p{color:#8f2d2d}
  .de-insight p{font-size:16px;line-height:1.55}
  .de-actions{padding:18px 20px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .de-action{border:1px solid #dfe6f0;border-radius:8px;padding:13px}
  .de-action span{display:block;font-size:10px;color:#00baf2;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
  .de-action p{font-size:16px;color:#4e596c}
  .de-footer{border-top:1px solid #dfe6f0;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#8b95a6}
  .de-cta{margin-top:26px;text-align:center}
  .de-cta p{font-size:16px;color:rgba(255,255,255,.6);margin-bottom:12px}
  .de-cta-btn{display:inline-flex;align-items:center;padding:12px 24px;border-radius:8px;font-size:16px;font-weight:600;background:#00baf2;color:#fff;text-decoration:none;border:none;cursor:pointer;font-family:inherit;transition:background .15s}
  .de-cta-btn:hover{background:#0098cc}
  @media(max-width:900px){
    .de-shell{grid-template-columns:1fr}
    .de-list{display:grid;grid-template-columns:repeat(3,1fr)}
    .de-note{display:none}
  }
  @media(max-width:600px){
    .de-section{padding:44px 0;background:#1B3A6B}
    section[style*="background:#F5F6F8;border-top"] > div{padding:2rem 1.5rem !important;flex-direction:column;align-items:flex-start !important}
    .de-list{grid-template-columns:1fr}
    .de-metrics{grid-template-columns:1fr 1fr}
    .de-metric:nth-child(2){border-right:0}
    .de-insights,.de-actions{grid-template-columns:1fr}
  }
  
  
  
  /* ============================
       HERO
       ============================ */
    .hero {
      background: linear-gradient(160deg, #1B3A6B 0%, #0d2550 100%);
      padding: 80px 48px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute;
      top: -80px; right: -80px;
      width: 320px; height: 320px;
      border-radius: 50%;
      background: rgba(0,186,242,0.08);
    }
    .hero::after {
      content: '';
      position: absolute;
      bottom: -60px; left: -60px;
      width: 220px; height: 220px;
      border-radius: 50%;
      background: rgba(0,186,242,0.05);
    }
    .hero-inner {
      position: relative; z-index: 1;
      max-width: 780px; margin: 0 auto;
    }
    .hero-eyebrow {
      display: inline-block;
      font-size: 12px; font-weight: 700; letter-spacing: 1.8px;
      text-transform: uppercase; color: #00baf2;
      margin-bottom: 22px;
    }
    .hero h1 {
      font-size: 44px; font-weight: 700; line-height: 1.15;
      color: #fff; margin-bottom: 22px;
      letter-spacing: -0.5px;
    }
    .hero p {
      font-size: 18px; line-height: 1.72;
      color: rgba(255,255,255,0.68);
      max-width: 640px; margin: 0 auto;
    }
    .hero-trust {
      font-size: 16px; line-height: 1.6;
      color: rgba(255,255,255,0.65);
      margin-top: 28px;
      letter-spacing: 0.1px;
    }

    /* ============================
       PROOF STRIP
       ============================ */
    .proof-strip {
      background: #1B3A6B;
      padding: 56px 48px;
    }
    .proof-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
      max-width: 1080px;
      margin: 0 auto;
    }
    .proof-item {
      text-align: center;
    }
    .proof-icon {
      width: 44px; height: 44px;
      background: rgba(0,186,242,0.16);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px;
    }
    .proof-icon svg {
      width: 20px; height: 20px;
      stroke: #00baf2; fill: none;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }
    .proof-item strong {
      display: block;
      font-size: 16px; font-weight: 700; color: #fff;
      margin-bottom: 6px;
    }
    .proof-item span {
      font-size: 16px; color: rgba(255,255,255,0.48); line-height: 1.6;
    }

    /* ============================
       TESTIMONIALS
       ============================ */
    .testimonials {
      background: #fff;
      padding: 100px 48px;
    }
    .section-label {
      text-align: center;
      font-size: 12px; font-weight: 700; letter-spacing: 1.8px;
      text-transform: uppercase; color: #00baf2;
      margin-bottom: 14px;
    }
    .section-heading {
      text-align: center;
      font-size: 34px; font-weight: 700; color: #1B3A6B;
      margin-bottom: 12px; letter-spacing: -0.4px;
    }
    .section-sub {
      text-align: center;
      font-size: 16px; color: #778;
      max-width: 540px; margin: 0 auto 60px;
      line-height: 1.72;
    }
    .testimonial-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 1080px;
      margin: 0 auto;
    }
    .t-card {
      background: #f8fafd;
      border: 1px solid #dde4ef;
      border-radius: 12px;
      padding: 36px 28px 28px;
      display: flex;
      flex-direction: column;
      position: relative;
      transition: box-shadow 0.2s, border-color 0.2s;
    }
    .t-card:hover {
      box-shadow: 0 6px 28px rgba(27,58,107,0.1);
      border-color: #c6d4e8;
    }
    .t-quote-mark {
      font-size: 60px; line-height: 1;
      color: #00baf2; opacity: 0.3;
      font-family: Georgia, 'Times New Roman', serif;
      position: absolute; top: 16px; left: 22px;
      user-select: none;
    }
    .t-quote {
      font-size: 16px; line-height: 1.75;
      color: #334; padding-top: 26px;
      flex: 1;
      font-style: italic;
    }
    .t-attr {
      margin-top: 24px;
      padding-top: 18px;
      border-top: 1px solid #dde4ef;
    }
    .t-company {
      font-size: 16px; font-weight: 700; color: #1B3A6B;
      letter-spacing: 0.1px;
    }
    .t-role {
      font-size: 16px; color: #99a; margin-top: 3px;
    }
    /* NOTE: Add name and job title below .t-company once attribution is confirmed.
       Example:
       <div class="t-role">Director of Marketing, FrieslandCampina</div> */

    /* ============================
       CTA
       ============================ */
    .cta-section {
      background: linear-gradient(160deg, #1B3A6B 0%, #0d2550 100%);
      padding: 100px 48px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta-section::before {
      content: '';
      position: absolute;
      top: -80px; right: -80px;
      width: 280px; height: 280px;
      border-radius: 50%;
      background: rgba(0,186,242,0.09);
    }
    .cta-section::after {
      content: '';
      position: absolute;
      bottom: -60px; left: -60px;
      width: 200px; height: 200px;
      border-radius: 50%;
      background: rgba(0,186,242,0.06);
    }
    .cta-inner { position: relative; z-index: 1; }
    .cta-eyebrow {
      display: inline-block;
      font-size: 12px; font-weight: 700; letter-spacing: 1.8px;
      text-transform: uppercase; color: #00baf2;
      margin-bottom: 20px;
    }
    .cta-section h2 {
      font-size: 36px; font-weight: 600; color: #fff;
      margin-bottom: 16px; letter-spacing: -0.4px;
      max-width: 540px; margin-left: auto; margin-right: auto; line-height: 1.22;
    }
    .cta-section p {
      font-size: 16px; color: rgba(255,255,255,0.55);
      margin-bottom: 38px; max-width: 440px;
      margin-left: auto; margin-right: auto; line-height: 1.7;
    }
    .btn-cta {
      display: inline-block;
      background: #00baf2; color: #fff;
      text-decoration: none;
      padding: 15px 38px;
      border-radius: 8px;
      font-size: 16px; font-weight: 700;
      letter-spacing: 0.2px;
      transition: background 0.15s, transform 0.1s;
    }
    .btn-cta:hover { background: #0098cc; transform: translateY(-1px); }
    .btn-cta:active { transform: scale(0.99); }

/* ============================================================
   HOMEPAGE — INLINE STYLES MOVED TO CSS   (prefix: fh- = fmcg home)
   Paste this block at the END of fmcggurus.new.css.
   Nothing above it is changed or removed. Every rule below
   reproduces a former inline style 1:1, so the page renders
   identically on desktop, tablet and mobile.
   ============================================================ */

/* --- Base / semantic --- */
main{display:block}
.nav-logo{text-decoration:none}

/* --- Skip link (keyboard accessibility) --- */
.fh-skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:#1B3A6B;color:#fff;padding:10px 16px;border-radius:0 0 6px 0;font-size:16px;text-decoration:none}
.fh-skip-link:focus{left:0}

/* --- Nav --- */
.fh-nav-login{color:rgba(255,255,255,0.5);font-size:16px}

/* --- Hero --- */
.fh-hero{background:#000;position:relative;overflow:hidden;min-height:580px;display:flex;align-items:center}
.fh-hero-media{position:absolute;right:0;top:0;bottom:0;width:65%;z-index:0}
/* source banner is panoramic (3780x1417) — make it cover the panel and
   bleed to the right edge instead of sitting small at 960px. Adjust
   object-position (e.g. center / 75% center) if you want the model framed
   differently. */
.fh-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.fh-hero-media-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,0.65) 35%,rgba(0,0,0,0.1) 70%,rgba(0,0,0,0) 100%)}
.fh-hero-content{position:relative;z-index:1;padding:5rem 4rem;width:100%}
.fh-hero-copy{text-align:left}
.fh-hero-eyebrow{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.18em;margin-bottom:2.5rem;text-align:left}
.fh-hero-title{font-size:44px;font-weight:700;color:#fff;line-height:1.12;margin-bottom:1.75rem;letter-spacing:-0.5px;text-align:left}
.fh-hero-title-accent{color:#00baf2}
.fh-hero-sub{font-size:18px;color:rgba(255,255,255,0.55);line-height:1.75;margin-bottom:3.5rem;max-width:380px;text-align:left}
.fh-hero-steps{margin-bottom:3rem;display:flex;flex-direction:column;gap:1rem}
.fh-hero-step{display:flex;align-items:baseline;gap:1rem}
.fh-hero-step-num{font-size:10px;font-weight:700;color:#00baf2;letter-spacing:0.1em;flex-shrink:0;min-width:20px}
.fh-hero-step-label{font-size:16px;color:rgba(255,255,255,0.8);font-weight:500}
.fh-hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
/* NOTE: the two hero buttons kept their .btn-primary / .btn-secondary
   classes — their old inline styles were identical to those existing
   rules, so removing the inline changes nothing. */

/* --- How it works bar --- */
.fh-flow{background:#F5F6F8;padding:1.75rem 1rem;/*border-bottom:1px solid #E8EAF0*/}
.fh-flow-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:0;flex-wrap:wrap}
.fh-flow-step{display:flex;align-items:center;gap:12px;padding-right:2rem}
.fh-flow-step-mid{margin:5px 0}
.fh-flow-step-end{padding-right:0}
.fh-flow-num{width:32px;height:32px;border-radius:50%;/*background:#1B3A6B;*/background: #00baf2;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fh-flow-num-active{background:#00baf2}
.fh-flow-label{font-size:16px;font-weight:500;color:#1B3A6B}
.fh-flow-arrow{color:#00baf2;font-size:20px;padding-right:2rem;opacity:0.5}

.fh-cred-quote-wrap-iff {
  display: flex;
  justify-content: center;
  padding: 1.5rem;
  border: 1px solid #E8EAF0;
  background: white;
}

.fh-cred-quote-iff {
  max-width: 500px;
}

.fh-cred-quote-text-iff {
  font-size: 16px;
  color: #444;
  line-height: 1.65;
  font-style: italic;
  margin-bottom: 0.5rem;
}

.fh-cred-quote-attr-iff {
  font-size: 15px;
  color: #999;
}

.fh-cred-quote-name-iff {
  color: #00baf2;
  font-weight: 500;
}

/* --- Credibility bar --- */
.fh-cred{background:#fff;padding:3.5rem 4rem}
.fh-cred-label{font-size:10px;font-weight:700;color:#1B3A6B;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:2rem}
.fh-cred-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2rem;align-items:start}
.fh-cred-divider{height:1px;background:#E8EAF0;margin-bottom:1.25rem}
.fh-cred-num{font-size:65px;font-weight:300;color:#1B3A6B;margin-bottom:0.6rem;letter-spacing:-2px;line-height:1;min-height:80px;display:flex;align-items:flex-end}
.fh-cred-stat-label{font-size:16px;font-weight:600;color:#444;line-height:1.4;display:block}
.fh-cred-quote-wrap{display:flex;justify-content:flex-end;margin-top:2rem;padding-top:1.5rem;border-top:1px solid #E8EAF0}
.fh-cred-quote{max-width:460px}
.fh-cred-quote-text{font-size:16px;color:#444;line-height:1.65;font-style:italic;margin-bottom:0.5rem}
.fh-cred-quote-attr{font-size:11px;color:#999}
.fh-cred-quote-name{color:#00baf2;font-weight:500}

/* --- Trusted by --- */
.fh-container{max-width:1100px;margin:0 auto}
.fh-trusted{background:#1B3A6B;padding:5rem 4rem}
.fh-trusted-label{font-size:11px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:1rem}
.fh-trusted-title{font-size:32px;font-weight:600;color:#fff;line-height:1.2;margin-bottom:1rem}
.fh-trusted-sub{font-size:16px;color:rgba(255,255,255,0.65);max-width:560px;line-height:1.75;margin-bottom:1.75rem}

/* moved out of the inline <style> block that was in the HTML */
.logo-grid{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:38px 56px;align-items:center;margin-top:2rem}
.client-logo{width:100%;max-width:210px;height:50px;object-fit:contain;filter:brightness(0) invert(1)}
@media(max-width:768px){
  .logo-grid{grid-template-columns:repeat(2,1fr);gap:28px 34px}
  .client-logo{height:42px;max-width:160px;margin:0 auto}
}



.fgtb-section{ background: linear-gradient(105deg, rgba(12, 26, 54, 0.96) 0%, rgba(12, 26, 54, 0.85) 55%, rgba(12, 26, 54, 0.55) 100%);/*background:#1B3A6B;*/ padding:40px 0; }
.fgtb-container{ width:100%; max-width:1200px; margin:0 auto; padding:0 32px; }
.fgtb-label{
    margin:0 0 60px; text-align:center; color:rgba(255,255,255,.60);
    font-size:13px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
}
.fgtb-grid{ display:grid; grid-template-columns:repeat(5,1fr); align-items:center; }
.fgtb-logo{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap: 12px; min-height:112px;
}
/* bigger, uniform box — wide logos fill width, compact ones fill height */
.fgtb-logo img{
    display:block; width:100%; max-width:210px; height: 70px; object-fit:contain;
    opacity:.92; transition:opacity .2s ease, transform .2s ease;
}
.fgtb-logo:hover img{ opacity:1; transform:translateY(-2px); }
.fgtb-name{
    color:rgba(255,255,255,.34); font-size:11px; letter-spacing:1px; text-transform:uppercase;
}
@media (max-width:1100px){ .fgtb-grid{ grid-template-columns:repeat(3,1fr); /*gap:48px 32px;*/ } }
@media (max-width:768px){ .fgtb-section{ padding:64px 0; } .fgtb-container{ padding:0 24px; }
    .fgtb-logo img{ height:70px; } }
@media (max-width:576px){
    .fgtb-grid{ grid-template-columns:repeat(2,1fr); /*gap:38px 24px;*/ }
    .fgtb-logo img{ height:54px; max-width:150px; }
}

/* per-logo height overrides (were inline on Beneo / Exberry). Declared
   after the media query so they hold on every breakpoint, exactly as
   the old inline styles did. */
.fh-logo-h40{height:40px}
.fh-logo-h25{height:25px}

/* --- Insights / resources --- */
.fh-insights{background:#F5F6F8;padding:4.5rem 4rem}
.fh-insights-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:2.5rem;flex-wrap:wrap;gap:1rem}
.fh-insights-eyebrow{font-size:11px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.5rem}
.fh-insights-title{font-size:28px;font-weight:600;color:#1B3A6B;margin-bottom:0.5rem;line-height:1.2}
.fh-insights-lead{font-size:18px;color:#666;line-height:1.65;max-width:480px}
.fh-insights-note{font-size:16px;color:#888;margin-top:0.75rem}
.fh-link-accent{color:#00baf2;text-decoration:underline;font-weight:500}
.fh-insights-actions{display:flex;gap:10px;flex-shrink:0}
.fh-btn-outline{font-size:16px;font-weight:600;color:#1B3A6B;text-decoration:none;border:1.5px solid #1B3A6B;padding:8px 18px;border-radius:6px}
.fh-btn-solid{font-size:16px;font-weight:600;color:#fff;text-decoration:none;background:#1B3A6B;padding:8px 18px;border-radius:6px}
.fh-insights-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px}
.fh-feature-card{border-radius:12px;overflow:hidden;position:relative;min-height:480px;display:flex;flex-direction:column;justify-content:flex-end}
.fh-feature-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fh-feature-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,20,50,0.95) 0%,rgba(10,20,50,0.5) 50%,rgba(10,20,50,0.1) 100%)}
.fh-feature-content{position:relative;z-index:1;padding:2rem}
.fh-feature-tag{font-size:9px;font-weight:700;color:#fff;background:#00baf2;padding:4px 10px;border-radius:4px;letter-spacing:0.1em;text-transform:uppercase;display:inline-block;margin-bottom:1rem}
.fh-feature-title{font-size:22px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:0.75rem}
.fh-feature-desc{font-size:16px;color:rgba(255,255,255,0.65);line-height:1.6;margin-bottom:1.25rem}
.fh-feature-link{font-size:16px;font-weight:700;color:#00baf2;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.fh-arrow-16{font-size:16px}
.fh-mini-list{display:grid;grid-template-rows:repeat(4,1fr);gap:12px}
.fh-mini-link{text-decoration:none;}
.fh-mini-card{background:#fff;border-radius:8px;overflow:hidden;display:flex;gap:0}
.fh-mini-thumb{width:80px;flex-shrink:0;position:relative;overflow:hidden}
.fh-mini-thumb-1{background:#E6F1FB}
.fh-mini-thumb-2{background:#EEEDFE}
.fh-mini-thumb-3{background:#E5F5EE}
.fh-mini-thumb-4{background:#FAEEDA}
.fh-mini-img{width:100%;height:100%;object-fit:cover}
.fh-mini-img-1{opacity:0.8}
.fh-mini-img-2{opacity:0.7;filter:hue-rotate(200deg)}
.fh-mini-img-3{opacity:0.8}
.fh-mini-img-4{opacity:0.6;filter:sepia(0.3)}
.fh-mini-body{padding:0.9rem;flex:1}
.fh-mini-tag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em}
.fh-mini-tag-1{color:#0F6E56}
.fh-mini-tag-2{color:#534AB7}
.fh-mini-tag-3{color:#00baf2}
.fh-mini-tag-4{color:#854F0B}
.fh-mini-title{font-size:16px;font-weight:500;color:#1B3A6B;line-height:1.4;margin-top:3px}



/* ============================================================
   RESOURCES SECTION — NEW LAYOUT
   ------------------------------------------------------------
   FULL SCOPED OVERRIDE
   ------------------------------------------------------------
   Paste this at the VERY END of the CSS file.

   The existing/old Resources CSS remains untouched above.
   Every Resources-specific override is scoped under
   .fh-insights so it does not affect unrelated sections.
   ============================================================ */


/* ============================================================
   SECTION
   ============================================================ */

.fh-insights {
    background: #fff;
    padding: 70px 24px 80px;
}


/*
   Keep Resources content at the same controlled width as the
   reference design.
*/

.fh-insights > div {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   HEADER
   ============================================================ */

.fh-insights .fh-insights-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 38px;
}

.fh-insights .fh-insights-head > div:first-child {
    max-width: 680px;
}

.fh-insights .fh-insights-eyebrow {
    font-size: 11px;
    font-weight: 700;

    color: #00baf2;

    text-transform: uppercase;
    letter-spacing: 0.12em;

    margin-bottom: 14px;
}

.fh-insights .fh-insights-title {
    font-size: 28px;
    font-weight: 600;

    color: #1B3A6B;

    line-height: 1.2;

    margin-bottom: 12px;
}

.fh-insights .fh-insights-lead {
    font-size: 16px;

    color: #444;

    line-height: 1.65;

    max-width: 620px;
}

.fh-insights .fh-insights-note {
    font-size: 16px;

    color: #5F6673;

    line-height: 1.5;

    margin-top: 14px;
}

.fh-insights .fh-link-accent {
    color: #00baf2;

    text-decoration: underline;

    font-weight: 500;
}


/* ============================================================
   HEADER BUTTONS
   ============================================================ */

.fh-insights .fh-insights-actions {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}

.fh-insights .fh-btn-outline,
.fh-insights .fh-btn-solid {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 9px 18px;

    border-radius: 6px;

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;
}

.fh-insights .fh-btn-outline {
    color: #1B3A6B;

    background: #fff;

    border: 1.5px solid #1B3A6B;
}

.fh-insights .fh-btn-solid {
    color: #fff;

    background: #1B3A6B;

    border: 1.5px solid #1B3A6B;
}

.fh-insights .fh-btn-outline:hover {
    background: #F5F7FA;
}

.fh-insights .fh-btn-solid:hover {
    background: #14305A;
}


/* ============================================================
   RESOURCE GRID
   ============================================================ */


/*
   IMPORTANT:

   The original CSS contains:

       grid-template-columns: 1.6fr 1fr;

   and the original mini list contains:

       grid-template-rows: repeat(4,1fr);

   We override BOTH.

   Featured report:
       100% width

   Mini resources:
       4 columns
       automatic row sizing
       NO fixed 4-row grid
*/

.fh-insights .fh-insights-grid {
    display: block;

    width: 100%;
}


/* ============================================================
   FEATURED REPORT
   ============================================================ */

.fh-insights .fh-feature-card {
    width: 100%;

    min-height: 488px;

    margin: 0 0 22px 0;

    border-radius: 12px;

    overflow: hidden;

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    background: #1B3A6B;
}

.fh-insights .fh-feature-img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}

.fh-insights .fh-feature-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(5, 18, 45, 0.98) 0%,
            rgba(10, 25, 55, 0.78) 45%,
            rgba(10, 25, 55, 0.30) 75%,
            rgba(10, 25, 55, 0.08) 100%
        );
}

.fh-insights .fh-feature-content {
    position: relative;

    z-index: 1;

    padding: 38px 40px;

    max-width: 760px;
}

.fh-insights .fh-feature-tag {
    display: inline-block;

    font-size: 10px;
    font-weight: 700;

    color: #1B3A6B;

    background: #fff;

    padding: 5px 9px;

    border-radius: 4px;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    margin-bottom: 18px;
}

.fh-insights .fh-feature-title {
    font-size: 23px;
    font-weight: 700;

    color: #fff;

    line-height: 1.3;

    margin-bottom: 12px;

    max-width: 650px;
}

.fh-insights .fh-feature-desc {
    font-size: 16px;

    color: rgba(255,255,255,0.72);

    line-height: 1.6;

    margin-bottom: 18px;

    max-width: 700px;
}

.fh-insights .fh-feature-link {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-size: 16px;
    font-weight: 700;

    color: #fff;

    text-decoration: none;
}

.fh-insights .fh-feature-link:hover {
    color: #00baf2;
}

.fh-insights .fh-arrow-16 {
    font-size: 16px;
}


/* ============================================================
   FOUR RESOURCE CARDS
   ============================================================ */

.fh-insights .fh-mini-list {
    display: grid;

    /*
       FOUR COLUMNS
    */
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    /*
       CRITICAL FIX:
       Remove the OLD:

           grid-template-rows: repeat(4,1fr)

       Otherwise CSS Grid creates 4 rows even though we only
       have four cards.
    */
    grid-template-rows: none;

    /*
       Do NOT use grid-auto-rows: 1fr here.
       Let the cards determine their natural height.
    */
    grid-auto-rows: auto;

    gap: 18px;

    width: 100%;

    margin: 0;

    padding: 0;
}


/* ============================================================
   CARD LINK
   ============================================================ */

.fh-insights .fh-mini-link {
    display: block;

    width: 100%;

    min-width: 0;

    height: 100%;

    text-decoration: none;
}


/* ============================================================
   CARD
   ============================================================ */

.fh-insights .fh-mini-card {
    width: 100%;

    height: 100%;

    min-height: 0;

    display: flex;

    flex-direction: column;

    background: #fff;

    border-radius: 10px;

    overflow: hidden;

    border: 1px solid #E8EAF0;

    box-shadow:
        0 8px 24px rgba(20, 35, 60, 0.08);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.fh-insights .fh-mini-card:hover {
    transform: translateY(-3px);

    border-color: #D8DEE8;

    box-shadow:
        0 14px 30px rgba(20, 35, 60, 0.12);
}


/* ============================================================
   CARD IMAGE
   ============================================================ */


/*
   OLD:
       width: 80px;

   NEW:
       full card width
       large image at the top
*/

.fh-insights .fh-mini-thumb {
    width: 100%;

    height: 164px;

    min-height: 164px;

    flex-shrink: 0;

    position: relative;

    overflow: hidden;
}

.fh-insights .fh-mini-img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;
}

.fh-insights .fh-mini-card:hover .fh-mini-img {
    transform: scale(1.03);
}


/* ============================================================
   INDIVIDUAL CARD IMAGE BACKGROUNDS
   ============================================================ */

.fh-insights .fh-mini-thumb-1 {
    background: #E6F1FB;
}

.fh-insights .fh-mini-thumb-2 {
    background: #EEEDFE;
}

.fh-insights .fh-mini-thumb-3 {
    background: #E5F5EE;
}

.fh-insights .fh-mini-thumb-4 {
    background: #FAEEDA;
}


/* ============================================================
   INDIVIDUAL IMAGE TREATMENTS
   ============================================================ */

.fh-insights .fh-mini-img-1 {
    opacity: 0.82;
}

.fh-insights .fh-mini-img-2 {
    opacity: 0.76;

    filter: hue-rotate(200deg);
}

.fh-insights .fh-mini-img-3 {
    opacity: 0.82;
}

.fh-insights .fh-mini-img-4 {
    opacity: 0.68;

    filter: sepia(0.3);
}


/* ============================================================
   CARD BODY
   ============================================================ */

.fh-insights .fh-mini-body {
    width: 100%;

    padding: 18px 17px 20px;

    display: flex;

    flex-direction: column;

    flex: 1;
}

.fh-insights .fh-mini-tag {
    display: inline-block;

    width: fit-content;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.07em;

    margin-bottom: 8px;
}

.fh-insights .fh-mini-tag-1 {
    color: #0F6E56;
}

.fh-insights .fh-mini-tag-2 {
    color: #534AB7;
}

.fh-insights .fh-mini-tag-3 {
    color: #00baf2;
}

.fh-insights .fh-mini-tag-4 {
    color: #854F0B;
}

.fh-insights .fh-mini-title {
    font-size: 16px;

    font-weight: 600;

    color: #1B3A6B;

    line-height: 1.4;

    margin-top: 0;
}


/* ============================================================
   IFF TESTIMONIAL
   ============================================================ */

.fh-insights .fh-cred-quote-wrap-iff {
    width: 100%;

    margin: 30px auto 0;

    padding: 22px 32px;

    display: block;

    background: #F2FAFE;

    border: 1px solid #D8ECF5;

    border-left: 3px solid #00baf2;

    border-radius: 8px;
}

.fh-insights .fh-cred-quote-iff {
    width: 100%;

    max-width: none;

    display: grid;

    grid-template-columns: 105px minmax(0, 1fr);

    gap: 26px;

    align-items: center;
}

.fh-insights .fh-cred-quote-text-iff {
    font-size: 15px;

    color: #333;

    line-height: 1.65;

    font-style: italic;

    margin: 0 0 8px;
}

.fh-insights .fh-cred-quote-attr-iff {
    font-size: 14px;

    color: #5F6673;

    margin: 0;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1000px) {

    .fh-insights {
        padding-left: 24px;
        padding-right: 24px;
    }

    .fh-insights > div {
        width: 100%;
    }

    .fh-insights .fh-mini-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows: none;

        grid-auto-rows: auto;
    }

}


/* ============================================================
   MOBILE / TABLET
   ============================================================ */

@media (max-width: 768px) {

    .fh-insights {
        padding: 48px 20px 60px;
    }


    /* Header */

    .fh-insights .fh-insights-head {
        display: block;

        margin-bottom: 28px;
    }

    .fh-insights .fh-insights-actions {
        margin-top: 22px;

        display: flex;

        flex-wrap: wrap;
    }

    .fh-insights .fh-btn-outline,
    .fh-insights .fh-btn-solid {
        flex: 1;

        min-width: 150px;
    }


    /* Featured report */

    .fh-insights .fh-feature-card {
        min-height: 420px;

        margin-bottom: 18px;
    }

    .fh-insights .fh-feature-content {
        padding: 28px 24px;
    }

    .fh-insights .fh-feature-title {
        font-size: 21px;
    }


    /* Cards */

    .fh-insights .fh-mini-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows: none;

        grid-auto-rows: auto;

        gap: 14px;
    }

    .fh-insights .fh-mini-thumb {
        height: 150px;

        min-height: 150px;
    }


    /* Testimonial */

    .fh-insights .fh-cred-quote-wrap-iff {
        padding: 20px;
    }

    .fh-insights .fh-cred-quote-iff {
        grid-template-columns: 1fr;

        gap: 10px;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 560px) {

    .fh-insights {
        padding-left: 16px;
        padding-right: 16px;
    }


    .fh-insights .fh-insights-title {
        font-size: 25px;
    }


    /* Buttons */

    .fh-insights .fh-insights-actions {
        flex-direction: column;
    }

    .fh-insights .fh-btn-outline,
    .fh-insights .fh-btn-solid {
        width: 100%;
    }


    /* Featured report */

    .fh-insights .fh-feature-card {
        min-height: 400px;
    }

    .fh-insights .fh-feature-content {
        padding: 24px 20px;
    }

    .fh-insights .fh-feature-title {
        font-size: 20px;
    }


    /* One card per row */

    .fh-insights .fh-mini-list {
        grid-template-columns: 1fr;

        grid-template-rows: none;

        grid-auto-rows: auto;
    }

    .fh-insights .fh-mini-thumb {
        height: 190px;

        min-height: 190px;
    }

}

/* ============================================================
   DEE — COMPACT COMMERCIAL ARGUMENT CARD
   OPTION A — DASHBOARD VERSION

   ============================================================
   IMPORTANT
   ------------------------------------------------------------
   All classes are scoped with:

       fh-dee-compact-*

   This CSS does NOT modify existing:
       .fh-ai-*
       .dee-*
       .sn-*
       .me-*
       .fh-insights-*
       .card
       .container
       .section
       etc.
   ============================================================ */


/* ============================================================
   MAIN CARD
   ============================================================ */

.fh-dee-compact-card {
    width: 100%;
    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #DDE4ED;
    border-radius: 12px;

    overflow: hidden;        
}


/* ============================================================
   CARD HEADER
   ============================================================ */

.fh-dee-compact-header {
    width: 100%;
    box-sizing: border-box;

    background: linear-gradient(
        135deg,
        #162F59 0%,
        #1B3A6B 100%
    );

    padding: 15px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.fh-dee-compact-header-left {
    min-width: 0;
}

.fh-dee-compact-eyebrow {
    display: block;

    margin: 0 0 5px 0;

    font-size: 10px;
    line-height: 1.2;

    font-weight: 700;

    color: #29A8E0;

    text-transform: uppercase;
    letter-spacing: 0.13em;
}

.fh-dee-compact-header-title {
    margin: 0;

    font-size: 16px;
    line-height: 1.25;

    font-weight: 700;

    color: #ffffff;
}

.fh-dee-compact-source {
    flex-shrink: 0;

    margin: 0;

    font-size: 8px;
    line-height: 1.3;

    color: rgba(255, 255, 255, 0.62);

    white-space: nowrap;
}


/* ============================================================
   CARD BODY
   ============================================================ */

.fh-dee-compact-body {
    width: 100%;
    box-sizing: border-box;

    padding: 15px 18px 18px;

    background: #ffffff;
}


/* ============================================================
   CONTEXT TAGS
   ============================================================ */

.fh-dee-compact-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin: 0 0 15px 0;
    padding: 0;
}

.fh-dee-compact-tag {
    display: inline-flex;
    align-items: center;

    box-sizing: border-box;

    padding: 4px 7px;

    background: #F6F8FA;

    border: 1px solid #E1E6EC;
    border-radius: 4px;

    color: #657080;

    font-size: 11px;
    line-height: 1.3;

    font-weight: 500;
}

.fh-dee-compact-tag strong {
    color: #30415A;

    font-weight: 700;

    margin-right: 2px;
}


/* ============================================================
   COMMERCIAL VERDICT
   ============================================================ */

.fh-dee-compact-verdict {
    box-sizing: border-box;

    width: 100%;

    background: #EDF7FC;

    border-left: 3px solid #29A8E0;

    border-radius: 0 6px 6px 0;

    padding: 11px 12px;

    margin: 0 0 15px 0;
}

.fh-dee-compact-verdict-label {
    display: block;

    margin: 0 0 4px 0;

    font-size: 10px;
    line-height: 1.2;

    font-weight: 700;

    color: #2386B1;

    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.fh-dee-compact-verdict-text {
    margin: 0;

    font-size: 14px;
    line-height: 1.45;

    font-weight: 500;

    color: #26384F;
}


/* ============================================================
   FOUR EVIDENCE METRICS
   ============================================================ */

.fh-dee-compact-metrics {
    width: 100%;
    box-sizing: border-box;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 6px;

    margin: 0 0 15px 0;
    padding: 0;
}

.fh-dee-compact-metric {
    box-sizing: border-box;

    min-width: 0;

    background: #FAFBFC;

    border: 1px solid #E5E9EF;
    border-radius: 6px;

    padding: 9px 5px;

    text-align: center;
}

.fh-dee-compact-metric-value {
    display: block;

    margin: 0 0 4px 0;

    font-size: 19px;
    line-height: 1;

    font-weight: 700;

    color: #1B3A6B;
}

.fh-dee-compact-metric-label {
    display: block;

    margin: 0;

    font-size: 9px;
    line-height: 1.3;

    font-weight: 600;

    color: #606B79;
}

.fh-dee-compact-metric-source {
    display: block;

    margin: 3px 0 0 0;

    font-size: 6px;
    line-height: 1.2;

    color: #A4ABB4;
}


/* ============================================================
   OPPORTUNITY / BARRIER
   ============================================================ */

.fh-dee-compact-two {
    width: 100%;
    box-sizing: border-box;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 6px;

    margin: 0 0 13px 0;
    padding: 0;
}

.fh-dee-compact-panel {
    box-sizing: border-box;

    min-width: 0;

    padding: 10px;

    border-radius: 6px;
}

.fh-dee-compact-panel--opportunity {
    background: #F1F9FD;

    border: 1px solid #D6EBF5;
}

.fh-dee-compact-panel--barrier {
    background: #FFF7F3;

    border: 1px solid #F0DED5;
}

.fh-dee-compact-panel-label {
    display: block;

    margin: 0 0 4px 0;

    font-size: 7px;
    line-height: 1.2;

    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.fh-dee-compact-panel--opportunity
.fh-dee-compact-panel-label {
    color: #187AA5;
}

.fh-dee-compact-panel--barrier
.fh-dee-compact-panel-label {
    color: #A15A3B;
}

.fh-dee-compact-panel-text {
    margin: 0;

    font-size: 8px;
    line-height: 1.4;

    font-weight: 500;

    color: #596575;
}


/* ============================================================
   PROOF POINTS
   ============================================================ */

.fh-dee-compact-proof {
    width: 100%;
    box-sizing: border-box;

    border-top: 1px solid #E8ECF1;

    padding: 11px 0 0 0;

    margin: 0;
}

.fh-dee-compact-proof-heading {
    display: block;

    margin: 0 0 5px 0;

    font-size: 7px;
    line-height: 1.2;

    font-weight: 700;

    color: #2386B1;

    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.fh-dee-compact-proof-item {
    width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: flex-start;

    gap: 6px;

    padding: 6px 0;

    border-bottom: 1px solid #F1F3F6;
}

.fh-dee-compact-proof-item:last-child {
    border-bottom: none;
}

.fh-dee-compact-proof-number {
    width: 15px;
    height: 15px;

    min-width: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border-radius: 3px;

    background: #1B3A6B;

    color: #ffffff;

    font-size: 7px;
    line-height: 1;

    font-weight: 700;
}

.fh-dee-compact-proof-content {
    flex: 1;

    min-width: 0;
}

.fh-dee-compact-proof-title {
    margin: 0 0 2px 0;

    font-size: 8px;
    line-height: 1.35;

    font-weight: 600;

    color: #263449;
}

.fh-dee-compact-proof-source {
    margin: 0;

    font-size: 6px;
    line-height: 1.3;

    color: #9BA3AE;
}


/* ============================================================
   PROOF BADGES
   ============================================================ */

.fh-dee-compact-proof-badge {
    flex-shrink: 0;

    box-sizing: border-box;

    padding: 3px 5px;

    border-radius: 3px;

    font-size: 5px;
    line-height: 1;

    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fh-dee-compact-proof-badge--direct {
    color: #287044;

    background: #E9F6EE;

    border: 1px solid #C7E7D2;
}

.fh-dee-compact-proof-badge--category {
    color: #85600D;

    background: #FFF5DF;

    border: 1px solid #F0DDAF;
}


/* ============================================================
   FOOTER
   ============================================================ */

.fh-dee-compact-footer {
    display: flex;
    align-items: center;

    margin: 0;
    padding: 12px 0 0 0;
}


/* ============================================================
   EXPLORE DEE BUTTON
   ------------------------------------------------------------
   Previous dashboard-style button
   ============================================================ */

.fh-dee-compact-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    box-sizing: border-box;

    padding: 10px 15px;

    background: #ffffff;

    color: #1B3A6B;

    border: 2px solid #1B3A6B;

    border-radius: 6px;

    font-size: 12px;
    line-height: 1.2;

    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.fh-dee-compact-button span {
    display: inline-block;

    font-size: 16px;
    line-height: 1;

    font-weight: 700;
}

.fh-dee-compact-button:hover {
    background: #1B3A6B;
    color: #fff;
}

.fh-dee-compact-button:focus-visible {
    outline: 3px solid rgba(41, 168, 224, 0.35);

    outline-offset: 2px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .fh-dee-compact-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }

    .fh-dee-compact-source {
        white-space: normal;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .fh-dee-compact-body {
        padding: 14px;
    }

    .fh-dee-compact-header {
        padding: 14px;
    }

    .fh-dee-compact-header-title {
        font-size: 18px;
    }

    .fh-dee-compact-metrics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .fh-dee-compact-two {
        grid-template-columns: 1fr;
    }

    .fh-dee-compact-proof-badge {
        display: none;
    }

    .fh-dee-compact-button {
        font-size: 11px;

        padding: 9px 13px;
    }

}


/* ============================================================
   VERY SMALL SCREENS
   ============================================================ */

@media (max-width: 380px) {

    .fh-dee-compact-tags {
        display: grid;

        grid-template-columns: 1fr 1fr;
    }

    .fh-dee-compact-tag {
        width: 100%;
    }

    .fh-dee-compact-verdict-text {
        font-size: 12px;
    }

}





/* --- Sample insights (Q&A) --- */
.fh-sample{background:#fff;padding:5rem 4rem}
.fh-sample-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1.4fr;gap:5rem;align-items:start}
.fh-sample-eyebrow{font-size:10px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.75rem}
.fh-sample-title{font-size:28px;font-weight:700;color:#1B3A6B;line-height:1.2;margin-bottom:0.75rem;letter-spacing:-0.3px}
.fh-sample-lead{font-size:18px;color:#666;line-height:1.7;margin-bottom:1rem;max-width:300px}
.fh-sample-note{font-size:16px;color:#888;line-height:1.65;margin-bottom:2rem;max-width:300px;font-style:italic}
.fh-btn-navy{display:inline-block;background:#1B3A6B;color:#fff;padding:11px 24px;border-radius:7px;font-size:16px;font-weight:600;text-decoration:none}
.fh-qa-item{padding:1.5rem 0;border-top:1px solid #E8EAF0}
.fh-qa-item-last{border-bottom:1px solid #E8EAF0}
.fh-qa-row{display:flex;gap:0.75rem;align-items:flex-start}
.fh-qa-num{font-size:10px;font-weight:700;color:#00baf2;letter-spacing:0.1em;flex-shrink:0;margin-top:3px}
.fh-qa-label{font-size:10px;color:#888;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.3rem;font-weight:600}
.fh-qa-q{font-size:16px;font-weight:700;color:#1B3A6B;margin-bottom:0.4rem}
.fh-qa-a{font-size:16px;color:#666;line-height:1.65;margin-bottom:0.6rem}

/* --- Standalone demo banner --- */
.fh-demo-banner{background:#F5F6F8;border-top:1px solid #E3E7EE;border-bottom:1px solid #E3E7EE}
.fh-demo-inner{max-width:1100px;margin:0 auto;padding:2rem 4rem;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.fh-demo-text{max-width:720px}
.fh-demo-eyebrow{font-size:11px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.6rem}
.fh-demo-title{font-size:24px;font-weight:650;color:#1B3A6B;line-height:1.25;margin-bottom:0.5rem}
.fh-demo-desc{font-size:16px;color:#5C6678;line-height:1.7;margin:0}
.fh-btn-cyan{display:inline-flex;align-items:center;gap:10px;background:#00baf2;color:#fff;padding:13px 26px;border-radius:7px;font-size:16px;font-weight:600;text-decoration:none;white-space:nowrap}
.fh-arrow-18{font-size:18px}
/* reproduces the old  section[style*="background:#F5F6F8;border-top"] > div
   mobile rule, which no longer matches now the inline style is gone */
@media(max-width:600px){
  .fh-demo-inner{padding:2rem 1.5rem!important;flex-direction:column;align-items:flex-start!important}
}

/* ============================================================
   HOME — AI CAPABILITIES (Sensia + DEE + reviews)
   Extracted from inline styles. Append to the homepage (fh-)
   block in fmcggurus.new.css, or link as its own file.
   NOTE: colours below are the ORIGINAL inline values (old palette).
   See the palette-map note if you want them on Rooban's new scheme.
   ============================================================ */

.fh-ai{background:#f5f6f8;padding:3.5rem 4rem}
.fh-ai-inner{max-width:1100px;margin:0 auto}

.fh-ai-eyebrow{font-size:10px;font-weight:700;color:#29A8E0;text-transform:uppercase;letter-spacing:.15em;margin-bottom:.5rem}
.fh-ai-title{font-size:26px;font-weight:600;color:#1B3A6B;margin-bottom:.4rem}
.fh-ai-intro{font-size:18px;color:#666;line-height:1.7;max-width:525px;margin-bottom:2rem}

.fh-ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* --- cards --- */
.fh-ai-card{border-radius:10px;overflow:hidden;border:1px solid #E8EAF0;display:flex;flex-direction:column}
.fh-ai-card-head{padding:1.5rem 1.75rem}
.fh-ai-card--sensia .fh-ai-card-head{background:#000}
.fh-ai-card--dee .fh-ai-card-head{background:#1B3A6B}

.fh-ai-badge{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;padding:3px 9px;border-radius:4px;margin-bottom:.75rem}
.fh-ai-card--sensia .fh-ai-badge{background:rgba(0,207,200,.15);color:#00CFC8;border:1px solid rgba(0,207,200,.3)}
.fh-ai-card--dee .fh-ai-badge{background:rgba(41,168,224,.15);color:#29A8E0;border:1px solid rgba(41,168,224,.3)}

.fh-ai-card-title{font-size:18px;font-weight:700;color:#fff;margin-bottom:.4rem;line-height:1.25}
.fh-ai-card-sub{font-size:16px;color:rgba(255,255,255,.62);line-height:1.6}

/* Sensia example box */
.fh-ai-example{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:6px;padding:.7rem .9rem;margin-top:1rem}
.fh-ai-example-q{font-size:11px;color:rgba(255,255,255,.45);font-style:italic;margin-bottom:4px}
.fh-ai-example-a{font-size:11px;font-weight:600;color:#00CFC8}

/* DEE score meters (fill width comes from the inline --w data value) */
.fh-ai-meters{margin-top:1rem;display:flex;flex-direction:column;gap:7px}
.fh-ai-meter{display:flex;align-items:center;gap:8px}
.fh-ai-meter-label{font-size:10px;color:rgba(255,255,255,.38);width:80px;flex-shrink:0}
.fh-ai-meter-track{flex:1;height:3px;background:rgba(255,255,255,.08);border-radius:2px}
.fh-ai-meter-fill{width:var(--w,0);height:100%;background:#29A8E0;border-radius:2px}
.fh-ai-meter-val{font-size:10px;font-weight:700;color:#29A8E0;flex-shrink:0;margin-left:6px}

/* --- card body --- */
.fh-ai-card-body{padding:1.25rem 1.75rem;background:#fff;flex:1}
.fh-ai-features{font-size:16px;color:#444;line-height:1.6;margin-bottom:1rem}
.fh-ai-feature{padding:5px 0;display:flex;gap:8px;align-items:center}
.fh-ai-feature:not(:last-child){border-bottom:1px solid #F5F6F8}
.fh-ai-diamond{font-size:11px}
.fh-ai-card--sensia .fh-ai-diamond{color:#00CFC8}
.fh-ai-card--dee .fh-ai-diamond{color:#29A8E0}

.fh-ai-btn{display:inline-block;font-size:16px;font-weight:700;padding:8px 18px;border-radius:6px;text-decoration:none}
.fh-ai-btn--sensia{color:#00CFC8;border:1.5px solid #00CFC8}
.fh-ai-btn--dee{color:#1B3A6B;border:1.5px solid #1B3A6B}

/* --- reviews --- */
.fh-ai-reviews{margin-top:1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fh-ai-review{background:#fff;border:1px solid #E8EAF0;border-radius:10px;padding:1.25rem 1.5rem;display:flex;align-items:flex-start;gap:1rem}
.fh-ai-review-media{flex-shrink:0}
.fh-ai-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;margin-bottom:4px}
.fh-ai-avatar--sensia{background:#000}
.fh-ai-avatar--dee{background:#1B3A6B}
.fh-ai-stars{font-size:11px;letter-spacing:1px;text-align:center}
.fh-ai-stars--sensia{color:#00CFC8}
.fh-ai-stars--dee{color:#29A8E0}
.fh-ai-quote{font-size:16px;color:#1a1a2e;line-height:1.6;font-style:italic;margin-bottom:.35rem}
.fh-ai-attr{font-size:11px;color:#999}
.fh-ai-attr-name{color:#1B3A6B;font-weight:600}

/* --- responsive: stack on mobile (the inline version had no mobile rules) --- */
@media(max-width:768px){
  .fh-ai{padding:2.25rem 1.25rem}
  .fh-ai-grid,.fh-ai-reviews{grid-template-columns:1fr}
}


/* ── REVIEW (converted from inline) ── */
.stc-review{background:#fff;padding:3.5rem 4rem}
.stc-review-inner{max-width:860px;margin:0 auto;display:flex;gap:3.5rem;align-items:flex-start}
.stc-review-side{flex-shrink:0}
.stc-review-stars{color:#00CFC8;font-size:20px;margin-bottom:0.75rem}
.stc-review-avatar{width:52px;height:52px;border-radius:50%;background:#1B3A6B;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:700}
.stc-review-name{font-size:12px;font-weight:700;color:#1B3A6B;margin-top:0.5rem}
.stc-review-source{font-size:11px;color:#888}
.stc-review-quote-icon{color:#00CFC8;width:28px;height:28px;margin-bottom:0.75rem;display:block}
.stc-review-quote{font-size:18px;font-weight:500;color:#1a1a2e;line-height:1.65;margin-bottom:1rem}
.stc-review-quote strong{color:#1B3A6B}
.stc-review-note{font-size:13px;color:#888;line-height:1.5}
/* small utilities that replaced one-off inline styles */
.stc-hero-visual-wrap{display:flex;justify-content:center}
.stc-vis-group{margin-bottom:0.75rem}
.stc-dt-mb{margin-bottom:1.5rem}
@media(max-width:600px){
  .stc-review{padding-left:1.5rem;padding-right:1.5rem}
  .stc-review-inner{flex-direction:column;gap:1.5rem}
}

/* --- How we help band --- */
.fh-help{position:relative;min-height:390px;display:flex;align-items:center;overflow:hidden}
.fh-help-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;    object-position: center right;}
.fh-help-overlay{position:absolute;inset:0;background: linear-gradient(105deg, rgba(12, 26, 54, 0.96) 0%, rgb(12 26 54 / 50%) 55%, rgba(12, 26, 54, 0.55) 100%);/*background:linear-gradient(105deg,rgba(12,26,54,0.96) 0%,rgba(12,26,54,0.85) 55%,rgba(12,26,54,0.55) 100%)*/}
.fh-help-content{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:4.5rem 4rem;width:100%}
.fh-help-eyebrow{font-size:11px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:1rem}
.fh-help-title{font-size:40px;font-weight:700;color:#fff;line-height:1.1;max-width:700px;margin-bottom:1.25rem;letter-spacing:-0.5px}
.fh-help-sub{font-size:16px;color:rgba(255,255,255,0.65);max-width:520px;line-height:1.75;margin-bottom:2rem}
.fh-help-cols{display:flex;gap:0;margin-bottom:2rem;border-top:1px solid rgba(255,255,255,0.15);padding-top:1.5rem}
.fh-help-col{flex:1;padding-right:2.5rem;border-right:1px solid rgba(255,255,255,0.12)}
.fh-help-col-mid{flex:1;padding:0 2.5rem;border-right:1px solid rgba(255,255,255,0.12)}
.fh-help-col-end{flex:1;padding-left:2.5rem}
.fh-help-num{font-size:11px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.5rem}
.fh-help-label{font-size:16px;font-weight:600;color:#fff;margin:0}
.fh-btn-cyan-lg{display:inline-flex;align-items:center;gap:10px;background:#00baf2;color:#fff;padding:13px 28px;border-radius:7px;font-size:16px;font-weight:600;text-decoration:none}

/* --- Footer --- */
.fh-footer-logo-img{height:110px;width:110px;display:block;border-radius:10px}
.fh-footer-legal-link{color:rgba(255,255,255,0.28)}

/* --- Heading-order fix ---------------------------------------------------
   Footer column headings changed from <h4> to <h3> in the HTML so the
   document no longer skips a heading level (h2 -> h4). Mirror the old
   .footer-col h4 styling onto h3 so the footer looks identical. */
.footer-col h3{font-size:11px;font-weight:600;color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:1rem}

/* ============================================================
   ACCESSIBLE CONTRAST PALETTE (WCAG AA)
   ------------------------------------------------------------
   Makes Lighthouse's contrast audit pass. It shifts the muted
   colour system: brand cyan goes DARKER on light backgrounds and
   LIGHTER on dark ones, and faint greys / low-opacity whites are
   strengthened. Vibrant cyan on the black hero is left untouched.
   Don't want it? Delete from this line to the end of the file and
   the original brand colours return.
   ============================================================ */

/* 1. white text on cyan  ->  darker cyan background */
.nav-cta,
.btn-primary,
.fh-flow-num-active,
.fh-feature-tag,
.fh-btn-cyan,
.fh-btn-cyan-lg,
.de-cta-btn{background:#1B3A6B}
.btn-primary:hover,
.fh-btn-cyan:hover,
.fh-btn-cyan-lg:hover,
.de-cta-btn:hover{background:#003A78}

.fh-flow-num-active{
  background: #00baf2 !important;  
}


/* 2. cyan text on LIGHT backgrounds  ->  darker cyan */
.fh-flow-arrow,
.fh-cred-quote-name,
.fh-link-accent,
.fh-mini-tag-3,
.fh-qa-num,
.fh-demo-eyebrow,
.de-num,
.de-action span{color:#1B3A6B}

/* 3. cyan text on DARK (navy) backgrounds  ->  lighter cyan */
.fh-trusted-label,
.de-kicker{color:#00baf2}

/* 4. faint greys on light  ->  darker grey */
.fh-insights-eyebrow,
.fh-insights-note,
.fh-sample-eyebrow,
.fh-sample-note,
.fh-qa-label,
.fh-cred-quote-attr,
.de-metric-name,
.de-footer{color:#5F6673}

/* 5. low-opacity white text on dark surfaces  ->  strengthened */
.fh-nav-login{color:rgba(255,255,255,0.72)}
.de-status{color:rgba(255,255,255,0.78)}
.footer-col h3{color:rgba(255,255,255,0.70)}
.footer-brand p{color:rgba(255,255,255,0.62)}
.footer-bottom{color:rgba(255,255,255,0.60)}
.fh-footer-legal-link{color:rgba(255,255,255,0.60)}

/* ============================================================
   ABOUT PAGE  (prefix: fh-ab- = fmcg about)
   Same approach as the homepage: former inline styles moved here,
   with accessible colours already applied (darker cyan/greys on
   light surfaces, lighter cyan on navy) so the contrast audit
   passes. Reuses the shared nav, footer, .fh-trusted, .logo-grid
   and skip-link rules defined above.
   ============================================================ */

/* --- Hero (video) --- */
.fh-ab-hero{background:#000;position:relative;overflow:hidden;min-height:560px;display:flex;align-items:center}
.fh-ab-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.55}
.fh-ab-hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.5) 60%,rgba(0,0,0,0.1) 100%)}
.fh-ab-hero-content{position:relative;z-index:1;padding:0 4rem;max-width:680px}
.fh-ab-hero-eyebrow{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:1.5rem}
.fh-ab-hero-title{font-size:48px;font-weight:700;color:#fff;line-height:1.1;margin-bottom:1.5rem;letter-spacing:-0.5px}
.fh-ab-hero-sub{font-size:18px;color:rgba(255,255,255,0.62);max-width:480px;line-height:1.75}

/* --- Why trust us --- */
.fh-ab-trust{background:#fff;padding:5rem 4rem}
.fh-ab-trust-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1.4fr;gap:6rem;align-items:start}
.fh-ab-trust-eyebrow{font-size:10px;font-weight:700;color:#5F6673;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.75rem}
.fh-ab-trust-title{font-size:30px;font-weight:700;color:#1B3A6B;margin-bottom:0;letter-spacing:-0.3px;line-height:1.2}
.fh-ab-trust-body{padding-top:0.25rem}
.fh-ab-trust-lead{font-size:18px;color:#444;line-height:1.8;margin-bottom:1.25rem}
.fh-ab-trust-p{font-size:16px;color:#666;line-height:1.8;margin-bottom:1.25rem}
.fh-ab-trust-p:last-child{margin-bottom:0}

/* --- Evolution --- */
.fh-ab-evo{background:#1B3A6B;padding:5rem 4rem}
.fh-ab-evo-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.fh-ab-evo-eyebrow{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.75rem}
.fh-ab-evo-title{font-size:28px;font-weight:700;color:#fff;margin-bottom:1.25rem;letter-spacing:-0.3px;line-height:1.2}
.fh-ab-evo-lead{font-size:18px;color:rgba(255,255,255,0.72);line-height:1.8;margin-bottom:1.5rem}
.fh-ab-evo-list{display:flex;flex-direction:column;gap:0.85rem}
.fh-ab-evo-item{display:flex;align-items:flex-start;gap:0.75rem}
.fh-ab-evo-dot{width:6px;height:6px;border-radius:50%;background:#00baf2;flex-shrink:0;margin-top:6px}
.fh-ab-evo-text{font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;margin:0}
.fh-ab-evo-strong{color:#fff;font-weight:600}

/* --- Survey Explorer mockup --- */
.fh-ab-mock{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,0.35)}
.fh-ab-mock-bar{background:#F5F6F8;padding:0.55rem 0.9rem;display:flex;align-items:center;gap:0.45rem;border-bottom:1px solid #E3E7EE}
.fh-ab-mock-dot{width:8px;height:8px;border-radius:50%;background:#e0e0e0;display:inline-block}
.fh-ab-mock-title{font-size:10.5px;color:#5F6673;margin-left:0.5rem;font-weight:600}
.fh-ab-mock-filters{padding:0.65rem 0.9rem;background:#fff;border-bottom:1px solid #E3E7EE;display:flex;gap:0.4rem;flex-wrap:wrap}
.fh-ab-mock-chip{font-size:10.5px;background:#E8F7FD;color:#1B3A6B;padding:3px 8px;border-radius:4px;font-weight:600}
.fh-ab-mock-chip-muted{font-size:10.5px;background:#f0f0f0;color:#666;padding:3px 8px;border-radius:4px}
.fh-ab-mock-body{padding:0.85rem}
.fh-ab-mock-table{width:100%;border-collapse:collapse;font-size:10.5px}
.fh-ab-mock-th{padding:4px 5px;color:#5F6673;font-weight:600;font-size:9.5px;text-align:center}
.fh-ab-mock-th-q{text-align:left;padding:4px 6px;color:#5F6673;font-weight:600;font-size:9.5px;padding-bottom:6px}
.fh-ab-mock-td{padding:5px 6px;color:#444;font-size:10.5px}
.fh-ab-mock-cell{padding:5px 5px;text-align:center;border-radius:3px;font-weight:700;font-size:10.5px}
.fh-ab-cell-hi{background:#d1f0e0;color:#1a7a45}
.fh-ab-cell-mid{background:#fef3d0;color:#7a5c1a}
.fh-ab-cell-lo{background:#fce8e8;color:#7a1a1a}
.fh-ab-mock-row-alt{background:#fafbfd}
.fh-ab-mock-foot{padding:0.5rem 0.9rem;background:#F5F6F8;border-top:1px solid #E3E7EE}
.fh-ab-mock-foot-text{font-size:10px;color:#5F6673;font-weight:500}

/* --- Dataset --- */
.fh-ab-dataset{background:#F5F6F8;padding:4rem 4rem}
.fh-ab-dataset-inner{max-width:1100px;margin:0 auto}
.fh-ab-dataset-eyebrow{font-size:10px;font-weight:700;color:#5F6673;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:2.5rem}
.fh-ab-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:2.5rem}
.fh-ab-stat{border-top:1px solid #1B3A6B;padding-top:0.75rem}
.fh-ab-stat-num{font-size:32px;font-weight:500;color:#1B3A6B;line-height:1;margin-bottom:0.4rem}
.fh-ab-stat-rule{height:2px;background:#1B3A6B;width:28px;margin-bottom:0.5rem}
.fh-ab-stat-label{font-size:16px;font-weight:600;color:#444;line-height:1.4}

/* --- UK / UAE locations --- */
.fh-ab-locs{background:#F5F6F8;padding:3rem 4rem}
.fh-ab-locs-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:4rem;flex-wrap:wrap}
.fh-ab-loc-label{font-size:10px;font-weight:700;color:#5F6673;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.4rem}
.fh-ab-loc-name{font-size:16px;font-weight:600;color:#1B3A6B}
.fh-ab-loc-meta{font-size:13px;color:#5F6673}
.fh-ab-loc-divider{height:40px;width:1px;background:#E8EAF0}

/* --- Footer CTA --- */
.fh-ab-cta{background:white;padding:5rem 4rem}
.fh-ab-cta-title{font-size:32px;font-weight:700;color:#1B3A6B;margin-bottom:0.85rem;max-width:560px;letter-spacing:-0.3px}
.fh-ab-cta-sub{font-size:16px;color:#666;margin-bottom:2rem;line-height:1.7;max-width:480px}
.fh-ab-cta-btn{background:#1B3A6B;color:#fff;padding:13px 30px;border-radius:7px;font-size:16px;font-weight:600;text-decoration:none;display:inline-block}

/* --- About responsive (replaces the two inline <style> blocks) --- */
@media(max-width:768px){
  .split{grid-template-columns:1fr!important;gap:2rem!important}
  .stats-grid{grid-template-columns:repeat(2,1fr)!important}
  .fh-ab-hero-content{padding:0 1.5rem}
  .fh-ab-hero-title{font-size:32px}
  .fh-ab-trust,.fh-ab-evo,.fh-ab-dataset,.fh-ab-locs,.fh-ab-cta{padding-left:1.5rem;padding-right:1.5rem}
}

/* ============================================================
   HOW WE HELP PAGE  (prefix: fh-hw-)
   Former inline styles moved here with accessible colours.
   Reuses shared nav, footer, .fh-container, .fh-hero-title-accent,
   the skip link, and the .fh-ab-cta* footer-CTA block.
   ============================================================ */

/* --- Hero (text + image) --- */
.fh-hw-hero{background:#1B3A6B;overflow:hidden}
.fh-hw-hero-grid{display:grid;grid-template-columns:1fr 1fr;min-height:500px}
.fh-hw-hero-text{padding:6rem 4rem;display:flex;flex-direction:column;justify-content:center}
.fh-hw-hero-eyebrow{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:1.5rem}
.fh-hw-hero-title{font-size:44px;font-weight:700;color:#fff;line-height:1.1;margin-bottom:1.5rem;letter-spacing:-0.5px}
.fh-hw-hero-img{position:relative;overflow:hidden;min-height:500px}
.fh-hw-hero-imgel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.fh-hw-hero-overlay{position:absolute;inset:0;background:rgba(27,58,107,0.3)}

/* --- Shared small tokens for this page --- */
.fh-hw-eyebrow{font-size:10px;font-weight:700;color:#5F6673;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.75rem}
.fh-hw-h2{font-size:30px;font-weight:700;color:#1B3A6B;margin-bottom:1rem;letter-spacing:-0.3px;line-height:1.2}

/* --- Three decisions --- */
.fh-hw-decisions{background:#fff;padding:5rem 4rem}
.fh-hw-dec-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:6rem;align-items:start}
.fh-hw-dec-intro{position:sticky;top:80px}
.fh-hw-dec-lead{font-size:18px;color:#666;line-height:1.75;margin-bottom:1.75rem}
.fh-hw-frame{border-left:2px solid #00baf2;padding-left:1rem}
.fh-hw-frame-label{font-size:11px;color:#5F6673;line-height:1.65;margin-bottom:0.6rem}
.fh-hw-frame-list{display:flex;flex-direction:column;gap:0.35rem}
.fh-hw-frame-item{font-size:16px;color:#1B3A6B;font-weight:500;display:flex;align-items:center;gap:6px}
.fh-hw-frame-dash{color:#1B3A6B;font-size:10px}
.fh-hw-dec-row{padding:1.75rem 0;border-top:1px solid #E8EAF0}
.fh-hw-dec-row-last{border-bottom:1px solid #E8EAF0}
.fh-hw-dec-rowflex{display:flex;gap:1rem;align-items:flex-start}
.fh-hw-dec-num{font-size:10px;font-weight:700;color:#1B3A6B;letter-spacing:0.1em;flex-shrink:0;margin-top:4px}
.fh-hw-dec-h3{font-size:18px;font-weight:700;color:#1B3A6B;margin-bottom:0.5rem}
.fh-hw-dec-p{font-size:16px;color:#666;line-height:1.65}

/* --- Three routes --- */
.fh-hw-routes{background:#F5F6F8;padding:5rem 4rem 1.5rem}
.fh-hw-routes-title{font-size:30px;font-weight:700;color:#1B3A6B;margin-bottom:3rem;letter-spacing:-0.3px}
.fh-hw-route-primary{display:grid;grid-template-columns:1.6fr 1fr;gap:0;margin-bottom:16px;border-radius:14px;overflow:hidden}
.fh-hw-route-main{background:#1B3A6B;padding:3rem}
.fh-hw-route-num{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.75rem}
.fh-hw-route-h3{font-size:24px;font-weight:700;color:#fff;margin-bottom:0.75rem;line-height:1.2}
.fh-hw-route-desc{font-size:16px;color:rgba(255,255,255,0.68);line-height:1.75;margin-bottom:1.5rem}
.fh-hw-route-btn{display:inline-block;background:#1B3A6B;color:#fff;padding:12px 24px;border-radius:7px;font-size:16px;font-weight:600;text-decoration:none}
.fh-hw-route-side{background:#152d57;padding:3rem;display:flex;flex-direction:column;justify-content:center;gap:12px}
.fh-hw-route-side-label{font-size:10px;font-weight:700;color:rgba(255,255,255,0.6);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.25rem}
.fh-hw-route-inc{display:flex;align-items:center;gap:10px}
.fh-hw-dot{width:6px;height:6px;border-radius:50%;background:#00baf2;flex-shrink:0}
.fh-hw-route-inc-text{font-size:16px;font-weight:600;color:rgba(255,255,255,0.85);margin:0}
.fh-hw-routes-sup{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.fh-hw-route-card{background:#fff;border:1px solid #E8EAF0;border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between}
.fh-hw-route-card-num{font-size:10px;font-weight:700;color:#1B3A6B;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.6rem}
.fh-hw-route-card-num-muted{font-size:10px;font-weight:700;color:#5F6673;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.6rem}
.fh-hw-route-card-h3{font-size:19px;font-weight:700;color:#1B3A6B;margin-bottom:0.6rem}
.fh-hw-route-card-p{font-size:16px;color:#666;line-height:1.65;flex:1;margin-bottom:1rem}
.fh-hw-route-card-p-lg{font-size:16px;color:#666;line-height:1.65;flex:1;margin-bottom:1.5rem}
.fh-hw-route-card-link{display:inline-block;margin-top:auto;border:1px solid #00baf2;color:#00baf2;padding:7px 16px;border-radius:6px;font-size:16px;font-weight:500;text-decoration:none}
.fh-hw-route-card-link2{display:inline-block;border:1px solid #C0C8D8;color:#555;padding:8px 16px;border-radius:6px;font-size:16px;font-weight:500;text-decoration:none}

/* --- Tools / proof --- */
.fh-hw-tools{background:#F5F6F8;padding:2.5rem 4rem 5rem;scroll-margin-top:70px}
.fh-hw-tools-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:6rem;align-items:start}
.fh-hw-tools-label{font-size:16px;font-weight:600;color:#5F6673;margin-bottom:0.5rem}
.fh-hw-tools-h2{font-size:26px;font-weight:700;color:#1B3A6B;margin-bottom:1rem;letter-spacing:-0.3px;line-height:1.2}
.fh-hw-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-bottom:2.5rem}
.fh-hw-stat-num{font-size:36px;font-weight:500;color:#1B3A6B;line-height:1;margin-bottom:0.4rem}
.fh-hw-stat-rule{height:2px;background:#1B3A6B;width:32px;margin-bottom:0.5rem}
.fh-hw-stat-label{font-size:16px;font-weight:600;color:#333;line-height:1.4}
.fh-hw-quote{border-top:1px solid #E8EAF0;padding-top:1.75rem}
.fh-hw-quote-mark{font-size:22px;color:#1B3A6B;font-family:Georgia,serif;opacity:0.6;display:block;margin-bottom:0.5rem;line-height:1}
.fh-hw-quote-text{font-size:16px;color:#444;line-height:1.75;font-style:italic;margin-bottom:0.5rem}
.fh-hw-quote-attr{font-size:16px;color:#5F6673}
.fh-hw-quote-name{color:#00baf2;font-weight:500}
.fh-hw-tools-list{display:flex;flex-direction:column;gap:14px}
.fh-hw-tool-card{border-left:3px solid #00baf2;padding:1rem 1.25rem;background:#F9FAFB}
.fh-hw-tool-title{font-size:16px;font-weight:700;color:#1B3A6B;margin-bottom:3px}
.fh-hw-tool-desc{font-size:16px;color:#666;line-height:1.55}

/* --- How We Help responsive (replaces the inline <style> block) --- */
@media(max-width:768px){
  .hero-split,.decisions-split,.tools-split,.route-primary,.routes-supporting{grid-template-columns:1fr!important}
  .fh-hw-hero-img{display:none}
  .fh-hw-hero-text{padding:3.5rem 1.5rem 3rem}
  .fh-hw-hero-title{font-size:30px}
  .fh-hw-decisions,.fh-hw-routes,.fh-hw-tools{padding-left:1.5rem;padding-right:1.5rem}
  .fh-hw-dec-intro{position:static}
  .fh-hw-stats{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   CLIENTS PAGE  (prefix: cp-)
   Moved out of the page's inline <style> block. Accessible colours
   applied to match the shared palette (cyan #1B3A6B on light /
   #00baf2 on navy, greys #5F6673, low-opacity whites strengthened);
   the decorative quote glyph keeps its faint cyan but is aria-hidden
   in the HTML so it isn't a contrast target.
   ============================================================ */
.cp-hero{background:linear-gradient(160deg,#1B3A6B 0%,#0d2550 100%);padding:80px 48px;text-align:center;position:relative;overflow:hidden}
.cp-hero::before{content:'';position:absolute;top:-80px;right:-80px;width:320px;height:320px;border-radius:50%;background:rgba(0,186,242,0.08)}
.cp-hero::after{content:'';position:absolute;bottom:-60px;left:-60px;width:220px;height:220px;border-radius:50%;background:rgba(0,186,242,0.05)}
.cp-hero-inner{position:relative;z-index:1;max-width:780px;margin:0 auto}
.cp-hero-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:#00baf2;margin-bottom:22px}
.cp-hero h1{font-size:44px;font-weight:700;line-height:1.15;color:#fff;margin-bottom:22px;letter-spacing:-0.5px}
.cp-hero p{font-size:18px;line-height:1.72;color:rgba(255,255,255,0.68);max-width:640px;margin:0 auto}
.cp-hero-trust{font-size:16px;line-height:1.6;color:rgba(255,255,255,0.72);margin-top:28px;letter-spacing:0.1px}

.cp-proof-strip{background:#1B3A6B;padding:56px 48px}
.cp-proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;max-width:1080px;margin:0 auto}
.cp-proof-item{text-align:center}
.cp-proof-icon{width:44px;height:44px;background:rgba(0,186,242,0.16);border-radius:10px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.cp-proof-icon svg{width:20px;height:20px;stroke:#00baf2;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cp-proof-item strong{display:block;font-size:16px;font-weight:700;color:#fff;margin-bottom:6px}
.cp-proof-item span{font-size:16px;color:rgba(255,255,255,0.72);line-height:1.6}

.cp-testimonials{background:#fff;padding:100px 48px}
.cp-section-label{text-align:center;font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:#1B3A6B;margin-bottom:14px}
.cp-section-heading{text-align:center;font-size:34px;font-weight:700;color:#1B3A6B;margin-bottom:12px;letter-spacing:-0.4px}
.cp-section-sub{text-align:center;font-size:16px;color:#5F6673;max-width:540px;margin:0 auto 60px;line-height:1.72}
.cp-testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1080px;margin:0 auto}
.cp-t-card{background:#f8fafd;border:1px solid #dde4ef;border-radius:12px;padding:36px 28px 28px;display:flex;flex-direction:column;position:relative;transition:box-shadow 0.2s,border-color 0.2s}
.cp-t-card:hover{box-shadow:0 6px 28px rgba(27,58,107,0.1);border-color:#c6d4e8}
.cp-t-quote-mark{font-size:60px;line-height:1;color:#00baf2;opacity:0.3;font-family:Georgia,'Times New Roman',serif;position:absolute;top:16px;left:22px;user-select:none}
.cp-t-quote{font-size:16px;line-height:1.75;color:#334;padding-top:26px;flex:1;font-style:italic}
.cp-t-attr{margin-top:24px;padding-top:18px;border-top:1px solid #dde4ef}
.cp-t-company{font-size:16px;font-weight:700;color:#1B3A6B;letter-spacing:0.1px}
.cp-t-role{font-size:16px;color:#5F6673;margin-top:3px}

.cp-cta-section{background:linear-gradient(160deg,#1B3A6B 0%,#0d2550 100%);padding:100px 48px;text-align:center;position:relative;overflow:hidden}
.cp-cta-section::before{content:'';position:absolute;top:-80px;right:-80px;width:280px;height:280px;border-radius:50%;background:rgba(0,186,242,0.09)}
.cp-cta-section::after{content:'';position:absolute;bottom:-60px;left:-60px;width:200px;height:200px;border-radius:50%;background:rgba(0,186,242,0.06)}
.cp-cta-inner{position:relative;z-index:1}
.cp-cta-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:#00baf2;margin-bottom:20px}
.cp-cta-section h2{font-size:36px;font-weight:600;color:#fff;margin-bottom:16px;letter-spacing:-0.4px;max-width:540px;margin-left:auto;margin-right:auto;line-height:1.22}
.cp-cta-section p{font-size:16px;color:rgba(255,255,255,0.66);margin-bottom:38px;max-width:440px;margin-left:auto;margin-right:auto;line-height:1.7}
.cp-btn-cta{display:inline-block;background:#1B3A6B;color:#fff;text-decoration:none;padding:15px 38px;border-radius:8px;font-size:16px;font-weight:700;letter-spacing:0.2px;transition:background 0.15s,transform 0.1s}
.cp-btn-cta:hover{background:#003A78;transform:translateY(-1px)}
.cp-btn-cta:active{transform:scale(0.99)}

@media(max-width:960px){
  .cp-testimonial-grid{grid-template-columns:repeat(2,1fr)}
  .cp-proof-grid{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media(max-width:640px){
  .cp-hero{padding:60px 24px}
  .cp-hero h1{font-size:30px}
  .cp-hero p{font-size:17px}
  .cp-testimonials,.cp-cta-section{padding:64px 24px}
  .cp-proof-strip{padding:48px 24px}
  .cp-testimonial-grid{grid-template-columns:1fr}
  .cp-proof-grid{grid-template-columns:1fr}
  .cp-section-heading{font-size:26px}
  .cp-cta-section h2{font-size:26px}
}

/* ============================================================
   CUSTOM RESEARCH PAGE  (prefix: cr-)
   Moved out of the page's inline <style> block + ~115 inline styles
   (the four preview mockups). The block's bare "h2" rule is scoped
   to .cr-section/.cr-cta-band so it can't affect other pages.
   Accessible colours applied: cyan #1B3A6B for buttons/text on light,
   #00baf2 on navy; the evidence-layer backgrounds were darkened so
   white text passes; faint labels strengthened.
   ============================================================ */
:root{--navy:#1B3A6B;--dark:#0d1b2e;--blue:#00baf2;--ink:#172033;--muted:#667085;--line:#dfe6f0;--soft:#eceff4;--white:#fff}

.cr-container{width:min(1180px,calc(100% - 48px));margin:0 auto}
.cr-hero{background:linear-gradient(160deg,var(--navy),#0d2550);color:#fff;padding:90px 0}
.cr-eyebrow{font-size:12px;letter-spacing:1.8px;text-transform:uppercase;color:#00baf2;font-weight:700;margin-bottom:16px;display:block}
.cr-hero h1{font-size:clamp(38px,5vw,58px);line-height:1.08;letter-spacing:-1px;max-width:780px;margin-bottom:20px}
.cr-hero p{font-size:19px;color:rgba(255,255,255,.74);max-width:660px;line-height:1.75}
.cr-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.cr-btn{text-decoration: none;display:inline-flex;padding:13px 24px;border-radius:8px;font-size:16px;font-weight:700;transition:background .15s,transform .1s}
.cr-btn-blue{background:#1B3A6B;color:#fff}
.cr-btn-blue:hover{background:#003A78;transform:translateY(-1px)}
.cr-btn-outline{border:1.5px solid rgba(255,255,255,.32);color:#fff}
.cr-btn-outline:hover{border-color:#00baf2;color:#00baf2}

.cr-section{padding:84px 0}
.cr-section.cr-soft{background:var(--soft)}
.cr-section.cr-dark{background:var(--dark);color:#fff}
.cr-kicker{font-size:12px;letter-spacing:1.7px;text-transform:uppercase;color:#1B3A6B;font-weight:700;margin-bottom:12px;display:block}
.cr-dark .cr-kicker{color:#00baf2}
.cr-section h2,.cr-cta-band h2{font-size:clamp(28px,4vw,42px);line-height:1.18;color:var(--navy);margin-bottom:18px;letter-spacing:-.6px}
.cr-dark h2{color:#fff}
.cr-lead{font-size:18px;color:var(--muted);max-width:720px;line-height:1.75}
.cr-dark .cr-lead{color:rgba(255,255,255,.68)}

.cr-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.cr-why-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:36px 32px}
.cr-why-card h3{font-size:19px;font-weight:600;color:#fff;margin-bottom:12px;line-height:1.3}
.cr-why-card p{font-size:16px;color:rgba(255,255,255,.68);line-height:1.75}

.cr-pv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:44px}
.cr-pv-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:box-shadow .22s,transform .22s}
.cr-pv-card:hover{box-shadow:0 10px 44px rgba(27,58,107,.13);transform:translateY(-3px)}
.cr-pv-preview{height:220px;overflow:hidden;position:relative;flex-shrink:0}
.cr-pv-body{padding:22px 28px 26px;border-top:1px solid var(--line)}
.cr-pv-body h3{font-size:17px;font-weight:600;color:var(--dark);margin-bottom:8px}
.cr-pv-body p{font-size:16px;color:var(--muted);line-height:1.75}

.cr-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.cr-layer{padding:32px;border-radius:14px;color:#fff;position:relative;overflow:hidden}
.cr-layer::after{content:'';position:absolute;bottom:-20px;right:-20px;width:80px;height:80px;background:rgba(255,255,255,.05);border-radius:50%}
.cr-layer:nth-child(1){background:#0d1b2e}
.cr-layer:nth-child(2){background:#16325c}
.cr-layer:nth-child(3){background:#1B3A6B}
.cr-layer-tag{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:14px;display:block}
.cr-layer h3{font-size:21px;font-weight:600;margin-bottom:10px}
.cr-layer p{color:rgba(255,255,255,.8);font-size:16px;line-height:1.7}

.cr-stage-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:48px}
.cr-stage-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 22px;cursor:pointer;transition:box-shadow .25s,transform .25s,border-color .25s;user-select:none;display:flex;flex-direction:column}
.cr-stage-card:hover{box-shadow:0 10px 40px rgba(27,58,107,.12);transform:translateY(-4px)}
.cr-stage-card.open{box-shadow:0 10px 40px rgba(27,58,107,.12);border-color:rgba(0,186,242,.35);transform:translateY(-4px)}
.cr-stage-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#1B3A6B;margin-bottom:14px;display:block}
.cr-stage-card h3{font-size:18px;font-weight:600;color:var(--dark);line-height:1.35;margin-bottom:auto;padding-bottom:20px}
.cr-stage-foot{border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:flex-end}
.cr-stage-toggle{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s,border-color .2s}
.cr-stage-card.open .cr-stage-toggle{background:#1B3A6B;border-color:#1B3A6B}
.cr-stage-toggle svg{width:10px;height:10px;stroke:#8a94a6;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s,transform .3s}
.cr-stage-card.open .cr-stage-toggle svg{stroke:#fff;transform:rotate(180deg)}
.cr-stage-body{max-height:0;overflow:hidden;transition:max-height .35s ease,padding-top .3s ease;font-size:16px;color:var(--muted);line-height:1.75}
.cr-stage-card.open .cr-stage-body{max-height:200px;padding-top:14px}

.cr-projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}
.cr-proj-pill{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px 22px;font-size:15px;font-weight:600;color:var(--ink);transition:border-color .2s,color .2s,box-shadow .2s}
.cr-proj-pill:hover{border-color:var(--blue);color:var(--navy);box-shadow:0 2px 12px rgba(27,58,107,.08)}
.cr-proj-pill-dot{display:inline-block;width:6px;height:6px;background:var(--blue);border-radius:50%;margin-right:10px;vertical-align:middle;flex-shrink:0}

.cr-bespoke-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.cr-bespoke-text p{font-size:17px;color:var(--muted);line-height:1.8;}
.cr-bespoke-features{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
.cr-bf{display:flex;align-items:flex-start;gap:14px}
.cr-bf-dot{width:8px;height:8px;background:var(--blue);border-radius:50%;margin-top:8px;flex-shrink:0}
.cr-bf p{font-size:16px;color:var(--muted);line-height:1.65}
.cr-bespoke-visual{background:linear-gradient(140deg,var(--navy),#0d2550);border-radius:16px;padding:48px;min-height:360px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.cr-bespoke-visual::before{content:'';position:absolute;top:-60px;right:-60px;width:240px;height:240px;background:rgba(0,186,242,.1);border-radius:50%}
.cr-bv-label{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.68)}
.cr-bv-stat{font-size:52px;font-weight:700;color:#fff;letter-spacing:-2px;line-height:1}
.cr-bv-stat span{color:#00baf2}
.cr-bv-desc{font-size:16px;color:rgba(255,255,255,.7);line-height:1.6;margin-top:8px}
.cr-bv-block2{margin-top:40px}
.cr-bv-scope{font-size:17px;font-weight:700;color:#fff;margin-top:8px;line-height:1.55}

.cr-ai-box{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center}
.cr-ai-note{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:28px;color:rgba(255,255,255,.72);font-size:16px;line-height:1.75}

.cr-cta-band{background:linear-gradient(155deg,var(--navy),#0d2550);padding:84px 0;text-align:center}
.cr-cta-band h2{color:#fff;margin-bottom:16px}
.cr-cta-band .cr-kicker{color:#00baf2;margin-bottom:14px}
.cr-cta-band p{font-size:18px;color:rgba(255,255,255,.7);max-width:560px;margin:0 auto 36px;line-height:1.75}

/* --- preview mockup 1: executive report --- */
.cr-pv-1{background:#eef2f9;padding:20px 20px 0}
.cr-doc{background:#fff;border-radius:10px 10px 0 0;box-shadow:0 3px 18px rgba(27,58,107,.12);overflow:hidden;height:100%}
.cr-doc-head{background:#1B3A6B;padding:9px 16px;display:flex;justify-content:space-between;align-items:center}
.cr-doc-head-title{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.cr-doc-head-date{font-size:9px;color:#00baf2}
.cr-doc-body{padding:16px 18px}
.cr-doc-title{font-size:16px;font-weight:700;color:#172033;line-height:1.35;margin-bottom:4px}
.cr-doc-meta{font-size:9px;color:#667085;margin-bottom:10px}
.cr-doc-rule{height:2px;background:linear-gradient(90deg,#1B3A6B,#00baf2);border-radius:2px;margin-bottom:14px;width:48%}
.cr-doc-line{height:7px;background:#edf1f8;border-radius:3px;margin-bottom:5px}
.cr-doc-line-last{margin-bottom:14px}
.cr-w95{width:95%}.cr-w86{width:86%}.cr-w82{width:82%}.cr-w78{width:78%}.cr-w74{width:74%}.cr-w65{width:65%}
.cr-doc-stat{background:#EFF4FA;border-left:3px solid #00baf2;border-radius:4px;padding:9px 13px;display:flex;align-items:center;gap:13px}
.cr-doc-stat-num{font-size:28px;font-weight:700;color:#1B3A6B;letter-spacing:-1px;line-height:1}
.cr-doc-stat-desc{font-size:9px;color:#667085;line-height:1.5}

/* --- preview mockup 2: presentation slide --- */
.cr-pv-2{background:linear-gradient(150deg,#1B3A6B,#0d2550);padding:20px 20px 0}
.cr-slide{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:10px 10px 0 0;padding:18px;height:100%;display:flex;flex-direction:column}
.cr-slide-kicker{font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#00baf2;margin-bottom:8px}
.cr-slide-title{font-size:16px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:13px}
.cr-slide-bullets{display:flex;flex-direction:column;gap:7px;flex:1}
.cr-slide-bullet{display:flex;align-items:center;gap:8px}
.cr-slide-dot{width:5px;height:5px;background:#00baf2;border-radius:50%;flex-shrink:0}
.cr-slide-bar{height:6px;background:rgba(255,255,255,.18);border-radius:3px}
.cr-slide-tiles{display:flex;gap:6px;margin-top:16px}
.cr-slide-tile{flex:1;height:28px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:4px}
.cr-slide-tile-active{flex:1;height:28px;background:rgba(255,255,255,.15);border:1.5px solid rgba(0,186,242,.5);border-radius:4px}

/* --- preview mockup 3: survey heatmap --- */
.cr-pv-3{background:#eef2f9;padding:14px 14px 0}
.cr-ht-head{background:#1B3A6B;padding:8px 14px;display:flex;align-items:center;gap:8px}
.cr-ht-head-title{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.cr-ht-head-meta{font-size:9px;color:#00baf2;margin-left:auto}
.cr-ht-body{padding:10px 12px}
.cr-ht-row{display:grid;grid-template-columns:102px repeat(5,1fr);gap:3px;margin-bottom:3px}
.cr-ht-body>.cr-ht-row:last-child{margin-bottom:0}
.cr-ht-col{font-size:8px;font-weight:700;color:#334;text-align:center;padding:2px}
.cr-ht-label{font-size:8px;color:#555;padding:4px 5px;display:flex;align-items:center;line-height:1.3}
.cr-ht-cell{border-radius:3px;padding:3px;text-align:center;font-size:9px;font-weight:700}
.cr-ht-hi{background:#c0ebcf;color:#085041}
.cr-ht-mid{background:#fef2cc;color:#8a6200}
.cr-ht-lo{background:#fdd8d8;color:#791f1f}

/* --- preview mockup 4: decision evidence engine --- */
.cr-pv-4{background:#F2F2EF;padding:14px 14px 0}
.cr-de{border-radius:10px 10px 0 0;overflow:hidden;box-shadow:0 3px 18px rgba(0,0,0,.11);height:100%;display:flex;flex-direction:column}
.cr-de-head{background:#1B3A6B;padding:8px 14px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.cr-de-head-title{font-size:9px;font-weight:700;color:#fff}
.cr-de-head-brand{font-size:9px;color:#00baf2}
.cr-de-tags{background:#EFF4FA;padding:6px 14px;display:flex;gap:5px;border-bottom:1px solid #D0D8E8;flex-shrink:0;flex-wrap:wrap}
.cr-de-tag{font-size:8px;font-weight:700;padding:2px 8px;border-radius:20px}
.cr-de-tag-1{background:#E6F1FB;color:#0C447C}
.cr-de-tag-2{background:#E1F5EE;color:#085041}
.cr-de-tag-3{background:#FAEEDA;color:#633806}
.cr-de-verdict{background:#1B3A6B;padding:10px 14px;flex-shrink:0}
.cr-de-vlabel{font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:#00baf2;margin-bottom:4px}
.cr-de-vtext{font-size:10px;color:#fff;line-height:1.55}
.cr-de-metrics{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #f0f0f0;background:#fff;flex-shrink:0}
.cr-de-metric{padding:8px 5px;text-align:center;border-right:1px solid #f5f5f5}
.cr-de-metric-last{border-right:none}
.cr-de-mname{font-size:7px;color:#667085;margin-bottom:2px}
.cr-de-mval{font-size:17px;font-weight:700;color:#1B3A6B}
.cr-de-insights{display:grid;grid-template-columns:1fr 1fr;flex:1}
.cr-de-opp{background:#EAF6F0;padding:10px 14px;border-right:1px solid #C8E6D8}
.cr-de-opp-label{font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#085041;margin-bottom:3px}
.cr-de-opp-text{font-size:9px;color:#085041;line-height:1.5}
.cr-de-bar{background:#FEF1F1;padding:10px 14px}
.cr-de-bar-label{font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#791F1F;margin-bottom:3px}
.cr-de-bar-text{font-size:9px;color:#791F1F;line-height:1.5}

@media(max-width:900px){
  .cr-why-grid,.cr-projects-grid{grid-template-columns:1fr}
  .cr-pv-grid{grid-template-columns:1fr}
  .cr-stage-grid{grid-template-columns:repeat(2,1fr)}
  .cr-layers{grid-template-columns:1fr}
  .cr-bespoke-grid{grid-template-columns:1fr}
  .cr-bespoke-visual{min-height:240px}
  .cr-ai-box{grid-template-columns:1fr}
}
@media(max-width:640px){
  .cr-container{width:calc(100% - 32px)}
  .cr-hero{padding:64px 0}
  .cr-hero p,.cr-lead{font-size:17px}
  .cr-section{padding:64px 0}
  .cr-stage-grid{grid-template-columns:1fr}
}

/* ============================================================
   SENSIA PAGE  (prefix: sn-)
   Moved out of ~382 inline styles + the page's inline <style>/<title>.
   The 5 example tabs repeat one structure, so tables/insight-cards/
   question-bars collapse into shared classes. Accessible colours applied
   (cyan #1B3A6B on light / #00baf2 on navy, greys #5F6673, faint whites
   strengthened). Near-identical eyebrow letter-spacings consolidated
   (sub-pixel, no visible change). Decorative dots/borders keep #00baf2.
   Tab switching is driven by showEx() in fmcg-new-script.js (external):
   panels toggle via inline display, so classes here set the initial
   state only.
   ============================================================ */
.sn-container{max-width:1100px;margin:0 auto}
.sn-eyb-muted{font-size:10px;font-weight:700;color:#5F6673;text-transform:uppercase;letter-spacing:0.13em;margin-bottom:0.75rem}
.sn-eyb-navy{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:0.75rem}
.sn-eyb-accent{font-size:10px;font-weight:700;color:#1B3A6B;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:0.75rem}
.sn-h2{font-size:30px;font-weight:700;color:#1B3A6B;margin-bottom:1rem;letter-spacing:-0.3px;line-height:1.2}
.sn-h2-ex{font-size:28px;font-weight:700;color:#1B3A6B;margin-bottom:0.75rem;letter-spacing:-0.3px;line-height:1.2}
.sn-h2-plat{font-size:30px;font-weight:700;color:#1B3A6B;margin-bottom:0.75rem;letter-spacing:-0.3px;line-height:1.2}
.sn-h2-white{font-size:30px;font-weight:700;color:#fff;margin-bottom:1rem;letter-spacing:-0.3px;line-height:1.2}
.sn-h2-who{font-size:30px;font-weight:700;color:#fff;margin-bottom:3rem;letter-spacing:-0.3px;line-height:1.2;max-width:560px}
.sn-h2-cta{font-size:32px;font-weight:700;color:#fff;margin-bottom:0.85rem;max-width:560px;letter-spacing:-0.3px}
.sn-lead{font-size:18px;color:#666;line-height:1.75}
.sn-lead-navy{font-size:18px;color:rgba(255,255,255,0.62);line-height:1.75}

.sn-btn-primary{background:#1B3A6B;color:#fff;padding:13px 28px;border-radius:7px;font-size:16px;font-weight:600;text-decoration:none}
.sn-btn-outline{border:1.5px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.8);padding:13px 28px;border-radius:7px;font-size:16px;font-weight:500;text-decoration:none}
.sn-btn-sm{display:inline-block;background:#1B3A6B;color:#fff;padding:11px 24px;border-radius:7px;font-size:16px;font-weight:600;text-decoration:none}
.sn-btn-arrow{display:inline-flex;align-items:center;gap:10px;background:#1B3A6B;color:#fff;padding:12px 24px;border-radius:7px;font-size:16px;font-weight:600;text-decoration:none}
.sn-btn-lg{background:#1B3A6B;color:#fff;padding:13px 30px;border-radius:7px;font-size:16px;font-weight:600;text-decoration:none;display:inline-block}
.sn-arrow{font-size:16px}

/* hero */
.sn-hero{background:#000;min-height:560px;display:flex;align-items:center;padding:6rem 4rem;position:relative;overflow:hidden}
.sn-hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(0,186,242,0.08) 0%,transparent 65%);pointer-events:none}
.sn-hero-split{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.sn-hero-eyebrow{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:1.5rem}
.sn-hero-title{font-size:52px;font-weight:700;color:#fff;line-height:1.05;margin-bottom:1.5rem;letter-spacing:-1px}
.sn-hero-sub{font-size:18px;color:rgba(255,255,255,0.62);max-width:520px;line-height:1.75;margin-bottom:2.5rem}
.sn-hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.sn-hero-viz-wrap{display:flex;justify-content:center;align-items:center}
.sn-hero-viz{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:1.75rem;width:100%;max-width:360px}
.sn-viz-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.sn-viz-brand{display:flex;align-items:center;gap:8px}
.sn-viz-dot{width:8px;height:8px;border-radius:50%;background:#00baf2}
.sn-viz-brand-label{font-size:11px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.1em}
.sn-viz-search{background:rgba(255,255,255,0.06);border-radius:8px;padding:0.75rem 1rem;margin-bottom:0.75rem}
.sn-viz-search-label{font-size:11px;color:rgba(255,255,255,0.6);margin-bottom:0.3rem}
.sn-viz-bar-track{height:3px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden}
.sn-viz-bar-fill{height:100%;width:100%;background:linear-gradient(90deg,#00baf2,#00baf2);border-radius:2px}
.sn-viz-list{margin-bottom:0.75rem}
.sn-viz-row{display:flex;align-items:center;gap:8px;margin-bottom:0.5rem}
.sn-viz-list .sn-viz-row:last-child{margin-bottom:0}
.sn-viz-sdot{width:6px;height:6px;border-radius:50%;background:#00baf2;flex-shrink:0}
.sn-viz-row-label{font-size:16px;color:rgba(255,255,255,0.7)}
.sn-viz-row-count{font-size:10px;color:rgba(255,255,255,0.55);margin-left:auto}
.sn-viz-final{border-top:1px solid rgba(255,255,255,0.08);padding-top:0.75rem;display:flex;align-items:center;gap:8px}
.sn-viz-final-label{font-size:16px;font-weight:600;color:#fff}

/* what it replaces */
.sn-replace{background:#fff;padding:5rem 4rem}
.sn-replace-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:0.9fr 1.45fr;gap:5rem;align-items:start}
.sn-replace-rows{border-top:1px solid #DDE3EA}
.sn-replace-row{display:grid;grid-template-columns:115px 1fr;gap:1.25rem;padding:1.6rem 0;border-bottom:1px solid #DDE3EA}
.sn-replace-tag{font-size:10px;font-weight:700;color:#1B3A6B;text-transform:uppercase;letter-spacing:0.12em;padding-top:3px}
.sn-replace-title{font-size:16px;font-weight:700;color:#1B3A6B;margin-bottom:0.4rem}
.sn-replace-desc{font-size:16px;color:#666;line-height:1.7}

/* how it works */
.sn-how{background:#1B3A6B;padding:5rem 4rem}
.sn-how-head{max-width:640px;margin-bottom:3rem}
.sn-how-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,0.14);border-bottom:1px solid rgba(255,255,255,0.14);margin-bottom:2.25rem}
.sn-how-col{padding:2rem 2rem 2rem 0}
.sn-how-col-mid{padding:2rem;border-left:1px solid rgba(255,255,255,0.14)}
.sn-how-col-end{padding:2rem 0 2rem 2rem;border-left:1px solid rgba(255,255,255,0.14)}
.sn-how-tag{font-size:11px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.75rem}
.sn-how-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:0.55rem}
.sn-how-desc{font-size:16px;color:rgba(255,255,255,0.62);line-height:1.7}

/* ===== FMCG Teal Utilities ===== */

.fh-teal {
    color: #00CFC8 !important;
}

.fh-teal-bg {
    background: #00CFC8 !important;
    color: #0F2347 !important;
}

.fh-teal-border {
    border-color: #00CFC8 !important;
}

.fh-teal-left-border {
    border-left: 3px solid #00CFC8 !important;
}

.fh-teal-top-border {
    border-top: 1px solid rgba(0,207,200,.3) !important;
}

.fh-teal-hover:hover {
    color: #00CFC8 !important;
}

.fh-teal-bg-hover:hover {
    background: #00A89F !important;
}

.fh-teal-gradient {
    background: linear-gradient(90deg, #00CFC8, #00A89F) !important;
}

.fh-teal-glow {
    background: radial-gradient(
        ellipse at 70% 50%,
        rgba(0,207,200,.08) 0%,
        transparent 65%
    ) !important;
}

/* example questions */
.sn-examples{background:#F5F6F8;padding:5rem 4rem}
.sn-examples-lead{font-size:18px;color:#666;line-height:1.75;margin-bottom:2.5rem;max-width:520px}
.sn-ex-box{background:#fff;border:1px solid #E8EAF0;border-radius:12px;overflow:hidden}
.sn-ex-tabs{display:flex;border-bottom:1px solid #E8EAF0;overflow-x:auto}
.sn-tab{padding:1rem 1.25rem;font-size:16px;font-weight:500;color:#5F6673;background:#fff;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.sn-tab-active{font-weight:600;color:#1B3A6B;border-bottom-color:#00CFC8}
.sn-ex-hidden{display:none}
.sn-ex-q{background:#1B3A6B;padding:1.25rem 2rem;display:flex;align-items:center;gap:1rem}
.sn-ex-q-tag{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.1em;flex-shrink:0}
.sn-ex-q-text{font-size:16px;color:#fff;font-style:italic;margin:0}
.sn-ex-body{padding:2rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.sn-ex-tlabel{font-size:11px;font-weight:700;color:#1B3A6B;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:1rem}
.sn-ex-tlabel-sm{margin-bottom:0.75rem}
.sn-ex-table{width:100%;border-collapse:collapse;font-size:16px}
.sn-ex-table-lg{font-size:16px;margin-bottom:1.25rem}
.sn-ex-table thead tr{border-bottom:2px solid #E8EAF0}
.sn-ex-table th{padding:6px 0;color:#1B3A6B;font-weight:600}
.sn-ex-table th:first-child{text-align:left}
.sn-ex-table th:last-child{text-align:right}
.sn-ex-table tbody tr{border-bottom:1px solid #F0F2F5}
.sn-ex-table tbody tr:last-child{border-bottom:none}
.sn-ex-table td{padding:7px 0;color:#444}
.sn-ex-table td:last-child{text-align:right;font-weight:600;/*color:#1B3A6B*/}
.sn-ex-insights{display:flex;flex-direction:column;gap:1rem}
.sn-ex-card{border-left:3px solid #00baf2;padding:0.75rem 1rem;background:#F9FAFB}
.sn-ex-card-barrier{border-left:3px solid #E05029;padding:0.75rem 1rem;background:#FFF8F6}
.sn-ex-card-title{font-size:11px;font-weight:700;color:#1B3A6B;margin-bottom:3px}
.sn-ex-card-title-barrier{font-size:11px;font-weight:700;color:#993C1D;margin-bottom:3px}
.sn-ex-card-text{font-size:16px;color:#666;line-height:1.55}
.sn-ex-foot{background:#F5F6F8;padding:0.85rem 2rem;border-top:1px solid #E8EAF0;display:flex;align-items:center;gap:1.5rem}
.sn-ex-foot-text{font-size:11px;color:#5F6673;margin:0}
.sn-ex-foot-strong{color:#1B3A6B}
.sn-ex-foot-sep{color:#ccc}

/* decision evidence engine */
.sn-dee{background:#fff;padding:5rem 4rem}
.sn-dee-head{max-width:680px;margin-bottom:3rem}
.sn-dee-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:3rem}
.sn-dee-input{background:#F5F6F8;border:1px solid #E3E7EE;border-radius:12px;padding:2rem}
.sn-dee-eyb{font-size:10px;font-weight:700;color:#5F6673;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:1.25rem}
.sn-dee-q{font-size:16px;font-weight:600;color:#1B3A6B;line-height:1.4;margin-bottom:1.5rem}
.sn-dee-metrics{display:flex;flex-direction:column;gap:10px}
.sn-dee-metric{background:#fff;border:1px solid #E3E7EE;border-radius:8px;padding:0.75rem 1rem;display:flex;justify-content:space-between;align-items:center}
.sn-dee-metric-label{font-size:16px;color:#555}
.sn-dee-metric-val{font-size:16px;font-weight:700;color:#1B3A6B}
.sn-dee-out{background:#1B3A6B;border-radius:12px;padding:2rem;display:flex;flex-direction:column;gap:1.25rem}
.sn-dee-out-label{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.5rem}
.sn-dee-out-verdict{font-size:16px;font-weight:600;color:#fff;line-height:1.5}
.sn-dee-out-block{border-top:1px solid rgba(255,255,255,0.12);padding-top:1.25rem}
.sn-dee-out-text{font-size:16px;color:rgba(255,255,255,0.78);line-height:1.6}
.sn-dee-out-note{font-size:11px;color:rgba(255,255,255,0.68);line-height:1.6}

/* who it is for */
.sn-who{background:#1B3A6B;padding:5rem 4rem}
.sn-who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sn-who-item{border-top:1px solid rgba(255,255,255,0.2);padding-top:1.5rem}
.sn-who-title{font-size:16px;font-weight:700;color:#00baf2;margin-bottom:0.6rem}
.sn-who-desc{font-size:16px;color:rgba(255,255,255,0.65);line-height:1.65}

/* how access works */
.sn-access{background:#fff;padding:5rem 4rem}
.sn-access-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.sn-access-p{font-size:16px;color:#666;line-height:1.75;margin-bottom:1.5rem}
.sn-access-p2{font-size:16px;color:#666;line-height:1.75;margin-bottom:2rem}
.sn-access-cards{display:flex;flex-direction:column;gap:14px}
.sn-access-card{border:1px solid #E3E7EE;border-radius:10px;padding:1.25rem 1.5rem;display:flex;gap:1rem;align-items:flex-start}
.sn-access-icon{width:36px;height:36px;background:#EBF4FD;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sn-access-title{font-size:16px;font-weight:600;color:#1B3A6B;margin-bottom:3px}
.sn-access-desc{font-size:16px;color:#666;line-height:1.6}

/* platform */
.sn-platform{background:#F5F6F8;padding:5rem 4rem}
.sn-platform-lead{font-size:18px;color:#666;line-height:1.75;max-width:620px;margin-bottom:3rem}
.sn-platform-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sn-platform-card{background:#fff;border:1px solid #E3E7EE;border-radius:10px;padding:1.5rem;border-top:3px solid #00baf2}
.sn-platform-title{font-size:16px;font-weight:700;color:#1B3A6B;margin-bottom:0.5rem}
.sn-platform-desc{font-size:16px;color:#666;line-height:1.6}

/* footer cta */
.sn-cta{background:#1B3A6B;padding:5rem 4rem}
.sn-cta-p{font-size:16px;color:rgba(255,255,255,0.62);margin-bottom:2rem;line-height:1.7;max-width:480px}

@media(max-width:768px){
  .sn-hero{padding:4rem 1.5rem}
  .sn-hero-split{grid-template-columns:1fr;gap:2.5rem}
  .sn-hero-title{font-size:32px}
  .sn-replace,.sn-how,.sn-examples,.sn-dee,.sn-who,.sn-access,.sn-platform,.sn-cta{padding-left:1.5rem;padding-right:1.5rem}
  .sn-replace-grid,.sn-access-grid,.sn-dee-grid,.sn-how-grid,.sn-who-grid,.sn-platform-grid,.sn-ex-body{grid-template-columns:1fr}
  .sn-replace-row{grid-template-columns:1fr;gap:0.45rem}
  .sn-how-col,.sn-how-col-mid,.sn-how-col-end{border-left:none;padding:1.5rem 0}
  .sn-how-col-mid,.sn-how-col-end{border-top:1px solid rgba(255,255,255,0.14)}
}

/* ============================================================
   LEGAL PAGES — Privacy Policy + Terms (prefix: lg-)
   Only the page-specific pieces are here: the shared hero, the
   minimal legal footer (scoped so it can't hit the main .footer),
   and small utilities that were inline. The body content still uses
   the shared .container/.section/.cookie-table/.entity-card/.toc/
   .rights-grid/.badge/.note-box/.warn-box classes from the base
   stylesheet. Accessible colours applied (cyan #00baf2 on navy).
   ============================================================ */
.lg-hero{background:#1B3A6B;padding:4rem 4rem 3rem}
.lg-hero-inner{max-width:1100px;margin:0 auto;text-align:center}
.lg-hero-eyebrow{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:0.75rem}
.lg-hero-title{font-size:38px;font-weight:700;color:#fff;line-height:1.15;letter-spacing:-0.4px;margin-bottom:1rem}
.lg-hero-sub{font-size:18px;color:rgba(255,255,255,0.62);max-width:560px;line-height:1.75;margin-left:auto;margin-right:auto}
.lg-section-top{margin-top:44px}
.lg-toc-top{margin-top:40px}
.lg-toc-h{font-size:16px;font-weight:700;color:#1B3A6B;margin-bottom:0.75rem}
.lg-entity-1{max-width:460px;margin:14px 0 20px}
.lg-entity-2{max-width:460px;margin:0 0 20px}
.lg-contact-name{color:#fff}
.lg-footer{background:#0d1b2e;color:rgba(255,255,255,0.6);text-align:center;padding:26px 40px;font-size:16px}
.lg-footer a{color:#00baf2;text-decoration:none;margin:0 10px}
.lg-footer .lg-fl{margin-bottom:9px}

/* ============================================================
   LOGIN PAGE  (prefix: lg-login-)
   Moved out of the page's two <style> blocks. Presentation classes
   renamed with lg-login- so generic names (.card/.main/.field) can't
   collide with the base stylesheet; WordPress form names/ids are
   unchanged. Button darkened for contrast; footer greys strengthened.
   ============================================================ */
.lg-login{min-height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center;padding:20px}
.lg-login-card{background:#fff;border-radius:14px;box-shadow:0 8px 44px rgba(27,58,107,.11);padding:50px 46px;width:100%;max-width:424px}
.lg-login-logo{height:48px;width:48px;display:block;border-radius:10px;margin-bottom:30px}
.lg-login-card h2{font-size:22px;font-weight:600;color:#1c3a6c;margin-bottom:7px;letter-spacing:-.3px}
.lg-login-sub{font-size:16px;color:#667085;margin-bottom:34px;line-height:1.65}
.lg-login-field{margin-bottom:20px}
.lg-login-field label{display:block;font-size:16px;font-weight:600;color:#333;margin-bottom:7px}
.lg-login-field input{width:100%;padding:11px 14px;border:1.5px solid #dfe6f0;border-radius:7px;font-size:16px;color:#222;background:#fafbfd;outline:none;transition:border-color .15s,box-shadow .15s;font-family:inherit}
.lg-login-field input:focus{border-color:#0098cc;box-shadow:0 0 0 3px rgba(0,186,242,.11);background:#fff}
.lg-login-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.lg-login-remember{display:flex;align-items:center;gap:8px;font-size:16px;color:#555;cursor:pointer;user-select:none}
.lg-login-remember input[type="checkbox"]{width:15px;height:15px;accent-color:#0098cc;cursor:pointer;flex-shrink:0}
.lg-login-forgot{font-size:16px;color:#1c3a6c;font-weight:600;transition:color .15s}
.lg-login-btn{width:100%;background:#1B3A6B;color:#fff;border:none;border-radius:7px;padding:13px 20px;font-size:16px;font-weight:700;cursor:pointer;transition:background .15s,transform .1s;font-family:inherit}
.lg-login-btn:hover{background:#003A78}
.lg-login-btn:active{transform:scale(.99)}
.lg-login-access{text-align:center;font-size:16px;color:#5F6673;margin-top:22px}
.lg-login-access a{color:#1c3a6c;font-weight:600;transition:color .15s}
.lg-login-footer{background:#0d1b2e;color:rgba(255,255,255,.6);text-align:center;padding:18px 40px;font-size:16px;line-height:1.9}
.lg-login-footer a{color:rgba(255,255,255,.7);transition:color .15s;margin:0 10px}
.lg-login-footer a:hover{color:#00baf2}

/* ============================================================
   MEDIA & EVENTS PAGE  (prefix: me-)
   Moved out of ~156 inline styles + the mobile <style>/stray <title>.
   News cards and event cards repeat, so they collapse to shared
   classes. All card classes are defined here (not relying on any
   external .news-card/.card-grid). Accessible colours applied
   (cyan #1B3A6B on light / #00baf2 on navy, greys #5F6673, faint
   whites strengthened). Tab switching still uses external showTab()
   in fmcg-new-script.js; classes set the initial state only.
   ============================================================ */
.me-container{max-width:1100px;margin:0 auto}
.me-intro-h2{font-size:22px;font-weight:700;color:#1B3A6B;line-height:1.25}

.me-section{background:#fff;padding:0 4rem 2rem}
.me-section-soft{background:#F5F6F8;padding:0 4rem 4rem}
.me-news-card{display:flex;flex-direction:column;gap:0.6rem;background:#fff;border:1px solid #E8EAF0;border-radius:10px;padding:1.5rem;text-decoration:none;height:100%;transition:box-shadow .2s,transform .2s}
.me-news-card:hover{box-shadow:0 8px 30px rgba(27,58,107,.1);transform:translateY(-2px)}
.me-card-head{display:flex;align-items:center;justify-content:space-between}
.me-date{font-size:10px;font-weight:700;color:#1B3A6B;text-transform:uppercase;letter-spacing:0.1em}
.me-source{font-size:10px;color:#5F6673}
.me-read{font-size:16px;color:#1B3A6B;font-weight:600;margin-top:auto}
.me-read-sm{font-size:16px;color:#1B3A6B;font-weight:600;margin-top:0.5rem}
.me-event-card-feat{border:2px solid #00baf2}
.me-date-navy{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.1em}
.me-status{font-size:10px;color:rgba(255,255,255,0.7)}
.me-cta-h2{font-size:26px;font-weight:700;color:#fff;margin-bottom:0.75rem;letter-spacing:-0.3px}

@media(max-width:768px){
  .me-hero{padding:4rem 1.5rem 0}
  .me-proof,.me-intro,.me-section,.me-section-soft,.me-cta{padding-left:1.5rem;padding-right:1.5rem}
  .me-card-grid,.me-intro-grid,.me-cta-grid{grid-template-columns:1fr}
  .me-proof-grid{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   MEDIA & EVENTS PAGE  (prefix: me-)
   Moved out of ~156 inline styles + the mobile <style>/<title>.
   Repeated news cards and event cards collapse into shared classes.
   Accessible colours applied (cyan #1B3A6B on light / #00baf2 on navy,
   greys #5F6673, faint white/#aaa strengthened). Tab switching uses the
   external showTab(); panels toggle via inline display, classes set the
   initial state. Body relies on the shared .news-card class from the
   base stylesheet for the media-card layout.
   ============================================================ */
.me-container{max-width:1100px;margin:0 auto}

/* hero + tabs */
.me-hero{background:#1B3A6B;padding:4rem 4rem 0}

/* intro (shared by both panels) */
.me-intro{background:#fff;padding:3.5rem 4rem 2rem}

/* card sections */
.me-sec{background:#fff;padding:0 4rem 2rem}
.me-sec-soft{background:#F5F6F8;padding:0 4rem 4rem}
.me-sec-label{font-size:10px;font-weight:700;color:#5F6673;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:1.5rem}
.me-sec-label-mt{margin-top:1.5rem}

/* news cards (inner elements; .news-card wrapper comes from base stylesheet) */
.me-card-top{display:flex;align-items:center;justify-content:space-between}
.me-card-read-05{margin-top:0.5rem}

/* event cards */
.me-event{background:#fff;border:1px solid #E8EAF0;border-radius:10px;overflow:hidden}
.me-event-hl{border:2px solid #00baf2}

/* muted note + link */
.me-note{font-size:16px;color:#5F6673;margin-top:1.5rem}

@media(max-width:768px){
  .me-hero,.me-proof,.me-intro,.me-sec,.me-sec-soft,.me-cta{padding-left:1.5rem;padding-right:1.5rem}
  .me-grid,.me-intro-grid{grid-template-columns:1fr}
  .me-proof-grid{grid-template-columns:repeat(2,1fr)}
  .me-cta-grid{grid-template-columns:1fr;gap:1.5rem}
}

/* ============================================================
   MEDIA / EVENTS PAGE  (prefix: me-)
   Moved out of ~156 inline styles + the mobile <style>/<title>.
   The repeated news cards and event cards collapse into shared
   classes. Tab switching uses external showTab() (panels toggle via
   inline display; classes set the initial state). Accessible colours
   applied (cyan #1B3A6B on light / #00baf2 on navy, greys #5F6673,
   faint whites strengthened); decorative card borders keep #00baf2.
   News-card container still uses the shared .news-card base class.
   ============================================================ */
.me-hero{background:#1B3A6B;padding:4rem 4rem 0}
.me-hero-inner{max-width:1100px;margin:0 auto}
.me-tab{padding:0.85rem 1.5rem;font-size:16px;font-weight:500;color:rgba(255,255,255,0.7);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer}
.me-tab-active{font-weight:600;color:#fff;border-bottom-color:#00baf2}
.me-proof-inner{max-width:1100px;margin:0 auto}
.me-proof-dash{color:#1B3A6B;font-size:18px;flex-shrink:0}

.me-featured{background:#fff;padding:0 4rem 2rem}
.me-section-inner{max-width:1100px;margin:0 auto}
.me-label-top{margin-top:1.5rem}
.me-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}

/* news cards (container uses shared .news-card) */
.me-nc-top{display:flex;align-items:center;justify-content:space-between}
.me-nc-source{font-size:10px;color:#6B7280}
.me-nc-title{font-size:16px;font-weight:600;color:#1B3A6B;line-height:1.45}
.me-nc-desc{font-size:16px;color:#666;line-height:1.6}
.me-nc-link{font-size:16px;color:#1B3A6B;font-weight:600;margin-top:auto}
.me-nc-link-sm{font-size:16px;color:#1B3A6B;font-weight:600;margin-top:0.5rem}
.me-note a{color:#1B3A6B;text-decoration:none;font-weight:500}

/* event cards */
.me-ev-card{background:#fff;border:1px solid #E8EAF0;border-radius:10px;overflow:hidden}
.me-ev-card-featured{border:2px solid #00baf2}
.me-ev-status{font-size:10px;color:rgba(255,255,255,0.7)}
.me-cta-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center}

@media(max-width:768px){
  .me-grid,.me-intro-grid,.me-cta-inner{grid-template-columns:1fr}
  .me-proof-grid{grid-template-columns:repeat(2,1fr)}
  .me-hero,.me-proof,.me-intro,.me-featured,.me-more,.me-cta{padding-left:1.5rem;padding-right:1.5rem}
  .me-hero-title{font-size:32px}
}

/* ============================================================
   MEDIA & EVENTS PAGE  (prefix: me-)
   Moved out of ~156 inline styles + the mobile <style>/<title>.
   The two tab panels toggle via external showTab() in
   fmcg-new-script.js (panels use inline display; classes set the
   initial state). Repeated news/event cards collapse into shared
   classes. `.news-card` wasn't in the supplied files, so it's
   rebuilt here as `.me-news-card`. Accessible colours applied
   (cyan #1B3A6B on light / #00baf2 on navy, greys #5F6673, faint
   whites strengthened). Decorative dashes are aria-hidden in HTML.
   ============================================================ */
.me-container{max-width:1100px;margin:0 auto}
.me-hero{background:#1B3A6B;padding:4rem 4rem 0}
.me-tab-active{color:#fff;font-weight:600;border-bottom-color:#00baf2}

.me-proof{background:white;padding:2rem 4rem}
.me-proof-text{font-size:16px;font-weight:600;color:#1B3A6B;line-height:1.4}

.me-intro{background:#fff;padding:3.5rem 4rem 2rem}
.me-eyebrow{font-size:10px;font-weight:700;color:#5F6673;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.75rem}
.me-intro-h{font-size:22px;font-weight:700;color:#1B3A6B;line-height:1.25}
.me-intro-p{font-size:18px;color:#555;line-height:1.8;padding-top:0.25rem}

.me-section-white{background:#fff;padding:0 4rem 2rem}
.me-section-grey{background:#F5F6F8;padding:0 4rem 4rem}
.me-label{font-size:10px;font-weight:700;color:#5F6673;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:1.5rem}
.me-label-mt{margin-top:1.5rem}

.me-news-card{display:flex;flex-direction:column;background:#fff;border:1px solid #E8EAF0;border-radius:10px;padding:1.25rem;text-decoration:none;transition:box-shadow .2s,border-color .2s,transform .2s}
.me-news-card:hover{box-shadow:0 8px 28px rgba(27,58,107,.1);border-color:#c6d4e8;transform:translateY(-2px)}
.me-nc-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}
.me-nc-date{font-size:10px;font-weight:700;color:#1B3A6B;text-transform:uppercase;letter-spacing:0.1em}
.me-nc-source{font-size:10px;color:#5F6673}
.me-nc-title{font-size:16px;font-weight:600;color:#1B3A6B;line-height:1.45;margin:0 0 0.5rem}
.me-nc-desc{font-size:16px;color:#666;line-height:1.6;margin:0 0 1rem}
.me-nc-read{font-size:16px;color:#1B3A6B;font-weight:600;margin-top:auto}
.me-nc-read-sm{margin-top:0.5rem}

.me-ev-card{background:#fff;border:1px solid #E8EAF0;border-radius:10px;overflow:hidden}
.me-ev-card-feat{border:2px solid #00baf2}
.me-ev-head{background:#1B3A6B;padding:0.75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}
.me-ev-date{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.1em}
.me-ev-status{font-size:10px;color:rgba(255,255,255,0.72)}
.me-ev-body{padding:1.25rem}
.me-ev-title{font-size:16px;font-weight:700;color:#1B3A6B;margin-bottom:0.4rem}
.me-ev-desc{font-size:16px;color:#666;line-height:1.6;margin-bottom:1rem}
.me-ev-link{font-size:16px;color:#1B3A6B;font-weight:600;text-decoration:none}

.me-cta{background:#1B3A6B;padding:4rem 4rem}
.me-cta-h{font-size:26px;font-weight:700;color:#fff;margin-bottom:0.75rem;letter-spacing:-0.3px}
.me-cta-p{font-size:16px;color:rgba(255,255,255,0.62);line-height:1.75;max-width:520px}

@media(max-width:768px){
  .me-card-grid{grid-template-columns:1fr}
  .me-proof-grid{grid-template-columns:repeat(2,1fr)}
  .me-hero,.me-proof,.me-intro,.me-section-white,.me-section-grey,.me-cta{padding-left:1.5rem;padding-right:1.5rem}
  .me-intro-grid,.me-cta-grid{grid-template-columns:1fr}
  .me-cta-grid{gap:1.5rem}
}

/* ============================================================
   MEDIA & EVENTS PAGE  (prefix: me-)
   Moved out of the page's inline <style> + inline styles. Reuses the
   shared .news-card class already in this stylesheet. Accessible
   colours applied (cyan #1B3A6B on light / #00baf2 on navy, greys/
   faint whites strengthened). Tab switching uses showTab() in
   fmcg-new-script.js (external); panels toggle via inline display, so
   these classes set the initial state only.
   ============================================================ */
.me-container{max-width:1100px;margin:0 auto}
.me-eyb{font-size:10px;font-weight:700;color:#5F6673;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.75rem}
.me-eyb-lg{font-size:10px;font-weight:700;color:#5F6673;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:1.5rem}
.me-eyb-lg2{font-size:10px;font-weight:700;color:#5F6673;text-transform:uppercase;letter-spacing:0.12em;margin-top:1.5rem;margin-bottom:1.5rem}
.me-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.me-hidden{display:none}

/* hero */
.me-hero{background:#1B3A6B;padding:4rem 4rem 0}
.me-hero-eyebrow{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:0.75rem}
.me-hero-title{font-size:38px;font-weight:700;color:#fff;line-height:1.15;letter-spacing:-0.4px;margin-bottom:1rem}
.me-hero-sub{font-size:18px;color:rgba(255,255,255,0.62);max-width:560px;line-height:1.75;margin-bottom:2.5rem}
.me-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,0.15)}
.me-tab{padding:0.85rem 1.5rem;font-size:16px;font-weight:500;color:rgba(255,255,255,0.72);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer}
.me-tab-active{font-weight:600;color:#fff;border-bottom-color:#00baf2}

/* proof strip */
.me-proof{background:#F5F6F8;padding:2rem 4rem}
.me-proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.me-proof-item{display:flex;align-items:center;gap:10px}
.me-proof-dash{color:#00baf2;font-size:18px;flex-shrink:0}
.me-proof-label{font-size:16px;font-weight:600;color:#1B3A6B;line-height:1.4}

/* intro (both panels) */
.me-intro{background:#fff;padding:3.5rem 4rem 2rem}
.me-intro-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1.4fr;gap:5rem;align-items:start}
.me-intro-title{font-size:22px;font-weight:700;color:#1B3A6B;line-height:1.25}
.me-intro-text{font-size:18px;color:#555;line-height:1.8;padding-top:0.25rem}

/* coverage cards */
.me-coverage{background:#fff;padding:0 4rem 2rem}
.me-more{background:#F5F6F8;padding:0 4rem 4rem}
.me-card-top{display:flex;align-items:center;justify-content:space-between}
.me-card-date{font-size:10px;font-weight:700;color:#1B3A6B;text-transform:uppercase;letter-spacing:0.1em}
.me-card-source{font-size:10px;color:#5F6673}
.me-card-title{font-size:18px;font-weight:600;color:#1B3A6B;line-height:1.45}
.me-card-desc{font-size:16px;color:#666;line-height:1.6}
.me-card-read{font-size:16px;color:#1B3A6B;font-weight:600;margin-top:auto}
.me-card-read-sm{font-size:16px;color:#1B3A6B;font-weight:600;margin-top:0.5rem}
.me-note{font-size:16px;color:#5F6673;margin-top:1.5rem}
.me-note-link{color:#1B3A6B;text-decoration:none;font-weight:500}

/* event cards */
.me-events{background:#fff;padding:0 4rem 2rem}
.me-event-card{background:#fff;border:1px solid #E8EAF0;border-radius:10px;overflow:hidden}
.me-event-card-feat{background:#fff;border:2px solid #00baf2;border-radius:10px;overflow:hidden}
.me-event-head{background:#1B3A6B;padding:0.75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}
.me-event-date{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.1em}
.me-event-status{font-size:10px;color:rgba(255,255,255,0.72)}
.me-event-body{padding:1.25rem}
.me-event-title{font-size:16px;font-weight:700;color:#1B3A6B;margin-bottom:0.4rem}
.me-event-desc{font-size:16px;color:#666;line-height:1.6;margin-bottom:1rem}
.me-event-link{font-size:16px;color:#1B3A6B;font-weight:600;text-decoration:none}

/* footer cta */
.me-cta{background:#1B3A6B;padding:4rem 4rem}
.me-cta-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center}
.me-cta-title{font-size:26px;font-weight:700;color:#fff;margin-bottom:0.75rem;letter-spacing:-0.3px}
.me-cta-text{font-size:16px;color:rgba(255,255,255,0.62);line-height:1.75;max-width:520px}
.me-cta-btn{background:#1B3A6B;color:#fff;padding:13px 28px;border-radius:7px;font-size:16px;font-weight:600;text-decoration:none;white-space:nowrap}

@media(max-width:768px){
  .me-card-grid{grid-template-columns:1fr}
  .me-proof-grid{grid-template-columns:repeat(2,1fr)}
  .me-intro-grid,.me-cta-grid{grid-template-columns:1fr}
  .me-hero,.me-proof,.me-intro,.me-coverage,.me-more,.me-events,.me-cta{padding-left:1.5rem;padding-right:1.5rem}
}

/* ============================================================
   RESOURCES PAGE  (prefix: rs-)
   Moved out of the page's inline styles + <style>/<title>. Card hover
   states moved from inline onmouseover/onmouseout to CSS :hover.
   Accessible colours applied (cyan #1B3A6B on light / #00baf2 on navy,
   greys #5F6673, faint whites strengthened). Keeps existing .web-card
   base class from the shared stylesheet.
   ============================================================ */
.rs-container{max-width:1100px;margin:0 auto}
.rs-eyb-navy{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:0.75rem}
.rs-eyb-light{font-size:10px;font-weight:700;color:#5F6673;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:1.5rem}
.rs-tag-navy{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.1em}
.rs-tag-light{font-size:10px;font-weight:700;color:#1B3A6B;text-transform:uppercase;letter-spacing:0.1em}
.rs-link{font-size:16px;color:#1B3A6B;font-weight:600}
.rs-link-nav{font-size:16px;color:#1B3A6B;font-weight:600;text-decoration:none}
.rs-link-navy{font-size:16px;color:#00baf2;font-weight:600}

/* hero */
.rs-hero{background:#1B3A6B;padding:4rem 4rem 3rem}
.rs-hero-h1{font-size:38px;font-weight:700;color:#fff;line-height:1.15;letter-spacing:-0.4px;margin-bottom:1rem}
.rs-hero-sub{font-size:18px;color:rgba(255,255,255,0.62);max-width:560px;line-height:1.75}

/* featured */
.rs-featured{background:#F5F6F8;padding:3rem 4rem}
.rs-feat-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:stretch}
.rs-feat-primary{text-decoration:none;background:#1B3A6B;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;min-height:280px;position:relative}
.rs-feat-primary-bg{position:absolute;inset:0;background:url('https://fmcggurus.com/wp-content/themes/fmcg/static/img/trends_2026_webinar_home-1200.jpg') center/cover no-repeat;background-image:image-set(url("https://fmcggurus.com/wp-content/themes/fmcg/static/img/trends_2026_webinar_home-1200.webp") type("image/webp"),url("https://fmcggurus.com/wp-content/themes/fmcg/static/img/trends_2026_webinar_home-1200.jpg") type("image/jpeg"));/*opacity:0.2*/}
.rs-feat-primary-content{position:relative;z-index:1;padding:2rem;display:flex;flex-direction:column;gap:1rem;flex:1}
.rs-feat-h2{font-size:22px;font-weight:700;color:#fff;line-height:1.25;flex:1}
.rs-feat-desc{font-size:16px;color:rgba(255,255,255,0.65);line-height:1.7}
.rs-feat-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:1rem;border-top:1px solid rgba(255,255,255,0.15)}
.rs-feat-badges{display:flex;gap:0.5rem}
.rs-badge{font-size:11px;background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.72);padding:3px 10px;border-radius:4px}
.rs-feat-stack{display:flex;flex-direction:column;gap:1rem}
.rs-feat-card{text-decoration:none;background:#fff;border:1px solid #E8EAF0;border-radius:10px;overflow:hidden;flex:1;display:flex;flex-direction:column;transition:border-color 0.15s}
.rs-feat-card:hover{border-color:#00baf2}
.rs-feat-thumb{height:90px;position:relative;background-size:cover;background-position:center;background-repeat:no-repeat}
.rs-feat-thumb-img{background-image:url('https://fmcggurus.com/wp-content/themes/fmcg/static/img/trends_2026_webinar_home-600.jpg');background-image:image-set(url("https://fmcggurus.com/wp-content/themes/fmcg/static/img/trends_2026_webinar_home-600.webp") type("image/webp"),url("https://fmcggurus.com/wp-content/themes/fmcg/static/img/trends_2026_webinar_home-600.jpg") type("image/jpeg"))}
.rs-feat-thumb-overlay{position:absolute;/*inset:0;*/background:rgba(27,58,107,0.55)}
.rs-feat-thumb-tag{position:absolute;bottom:8px;left:12px;font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.1em}
.rs-feat-thumb-grad{height:90px;background:linear-gradient(135deg,#1B3A6B 0%,#00baf2 100%);display:flex;align-items:center;padding:0 1.25rem}
.rs-feat-thumb-word{font-size:18px;font-weight:700;/*color:rgba(255,255,255,0.15);*/color:white;letter-spacing:-0.5px}
.rs-feat-card-body{padding:1rem;flex:1;display:flex;flex-direction:column;gap:0.4rem}
.rs-feat-card-title{font-size:18px;font-weight:700;color:#1B3A6B;line-height:1.35}
.rs-feat-card-desc{font-size:16px;color:#666;line-height:1.55;flex:1}

/* tabs */
.rs-tabs{background:#fff;padding:0 4rem;border-bottom:1px solid #E8EAF0}
.rs-tabs-inner{max-width:1100px;margin:0 auto;display:flex;overflow-x:auto}
.rs-tab{padding:1rem 1.5rem;font-size:16px;font-weight:500;color:#5F6673;background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.rs-tab-active{font-weight:600;color:#1B3A6B;border-bottom-color:#1B3A6B}

/* panels */
.rs-panel-section{background:#F5F6F8;padding:3rem 4rem}
.rs-panel-hidden{display:none}
.rs-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}

/* trend category cards */
.rs-cat{display:flex;flex-direction:column;align-items:flex-start;gap:0.75rem;padding:1.5rem;background:#fff;border:1px solid #E8EAF0;border-radius:10px;text-decoration:none;transition:border-color 0.15s}
.rs-cat:hover{border-color:#00baf2}
.rs-cat-bar{width:100%;height:6px;border-radius:3px;margin-bottom:0.25rem}
.rs-grad-hw{background:linear-gradient(90deg,#00baf2,#1B3A6B)}
.rs-grad-sus{background:linear-gradient(90deg,#1D9E75,#1B3A6B)}
.rs-grad-ind{background:linear-gradient(90deg,#D85A30,#1B3A6B)}
.rs-grad-conv{background:linear-gradient(90deg,#00baf2,#00baf2)}
.rs-grad-bfy{background:linear-gradient(90deg,#1D9E75,#00baf2)}
.rs-grad-top{background:linear-gradient(90deg,#1B3A6B,#00baf2)}
.rs-cat-title{font-size:16px;font-weight:700;color:#1B3A6B;line-height:1.35}
.rs-cat-desc{font-size:16px;color:#666;line-height:1.6}
.rs-cat-meta{display:flex;gap:1rem;font-size:11px;color:#5F6673;margin-top:auto;padding-top:0.5rem;border-top:1px solid #F0F2F5;width:100%}

/* report cards */
.rs-rep-card{text-decoration:none;background:#fff;border:1px solid #E8EAF0;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:border-color 0.15s}
.rs-rep-card:hover{border-color:#00baf2}
.rs-rep-thumb{height:120px;position:relative}
.rs-rep-thumb-img{background:url('https://fmcggurus.com/wp-content/themes/fmcg/static/img/trends_2026_webinar_home-600.jpg') center/cover no-repeat;background-image:image-set(url("https://fmcggurus.com/wp-content/themes/fmcg/static/img/trends_2026_webinar_home-600.webp") type("image/webp"),url("https://fmcggurus.com/wp-content/themes/fmcg/static/img/trends_2026_webinar_home-600.jpg") type("image/jpeg"))}
.rs-rep-thumb-grad1{background:linear-gradient(135deg,#1B3A6B 0%,#00baf2 100%);display:flex;align-items:center;justify-content:center}
.rs-rep-thumb-grad2{background:linear-gradient(135deg,#1D9E75 0%,#1B3A6B 100%);display:flex;align-items:center;justify-content:center}
.rs-thumb-overlay-60{position:absolute;inset:0;background:rgba(27,58,107,0.6)}
.rs-rep-thumb-label{position:absolute;bottom:10px;left:14px;font-size:10px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.08em}
.rs-rep-thumb-word{font-size:28px;font-weight:700;color:rgba(255,255,255,0.15);letter-spacing:-1px;text-align:center}
.rs-rep-thumb-word-sm{font-size:22px;font-weight:700;color:rgba(255,255,255,0.15);letter-spacing:-0.5px;text-align:center}
.rs-rep-body{padding:1.25rem;display:flex;flex-direction:column;gap:0.6rem;flex:1}
.rs-rep-title{font-size:16px;font-weight:700;color:#1B3A6B;line-height:1.35}
.rs-rep-desc{font-size:16px;color:#666;line-height:1.6;flex:1}
.rs-card-meta{display:flex;gap:0.75rem;font-size:11px;color:#5F6673;padding-top:0.5rem;border-top:1px solid #F0F2F5}
.rs-fmt{background:#E6F1FB;color:#00baf2;padding:2px 7px;border-radius:3px}

/* webinar cards (base .web-card kept from shared stylesheet) */
.rs-web-thumb{height:120px;position:relative;background-size:cover;background-position:center;background-repeat:no-repeat}
.rs-web-thumb-1{background-image:url('https://fmcggurus.com/wp-content/themes/fmcg/static/img/nutrileads_webinars_home_image.jpeg')}
.rs-web-thumb-2{background-image:url('https://fmcggurus.com/wp-content/themes/fmcg/static/img/trends_2026_webinar_home-600.jpg');background-image:image-set(url("https://fmcggurus.com/wp-content/themes/fmcg/static/img/trends_2026_webinar_home-600.webp") type("image/webp"),url("https://fmcggurus.com/wp-content/themes/fmcg/static/img/trends_2026_webinar_home-600.jpg") type("image/jpeg"))}
.rs-web-thumb-3{background-image:url('https://fmcggurus.com/wp-content/themes/fmcg/static/img/glp_alternative_webinar.jpeg')}
.rs-web-thumb-4{background-image:url('https://fmcggurus.com/wp-content/themes/fmcg/static/img/fmcg_nexira_web_home.jpg')}
.rs-web-thumb-5{background-image:url('https://fmcggurus.com/wp-content/themes/fmcg/static/img/nutrition_integrated_protein.jpeg')}
.rs-thumb-overlay-55{position:absolute;inset:0;background:rgba(27,58,107,0.55)}
.rs-web-date{position:absolute;bottom:10px;left:12px;font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.1em}
.rs-web-body{padding:1.25rem;display:flex;flex-direction:column;gap:0.6rem;flex:1}
.rs-web-partner{font-size:16px;color:#5F6673;font-weight:500}
.rs-web-title{font-size:16px;font-weight:700;color:#1B3A6B;line-height:1.35}
.rs-web-desc{font-size:16px;color:#666;line-height:1.6;flex:1}
.rs-web-meta{font-size:11px;color:#5F6673;padding-top:0.5rem;border-top:1px solid #F0F2F5}
.rs-web-dashed{border-style:dashed;background:#F9FAFB;justify-content:center}
.rs-web-more{padding:2rem;text-align:center;display:flex;flex-direction:column;gap:0.75rem;align-items:center}
.rs-web-more-title{font-size:16px;font-weight:600;color:#1B3A6B}
.rs-web-more-desc{font-size:16px;color:#5F6673;line-height:1.6}

/* article cards */
.rs-art-card{text-decoration:none;background:#fff;border:1px solid #E8EAF0;border-radius:10px;padding:1.5rem;display:flex;flex-direction:column;gap:0.6rem;transition:border-color 0.15s}
.rs-art-card:hover{border-color:#00baf2}
.rs-art-title{font-size:16px;font-weight:700;color:#1B3A6B;line-height:1.35}
.rs-art-desc{font-size:16px;color:#666;line-height:1.6;flex:1}
.rs-art-meta{font-size:11px;color:#5F6673;padding-top:0.5rem;border-top:1px solid #F0F2F5}
.rs-art-all{font-size:16px;color:#5F6673;margin-top:1.5rem}
.rs-art-all-link{color:#1B3A6B;text-decoration:none;font-weight:500}

/* newsletter */
.rs-nl{background:#F5F6F8;padding:5rem 4rem}
.rs-nl-inner{max-width:580px;margin:0 auto;text-align:center}
.rs-nl-h2{font-size:28px;font-weight:700;color:#1B3A6B;margin-bottom:1rem;letter-spacing:-0.3px}
.rs-nl-p{font-size:16px;color:#555;line-height:1.8;margin-bottom:2.5rem}
.rs-nl-card{background:#fff;border:1px solid #E8EAF0;border-radius:12px;padding:2.5rem}
.rs-hidden{display:none}
.rs-nl-row{display:flex;gap:0.75rem;margin-bottom:1rem}
#form-email{flex:1;padding:12px 16px;border:1px solid #D8DAE0;border-radius:7px;font-size:16px;font-family:inherit;outline:none;color:#1a1a2e}
.rs-nl-btn{background:#1B3A6B;color:#fff;border:none;padding:12px 24px;border-radius:7px;font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.rs-nl-privacy{font-size:16px;color:#5F6673;line-height:1.6}
.rs-nl-privacy-link{color:#5F6673;text-decoration:underline}
.rs-nl-success{display:none;margin-top:1.5rem;padding:1rem;background:#E5F5EE;border-radius:8px;border:1px solid #0F6E56}
.rs-nl-success-text{font-size:16px;color:#0F6E56;font-weight:600}

/* footer cta */
.rs-cta{background: linear-gradient(105deg, rgba(12, 26, 54, 0.96) 0%, rgba(12, 26, 54, 0.85) 55%, rgba(12, 26, 54, 0.55) 100%);padding:4rem 4rem}
.rs-cta-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center}
.rs-cta-h2{font-size:24px;font-weight:700;color:#fff;margin-bottom:0.75rem;letter-spacing:-0.3px}
.rs-cta-p{font-size:16px;color:rgba(255,255,255,0.62);line-height:1.75;max-width:480px}
.rs-btn{background:#06baf2;color:#fff;padding:13px 28px;border-radius:7px;font-size:16px;font-weight:600;text-decoration:none;white-space:nowrap}

@media(max-width:768px){
  .rs-hero,.rs-featured,.rs-panel-section,.rs-nl,.rs-cta{padding-left:1.5rem;padding-right:1.5rem}
  .rs-tabs{padding-left:1rem;padding-right:1rem}
  .rs-feat-grid,.rs-grid3,.rs-cta-grid{grid-template-columns:1fr}
}

.fh-ab-evo-flow {
    margin: 24px 0 28px;    
    font-size: 15px;
    /* font-weight: 700; */
    color: white;
    /* text-align: center; */
    /* line-height: 1.6; */
}

.fh-ab-evo-flow span {
    margin: 0 10px;
    color: #6b7280;
    font-weight: 500;
}
/* ============================================================
   CONTACT + NEWSLETTER (Contact Form 7 pages)
   Moved out of the per-page inline <style> blocks. The .wpcf7-*
   and .form-group/.intl-tel-input rules are global CF7 form fixes
   (both pages use them). .ct-eyebrow was the contact page's bare
   ".eyebrow" — renamed so it can't collide site-wide, and recoloured
   to the accessible cyan used elsewhere. Page-layout classes
   (.page-wrap, .left-col, .form-card, .logo-chip, .what-youll-see …)
   are assumed to already exist in fmcggurus.new.css.
   ============================================================ */
.wpcf7-form br{display:none}
.wpcf7-form p:empty{display:none}
.form-group input,.form-group select{width:100%!important}
.intl-tel-input{width:100%!important}
.wpcf7-textarea{width:100%!important;padding:5px;font-family:inherit;line-height:1.6;height:100px}
.cf-hidden{display:none}
.form-row-flush{margin-bottom:0}
.ct-eyebrow{font-size:10px;font-weight:750;color:#1B3A6B;text-transform:uppercase;letter-spacing:.14em;margin-bottom:1rem}
/* heading-order fix: newsletter "WHAT YOU WILL RECEIVE" promoted h3->h2.
   Reasonable label styling; if your existing ".what-youll-see h3" rule
   differs, copy its declarations onto ".what-youll-see h2". */
.what-youll-see h2{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#5F6673;margin-bottom:1rem}

/* ============================================================
   REPORT STORE PAGE — marketing chrome only  (prefix: rs-)
   Only the new nav/hero/upsell/footer-CTA are refactored here.
   The report-store engine keeps its own page-scoped <style> and
   <script> (they use generic selectors like label/.button/.panel
   and must NOT go in the shared sheet), so they are left intact.
   Accessible colours applied to the marketing chrome.
   ============================================================ */
.rs-hero{background:#1B3A6B;padding:3.5rem 4rem}
.rs-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.rs-eyebrow{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:0.75rem}
.rs-hero-title{font-size:34px;font-weight:700;color:#fff;line-height:1.15;letter-spacing:-0.4px;margin-bottom:1rem}
.rs-hero-sub{font-size:18px;color:rgba(255,255,255,0.62);line-height:1.75;margin-bottom:1.5rem}
.rs-hero-ctas{display:flex;gap:0.75rem;flex-wrap:wrap}
.rs-btn-primary{background:#1B3A6B;color:#fff;padding:10px 22px;border-radius:7px;font-size:16px;font-weight:600;text-decoration:none}
.rs-btn-outline{border:1.5px solid rgba(255,255,255,0.3);color:#fff;padding:10px 22px;border-radius:7px;font-size:16px;font-weight:500;text-decoration:none}
.rs-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.rs-stat-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:1.25rem}
.rs-stat-num{font-size:28px;font-weight:500;color:#00baf2;line-height:1;margin-bottom:0.3rem}
.rs-stat-rule{height:2px;background:#00baf2;width:24px;margin-bottom:0.5rem;opacity:0.6}
.rs-stat-label{font-size:16px;color:rgba(255,255,255,0.68);font-weight:500}

.rs-upsell{background:#1B3A6B;padding:1rem 4rem}
.rs-upsell-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.rs-upsell-text{font-size:16px;color:#fff;font-weight:500}
.rs-upsell-btn{background:#fff;color:#1B3A6B;padding:8px 20px;border-radius:6px;font-size:16px;font-weight:700;text-decoration:none;white-space:nowrap;flex-shrink:0}

.rs-cta{background: linear-gradient(105deg, rgba(12, 26, 54, 0.96) 0%, rgba(12, 26, 54, 0.85) 55%, rgba(12, 26, 54, 0.55) 100%);padding:4rem 4rem}
.rs-cta-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center}
.rs-cta-title{font-size:24px;font-weight:700;color:#fff;margin-bottom:0.75rem;letter-spacing:-0.3px}
.rs-cta-sub{font-size:16px;color:rgba(255,255,255,0.62);line-height:1.75;max-width:480px}
.rs-btn-cta{background:#1B3A6B;color:#fff;padding:13px 28px;border-radius:7px;font-size:16px;font-weight:600;text-decoration:none;white-space:nowrap}

@media(max-width:768px){
  .rs-hero,.rs-cta{padding-left:1.5rem;padding-right:1.5rem}
  .rs-upsell{padding-left:1.5rem;padding-right:1.5rem}
  .rs-hero-grid,.rs-cta-inner{grid-template-columns:1fr}
  .rs-hero-title{font-size:28px}
}

/* ============================================================
   SENSIA PAGE — revised sections (Ask·Analyse·Act, Connected
   platform, Final CTA). Moved out of the page's second inline
  */
.sn-aaa{background:#1B3A6B;padding:5rem 4rem}
.sn-aaa-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;gap:5rem;align-items:start}
.sn-aaa-steps{display:flex;flex-direction:column}
.sn-aaa-step{padding:1.5rem 0;border-top:1px solid rgba(255,255,255,0.1);display:flex;gap:1rem;align-items:flex-start}
.sn-aaa-step:last-child{border-bottom:1px solid rgba(255,255,255,0.1)}
.sn-aaa-num{font-size:10px;font-weight:700;color:#00baf2;flex-shrink:0;margin-top:4px;letter-spacing:0.05em}
.sn-aaa-step-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:0.4rem}
.sn-aaa-step p{font-size:16px;color:rgba(255,255,255,0.62);line-height:1.65}
.sn-aaa-sticky{position:sticky;top:80px;align-self:start}
.sn-aaa-eyebrow{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.75rem}
.sn-aaa-sticky h2{font-size:28px;font-weight:600;color:#fff;margin-bottom:1rem;letter-spacing:-0.3px;line-height:1.2}
.sn-aaa-sticky p{font-size:16px;color:rgba(255,255,255,0.62);line-height:1.75;margin-bottom:2rem}

.sn-plat{background:#1B3A6B;padding:5rem 4rem}
.sn-plat-inner{max-width:1100px;margin:0 auto}
.sn-plat-eyebrow{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.75rem}
.sn-plat-title{font-size:28px;font-weight:700;color:#fff;margin-bottom:1rem;letter-spacing:-0.3px;line-height:1.2}
.sn-plat-sub{font-size:16px;color:rgba(255,255,255,0.62);line-height:1.75;margin-bottom:2.5rem;max-width:560px}
.sn-plat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:2rem}
.sn-plat-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:1.5rem}
.sn-plat-card-featured{background:rgba(0,186,242,0.1);border-color:rgba(0,186,242,0.3)}
.sn-plat-tag{font-size:10px;font-weight:700;color:#00baf2;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.75rem;display:block}
.sn-plat-card h3{font-size:18px;font-weight:600;color:#fff;margin-bottom:0.5rem}
.sn-plat-card p{font-size:16px;color:rgba(255,255,255,0.72);line-height:1.6}
.sn-plat-foundation{background:rgba(255,255,255,0.04);border-radius:8px;padding:1rem 1.5rem;text-align:center;font-size:16px;color:rgba(255,255,255,0.7)}
.sn-plat-foundation strong{color:rgba(255,255,255,0.9);font-weight:500}

/* Final CTA — bg darkened from bright #00baf2 to #1B3A6B so white text
   passes contrast. To restore the bright-cyan endcap, change .sn-fcta
   background back to #00baf2 (it will flag on the contrast audit). */
.sn-fcta{background:#00CFC8;padding:5rem 4rem;text-align:center}
.sn-fcta h2{font-size:32px;font-weight:600;color:#fff;margin-bottom:1rem;letter-spacing:-0.4px;line-height:1.2}
.sn-fcta p{font-size:16px;color:#fff;margin-bottom:2.5rem;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.7}
.sn-btn-white{display:inline-block;background:#fff;color:#007A75;padding:14px 32px;border-radius:7px;font-size:16px;font-weight:700;text-decoration:none;transition:background 0.15s,transform 0.15s}
.sn-btn-white:hover{background:#f0f4ff;transform:translateY(-1px)}

@media(max-width:900px){
  .sn-aaa-inner{grid-template-columns:1fr;gap:2.5rem}
  .sn-aaa-sticky{position:static}
  .sn-plat-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .sn-aaa,.sn-plat,.sn-fcta{padding-left:1.5rem;padding-right:1.5rem}
  .sn-plat-grid{grid-template-columns:1fr}
}

/* ============================================================
   TYPOGRAPHY — REVIEW BUILD (minimum sizes, per 2026 spec)
   Desktop: body 18 · supporting/card 16 · nav 16 · buttons 16 ·
   tabs 16 · form 16 · footer links 16 · legal 14.
   Mobile:  body 17 · tabs 15. Line-height: body ~1.55, support ~1.5.
   Appended last so it enforces the floor without touching layout
   props (padding/margins unchanged). Decorative uppercase eyebrows/
   tags/counters and the tiny in-mockup UI text are intentionally
   left alone — raising 9–11px labels to 16 would break those designs.
   ============================================================ */

/* --- Standard body copy → 18 / 1.55 --- */
.fh-hero-sub,.fh-trusted-sub,.fh-help-sub,.fh-insights-lead,.fh-sample-lead,.fh-qa-a,.fh-qa-q,
.fh-ab-trust-lead,.fh-ab-trust-p,.fh-ab-evo-lead,.fh-ab-cta-sub,.fh-demo-desc,
.cr-why-card p,.cr-layer p,.cr-bv-desc,.cr-ai-note,
.sn-lead,.sn-lead-navy,.sn-hero-sub,.sn-examples-lead,.sn-plat-sub,.sn-plat-foundation,.sn-aaa-sticky p,.sn-aaa-step p,.sn-cta-p,
.fh-hw-dec-lead,.fh-hw-route-desc,.fh-hw-route-inc-text,
.cp-cta-section p,.footer-cta p,.contact-block p,.section p,.demo-point p{font-size:18px;line-height:1.55}

/* --- Supporting text / card descriptions → 16 / 1.5 --- */
.fh-feature-desc,.fh-mini-title,.fh-insights-note,.fh-sample-note,.fh-cred-quote-text,.fh-cred-quote-attr,
.cr-pv-body p,.cr-doc-title,.cr-slide-title,.cr-proj-pill,
.fh-ab-evo-text,.fh-ab-loc-name,.fh-ab-loc-meta,
.de-action p,.de-building p,.de-insight p,.de-note p,.de-brand,.de-title,.de-cta p,
.decision-card p,.audience-card p,.built-item p,.problem-card p,.how-card p,.q-card p,.right-card p,
.fh-hw-dec-p,.fh-hw-route-card-p,.fh-hw-route-card-p-lg,.fh-hw-tool-desc,.fh-hw-tool-title,.fh-hw-quote-text,.fh-hw-quote-attr,.fh-hw-frame-item,.fh-hw-route-card-link,.fh-hw-route-card-link2,
.cp-hero-trust,.cp-t-company,.cp-t-role,
.form-sub,.cookie-table,.cred-quote-attr{font-size:16px;line-height:1.5}

/* --- Navigation → 16 --- */
.nav-links a,.fh-nav-login{font-size:16px}

/* --- Buttons / CTA labels → 16 (padding untouched) --- */
.btn-primary,.btn-secondary,.fh-btn-cyan,.fh-btn-cyan-lg,.fh-btn-navy,.fh-btn-outline,.fh-btn-solid,.fh-feature-link,
.cr-btn,.de-cta-btn,.cp-btn-cta,.fh-ab-cta-btn,.fh-hw-route-btn,
.sn-btn-primary,.sn-btn-outline,.sn-btn-sm,.sn-btn-lg,.sn-btn-white,.sn-btn-arrow,
.me-cta-btn,.btn-blue,.btn-white{font-size:16px}

/* --- Tabs → 16 --- */
.sn-tab,.sn-tab-active,.me-tab,.me-tab-active{font-size:16px}

/* --- Forms → 16 --- */
.form-group label,.form-group input,.form-group select,.form-group textarea{font-size:16px}

/* --- Footer links → 16 · disclaimer/legal → 14 --- */
.footer-col a,.footer-brand p{font-size:16px}
.footer-bottom,.fh-footer-legal-link,.form-legal{font-size:11px}

/* --- Mobile: body 17, tabs 15 --- */
@media(max-width:600px){
  .fh-hero-sub,.fh-trusted-sub,.fh-help-sub,.fh-insights-lead,.fh-sample-lead,.fh-qa-a,.fh-qa-q,
  .fh-ab-trust-lead,.fh-ab-trust-p,.fh-ab-evo-lead,.fh-ab-cta-sub,.fh-demo-desc,
  .cr-why-card p,.cr-layer p,.cr-bv-desc,.cr-ai-note,
  .sn-lead,.sn-lead-navy,.sn-hero-sub,.sn-examples-lead,.sn-plat-sub,.sn-plat-foundation,.sn-aaa-sticky p,.sn-aaa-step p,.sn-cta-p,
  .fh-hw-dec-lead,.fh-hw-route-desc,.fh-hw-route-inc-text,
  .cp-cta-section p,.footer-cta p,.contact-block p,.section p,.demo-point p{font-size:17px}
  .sn-tab,.sn-tab-active,.me-tab,.me-tab-active{font-size:16px}
}

/* ============================================================
   COLOUR HIERARCHY (2026): navy = structure, blue #1B3A6B = brand
   actions (buttons/CTAs/links/final CTA), teal #00baf2 = Sensia
   analysis / evidence / completed output ONLY. The blanket action
   colour above is now blue; this block hands teal back to the
   Sensia signals Rooban listed — on LIGHT surfaces where dark teal
   reads correctly (tab underline, insight-card borders).
   ============================================================ */
.sn-ex-card{border-left-color:#00baf2}
/* featured Sensia platform card accent (sits on navy — border only,
   text stays light so it keeps contrast) */
.sn-plat-card-featured{background:rgba(13,112,153,0.12);border-color:rgba(13,112,153,0.5)}


/* ============================================================
   COLOUR SYSTEM (2026):  Navy #1B3A6B · FMCG Gurus blue #00baf2 · Teal #0D7099
   Navy = nav / dark sections / question headers / footer.
   Blue = buttons, CTAs, links, active nav, headline emphasis.
   Teal = Sensia evidence / analysis / output indicators ONLY (below).
   ============================================================ */
.sn-viz-dot,.sn-viz-sdot{background:#0D7099}
.sn-viz-final-label{color:#0D7099}
.sn-ex-card{border-left-color:#0D7099}
.sn-plat-card-featured{background:rgba(13,112,153,0.10);border-color:rgba(13,112,153,0.32)}
.sn-plat-card-featured .sn-plat-tag{color:#0D7099}

/* ============================================================
   BRAND COLOUR SYSTEM (v2_1)  —  navy / blue / teal
   Navy #1B3A6B  = nav, dark sections, question headers, footer
                   (already remapped from #1B3A6B/#1A335F above).
   Blue #00baf2  = buttons, CTAs, links, active nav, headline emphasis.
   Teal #0D7099  = Sensia analysis/evidence/output ONLY
                   (structured-answer indicator, active tab underline,
                    insight-card borders, featured platform card).
   ⚠ CONTRAST: white text on #00baf2 is ~2.3:1 (fails WCAG AA). This
     undoes the button side of the earlier contrast pass. Decide:
     keep brand blue (accept the audit hit) OR switch button text to
     near-black OR darken the button blue. Flagged for review.
   ============================================================ */

/* --- BLUE: action buttons / CTAs (background) --- */
.nav-cta,.btn-primary,.btn-cta,.de-cta-btn,
.fh-btn-cyan,.fh-btn-cyan-lg,.fh-ab-cta-btn,.cp-btn-cta,.cr-btn-blue,
.sn-btn-primary,.sn-btn-sm,.sn-btn-arrow,.sn-btn-lg,.me-cta-btn,
.fh-hw-route-btn,.btn-blue,.lg-login-btn{background:#00baf2;color:#fff}
.nav-cta:hover,.btn-primary:hover,.btn-cta:hover,.de-cta-btn:hover,
.fh-btn-cyan:hover,.fh-btn-cyan-lg:hover,.cr-btn-blue:hover,
.sn-btn-sm:hover,.me-cta-btn:hover,.btn-blue:hover,.lg-login-btn:hover{background:#009fd6}

/* --- BLUE: text links & "read more" links --- */
.fh-link-accent,.fh-feature-link,.how-card-link,
.rs-link,.rs-link-nav,.me-date,.me-card-date,.me-nc-date,.me-nc-read,.me-nc-read-sm,
.me-card-read,.me-card-read-sm,.me-read,.me-read-sm,.me-event-link,.me-nc-link,.me-nc-link-sm,
.fh-cred-quote-name,.fh-mini-tag-3,.fh-qa-num,.fh-demo-eyebrow,.de-num,.de-action span,
.cr-kicker,.sn-eyb-accent,.sn-replace-tag,.sn-ex-tlabel,.rs-tag-light{color:#00baf2}

/* --- BLUE: headline emphasis (accent spans, on dark → large text passes) --- */
.fh-hero-title-accent,.hero h1 em,.cr-bv-stat span,.sn-viz-brand-label{color:#00baf2}

/* --- TEAL: Sensia analysis / evidence / output indicators only --- */
.sn-ex-card{border-left-color:#0D7099}
.sn-viz-dot,.sn-viz-sdot{background:#0D7099}
.sn-viz-final-label{color:#0D7099}
.sn-plat-card-featured{border-color:#0D7099}
.sn-ex-q-tag,.sn-how-tag{color:#0D7099}


/* ============================================================
   FMCG Gurus — Solutions page styles
   Append to fmcggurus.new.css.
   ============================================================ */

.sr-container{width:min(1180px,calc(100% - 48px));margin:auto}

/* HERO */
.sr-hero{background:linear-gradient(145deg,#102A55,#1B3A6B);color:#fff;padding:88px 0 84px;position:relative;overflow:hidden}
.sr-hero:before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;background:rgba(41,168,224,.09);right:-230px;top:-300px}
.sr-hero:after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.03);left:-120px;bottom:-170px}
.sr-hero-inner{position:relative;z-index:1;max-width:850px}
.sr-eyebrow{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#29A8E0;font-weight:700;margin-bottom:16px}
.sr-hero h1{font-size:clamp(40px,5vw,62px);line-height:1.06;letter-spacing:-1.3px;margin-bottom:22px}
.sr-hero p{font-size:18px;color:rgba(255,255,255,.72);max-width:760px;line-height:1.6}
.sr-hero-note{margin-top:28px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.5)}

/* INTRO */
.sr-intro{padding:70px 0 30px;background:#fff}
.sr-kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#888;font-weight:700;margin-bottom:10px}
h2{font-size:clamp(28px,4vw,42px);line-height:1.16;color:#1B3A6B;letter-spacing:-.6px;margin-bottom:16px}
.sr-lead{font-size:17px;color:#667085;max-width:760px;line-height:1.6}

/* SELECTOR */
.sr-products{padding:34px 0 82px;background:#fff}
.sr-selector{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-bottom:24px}
.sr-product-tab{
  border:1px solid #DFE6F0;background:#fff;border-radius:10px;padding:16px 12px;
  text-align:left;cursor:pointer;min-height:104px;transition:.18s;
}
.sr-product-tab:hover{border-color:#29A8E0;transform:translateY(-2px)}
.sr-product-tab.active{background:#EEF8FD;border-color:#29A8E0;box-shadow:0 0 0 3px rgba(41,168,224,.08)}
.sr-tab-no{font-size:10px;color:#29A8E0;font-weight:700;letter-spacing:.1em;margin-bottom:8px}
.sr-tab-title{font-size:16px;line-height:1.3;font-weight:750;color:#1B3A6B}
.sr-tab-type{font-size:16px;line-height:1.35;color:#5F6B7A;margin-top:4px}

.sr-product-stage{background:#F4F7FB;border:1px solid #DFE6F0;border-radius:16px;padding:34px;min-height:590px}
.sr-panel{display:none}
.sr-panel.active{display:block}
.sr-panel-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:42px;align-items:center}
.sr-panel-copy h3{font-size:34px;color:#1B3A6B;line-height:1.15;margin-bottom:12px}
.sr-panel-copy .sr-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#29A8E0;margin-bottom:13px}
.sr-panel-copy>p{font-size:18px;color:#667085;line-height:1.6;margin-bottom:24px}
.sr-bullets{display:grid;gap:12px;margin-bottom:28px}
.sr-bullet{display:flex;gap:11px;align-items:flex-start}
.sr-dot{width:7px;height:7px;border-radius:50%;background:#29A8E0;margin-top:8px;flex-shrink:0}
.sr-bullet p{font-size:16px;line-height:1.5;color:#4E596C}
.sr-best-for{border-top:1px solid #DFE6F0;padding-top:18px;margin-top:8px}
.sr-best-for strong{display:block;color:#1B3A6B;font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px}
.sr-best-for span{font-size:16px;line-height:1.5;color:#667085}
.sr-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:25px}
.sr-btn{display:inline-flex;padding:11px 19px;border-radius:7px;font-size:16px;font-weight:700;text-decoration: none;}
.sr-btn-primary{background:#1B3A6B;color:#fff}
.sr-btn-secondary{background:#00baf2;border:1px solid #DFE6F0;color:white}

/* MOCKUPS */
.sr-mock{background:#fff;border:1px solid #D9E0EA;border-radius:13px;overflow:hidden;box-shadow:0 14px 45px rgba(27,58,107,.12)}
.sr-mock-top{background:#1B3A6B;padding:11px 15px;display:flex;justify-content:space-between;align-items:center;color:#fff}
.sr-mock-brand{font-size:11px;font-weight:700}.sr-mock-brand span{color:#8FD4F2}
.sr-mock-status{font-size:9.5px;color:rgba(255,255,255,.5)}
.sr-mock-body{padding:16px}
.sr-demo-note{font-size:10px;color:#8A6200;background:#FFF5D8;border:1px solid #F3D78B;border-radius:6px;padding:6px 9px;margin-bottom:12px}

/* Reports */
.sr-report-cover{display:grid;grid-template-columns:1fr .78fr;min-height:365px}
.sr-report-left{background:linear-gradient(155deg,#102A55,#1B3A6B);padding:30px;color:#fff}
.sr-report-left .sr-mini{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:#8FD4F2;margin-bottom:14px}
.sr-report-left h4{font-size:27px;line-height:1.18;margin-bottom:13px}
.sr-report-left p{font-size:16px;color:rgba(255,255,255,.6);line-height:1.65}
.sr-report-right{padding:25px;background:#fff}
.sr-statbox{background:#EFF4FA;border-left:4px solid #29A8E0;padding:14px;margin-bottom:12px}
.sr-statbox strong{font-size:29px;color:#1B3A6B}
.sr-line{height:7px;background:#EDF1F6;border-radius:8px;margin:8px 0}
.sr-line:nth-child(2n){width:82%}

/* Survey */
.sr-filters{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px;background:#EFF4FA;border-bottom:1px solid #D7E0EE}
.sr-filter{font-size:8.5px;background:#fff;border:1px solid #D8E0EB;border-radius:18px;padding:4px 8px;color:#4B5565}
.sr-heatmap{padding:14px}
.sr-hm-grid{display:grid;grid-template-columns:112px repeat(5,1fr);gap:4px}
.sr-hm-head{font-size:8px;font-weight:700;color:#667085;text-align:center;padding:4px}
.sr-hm-label{font-size:8px;color:#555;padding:6px}
.sr-hm-cell{font-size:9px;font-weight:750;text-align:center;border-radius:4px;padding:6px}
.g{background:#CDEEDC;color:#0F6E56}.a{background:#FFF0C2;color:#8A6200}.r{background:#FAD8D8;color:#8F2D2D}

/* Sensia */
.sr-chat{padding:14px;background:#F7F9FC}
.sr-msg{max-width:82%;padding:10px 12px;border-radius:9px;font-size:10.5px;line-height:1.5;margin-bottom:10px}
.user{background:#E8F4FB;color:#184E75;margin-left:auto}
.ai{background:#fff;border:1px solid #DFE6F0;color:#4E596C}
.sr-answer-card{background:#fff;border:1px solid #DFE6F0;border-radius:9px;padding:12px;margin-top:8px}
.sr-answer-card strong{font-size:10px;color:#1B3A6B}
.sr-answer-card p{font-size:9.5px;color:#667085;margin-top:4px}

/* Commercial */
.sr-commercial-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:10px}
.sr-scanner{border:1px solid #DFE6F0;border-radius:9px;overflow:hidden}
.sr-scanner-head{background:#EEF3F8;padding:9px;font-size:9px;font-weight:700;color:#1B3A6B}
.sr-score-row{display:grid;grid-template-columns:1.25fr .55fr .6fr;gap:5px;padding:8px;border-top:1px solid #EDF1F6;align-items:center}
.sr-score-row strong{font-size:9px;color:#334}
.sr-score{font-size:16px;font-weight:700;color:#1B3A6B}
.sr-action-pill{font-size:7.5px;font-weight:700;padding:3px 5px;border-radius:10px;text-align:center}
.sr-act{background:#DCF3E8;color:#0F6E56}.sr-build{background:#E7F0FB;color:#185FA5}.sr-fix{background:#FBE0E0;color:#8F2D2D}
.sr-deep{border:1px solid #DFE6F0;border-radius:9px;overflow:hidden}
.sr-deep-head{background:linear-gradient(145deg,#1B3A6B,#102A55);padding:12px;color:#fff}
.sr-deep-head small{font-size:7.5px;color:#8FD4F2;text-transform:uppercase}
.sr-deep-head h5{font-size:16px;margin-top:3px}
.sr-deep-metrics{display:grid;grid-template-columns:repeat(3,1fr)}
.sr-deep-metric{padding:10px;text-align:center;border-right:1px solid #EDF1F6}
.sr-deep-metric:last-child{border-right:0}
.sr-deep-metric span{font-size:7px;color:#8A94A6;display:block}
.sr-deep-metric strong{font-size:17px;color:#1B3A6B}
.sr-deep-blocks{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:10px}
.sr-deep-block{border:1px solid #DFE6F0;border-radius:6px;padding:8px}
.sr-deep-block b{font-size:8px;color:#1B3A6B;display:block;margin-bottom:2px}
.sr-deep-block p{font-size:7.5px;color:#667085}

/* DEE */
.sr-de-verdict{background:linear-gradient(145deg,#1B3A6B,#102A55);padding:16px;color:#fff}
.sr-de-verdict small{font-size:8px;text-transform:uppercase;color:#8FD4F2}
.sr-de-verdict h5{font-size:16px;line-height:1.45;margin-top:4px}
.sr-de-metrics{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #DFE6F0}
.sr-de-metric{padding:12px;text-align:center;border-right:1px solid #DFE6F0}
.sr-de-metric:last-child{border-right:0}
.sr-de-metric span{font-size:7px;color:#8A94A6;display:block}.sr-de-metric strong{font-size:18px;color:#1B3A6B}
.sr-de-insights{display:grid;grid-template-columns:1fr 1fr}
.sr-de-insight{padding:12px}.sr-de-insight:first-child{background:#EAF6F0}.sr-de-insight:last-child{background:#FEF1F1}
.sr-de-insight b{font-size:8px;text-transform:uppercase}.sr-de-insight p{font-size:8px;margin-top:3px}
.sr-de-insight:first-child{color:#0F6E56}.sr-de-insight:last-child{color:#8F2D2D}

/* Subscription */
.sr-bundle{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:14px}
.sr-bundle-card{border:1px solid #DFE6F0;border-radius:8px;padding:13px}
.sr-bundle-card b{font-size:10px;color:#1B3A6B;display:block;margin-bottom:4px}
.sr-bundle-card p{font-size:8.5px;color:#667085}

/* Research */
.sr-research-path{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;padding:14px}
.sr-research-step{border:1px solid #DFE6F0;border-radius:7px;padding:10px;text-align:center}
.sr-research-step span{font-size:7px;color:#29A8E0;font-weight:700;text-transform:uppercase}
.sr-research-step b{display:block;font-size:9px;color:#1B3A6B;margin-top:5px}
.sr-research-deliverables{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 14px}
.sr-research-deliverable{background:#EFF4FA;border-radius:6px;padding:10px;font-size:8.5px;color:#4E596C}

/* HOW TOGETHER */
.sr-together{padding:82px 0;/*background:#0D1B2E*/background: linear-gradient(105deg, rgba(12, 26, 54, 0.96) 0%, rgba(12, 26, 54, 0.85) 55%, rgba(12, 26, 54, 0.55) 100%);color:#fff}
.sr-together h2{color:#fff}
.sr-together .sr-lead{color:rgba(255,255,255,.62)}
.sr-journey{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px; margin-bottom:35px}
.sr-journey-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:24px}
.sr-journey-no{color:#29A8E0;margin-bottom:12px}
.sr-journey-card h3{font-size:18px;margin-bottom:8px}
.sr-journey-card p{font-size:16px;color:rgba(255,255,255,.56);line-height:1.55}

/* CTA */
.sr-cta-band{padding:78px 0;text-align:center;background:#fff}
.sr-cta-band p{font-size:18px;line-height:1.6;color:#667085;max-width:620px;margin:0 auto 26px}

@media(max-width:980px){
  .sr-selector{grid-template-columns:repeat(4,1fr)}
  .sr-panel-grid{grid-template-columns:1fr}
  .sr-journey{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .sr-container{width:calc(100% - 30px)}
  .nav{height:58px}.nav-links{display:none}.menu{display:block}
  .sr-hero{padding:62px 0}
  .sr-intro{padding:55px 0 22px}
  .sr-products{padding-bottom:60px}
  .sr-selector{grid-template-columns:1fr 1fr}
  .sr-product-stage{padding:22px 16px}
  .sr-commercial-wrap{grid-template-columns:1fr}
  .sr-journey{grid-template-columns:1fr}
  .sr-footer-grid{grid-template-columns:1fr 1fr}
  .sr-footer-bottom{flex-direction:column;gap:8px}
}
@media(max-width:460px){
  .sr-selector{grid-template-columns:1fr}
  .sr-footer-grid{grid-template-columns:1fr}
}
/* ---- Solutions page: classes replacing former inline styles ---- */

/* Illustrative mockup images */
.sr-mock-img{display:block;width:100%;height:auto}

/* Subscription: "Need one report only?" note */
.sr-bundle-foot{padding:0 14px 14px}
.sr-bundle-note{background:#EFF4FA;border:1px solid #DDE5EF;border-radius:8px;padding:13px}
.sr-bundle-note b{display:block;font-size:9px;color:#29A8E0;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px}
.sr-bundle-note p{font-size:10px;color:#4E596C}

/* Sensia AI example panel (reusable) */
.sr-ex-wrap{background:#fff;overflow:hidden}
.sr-ex-q{background:#1B3A6B;padding:1.25rem 2rem;display:flex;align-items:center;gap:1rem}
.sr-ex-q span{font-size:10px;font-weight:700;color:#29A8E0;text-transform:uppercase;letter-spacing:.1em;flex-shrink:0}
.sr-ex-q p{font-size:16px;color:#fff;font-style:italic;margin:0}
.sr-ex-body{padding:2rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.sr-ex-h{font-size:11px;font-weight:700;color:#29A8E0;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}
.sr-ex-table{width:100%;border-collapse:collapse;font-size:16px}
.sr-ex-table thead tr{border-bottom:2px solid #E8EAF0}
.sr-ex-table th{padding:6px 0;color:#1B3A6B;font-weight:600;text-align:left}
.sr-ex-table th:last-child{text-align:right}
.sr-ex-table tbody tr{border-bottom:1px solid #F0F2F5}
.sr-ex-table tbody tr:last-child{border-bottom:0}
.sr-ex-table td{padding:7px 0;color:#444}
.sr-ex-table td:last-child{text-align:right;font-weight:600;color:#1B3A6B}
.sr-ex-cards{display:flex;flex-direction:column;gap:1rem}
.sr-ex-card{border-left:3px solid #29A8E0;padding:.75rem 1rem;background:#F9FAFB}
.sr-ex-card b{display:block;font-size:11px;font-weight:700;color:#1B3A6B;margin-bottom:3px}
.sr-ex-card p{font-size:16px;color:#5A5A5A;line-height:1.55}
.sr-ex-card-barrier{border-left-color:#E05029;background:#FFF8F6}
.sr-ex-card-barrier b{color:#993C1D}

/* Custom Research flow mock */
.sr-mock-dark{background:linear-gradient(155deg,#1B3A6B,#0D2550);border-color:#1B3A6B}
.sr-flow{padding:38px;color:#fff;min-height:350px;display:flex;flex-direction:column;justify-content:center}
.sr-flow-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#29A8E0;font-weight:700;margin-bottom:14px}
.sr-flow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sr-flow-step{border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:20px}
.sr-flow-step span{font-size:10px;color:#29A8E0;font-weight:700}
.sr-flow-step h4{font-size:17px;margin:8px 0 6px}
.sr-flow-step p{font-size:11px;color:rgba(255,255,255,.6)}

/* Kicker colour on the dark "work together" section (was inline) */
.sr-together .sr-kicker{color:#29A8E0}

/* Responsive: collapse the example + flow grids on small screens */
@media(max-width:700px){
  .sr-ex-body{grid-template-columns:1fr}
  .sr-flow-grid{grid-template-columns:1fr}
}

/* ---- Footer stragglers (merge into shared footer section; safe to omit if already present) ---- */
.footer-logo{height:48px;width:48px;display:block;border-radius:10px}
.footer-bottom{font-size:11px}
.footer-bottom a{color:rgba(255,255,255,.55)}

/* ---- Mobile typography (Rooban targets: body 17px, supporting 16px, tabs 15-16px) ---- */
@media(max-width:700px){
  .sr-hero p,.sr-lead,.sr-panel-copy>p,.sr-cta-band p{font-size:17px;line-height:1.55}
  .sr-bullet p,.sr-best-for span,.sr-journey-card p,.sr-hero-note{font-size:16px;line-height:1.5}
  .sr-tab-title{font-size:16px}
  .sr-tab-type{font-size:16px}
  .sr-btn{font-size:16px}
}

.footer-legal-bar .legal-text { font-size: 14px }
.footer-legal{padding:1.5rem 1.5rem; text-align: center;}

/* base body copy: 18 desktop / 17 mobile (agreed standard) */
@media(max-width:600px){body{font-size:17px}}




/* ── HERO ── */
.dee-hero{background:#1B3A6B;padding:5rem 4rem 4.5rem;position:relative;overflow:hidden}
.dee-hero::before{content:'';position:absolute;right:-120px;top:-120px;width:620px;height:620px;border-radius:50%;background:rgba(41,168,224,0.06);pointer-events:none}
.dee-hero-inner{position:relative;z-index:1;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;gap:4rem;align-items:center}
.dee-hero-product{font-size:10px;font-weight:700;color:rgba(255,255,255,0.38);text-transform:uppercase;letter-spacing:0.15em;margin-bottom:0.6rem}
.dee-hero h1{font-size:40px;font-weight:600;color:#fff;line-height:1.2;margin-bottom:.4rem;letter-spacing:0}
.dee-hero-full-name{font-size:18px;color:#29A8E0;font-weight:500;margin-bottom:1.35rem;font-style:italic}
.dee-hero-desc{font-size:18px;color:rgba(255,255,255,.68);line-height:1.75;margin-bottom:2rem;max-width:480px}
.dee-hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.dee-btn-primary{background:#29A8E0;color:#fff;padding:12px 26px;border-radius:7px;font-size:16px;font-weight:500;text-decoration:none;display:inline-block;transition:background .15s}
.dee-btn-primary:hover{background:#1d94c9}
.dee-btn-ghost{background:transparent;color:rgba(255,255,255,.85);border:1.5px solid rgba(255,255,255,.3);padding:12px 26px;border-radius:7px;font-size:16px;font-weight:500;text-decoration:none;display:inline-block;transition:border-color .15s,color .15s}
.dee-btn-ghost:hover{border-color:#29A8E0;color:#29A8E0}
 
/* ── HERO MOCKUP (real decision card) ── */
.dee-hero-mockup{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 44px rgba(0,0,0,0.24)}
.dee-mc-head{background:#0F2347;padding:0.7rem 1.15rem;display:flex;align-items:center;justify-content:space-between}
.dee-mc-head-brand{font-size:11px;font-weight:700;color:#fff;letter-spacing:0.01em}
.dee-mc-head-sub{font-size:9px;color:rgba(255,255,255,0.4)}
.dee-mc-tagrow{display:flex;flex-wrap:wrap;gap:4px;padding:0.6rem 1.15rem;background:#F9FAFB;border-bottom:1px solid #E8EAF0}
.dee-mc-tag{font-size:9px;font-weight:600;padding:2px 7px;border-radius:3px;border:1px solid}
.dee-tg-i{background:#EEF7FD;border-color:#C8E8F7;color:#1B6BB0}
.dee-tg-b{background:#EAF7F6;border-color:#BEE8E5;color:#0A7C77}
.dee-tg-m{background:#F2F0FA;border-color:#DAD5EE;color:#5B4CA8}
.dee-tg-f{background:#FDF3EC;border-color:#F3DCC9;color:#9A5B23}
.dee-mc-body{padding:0.95rem 1.15rem;display:flex;flex-direction:column;gap:0.75rem}
.dee-mc-lbl{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:#29A8E0;margin-bottom:4px}
.dee-mc-verdict{background:#EBF6FC;border-left:3px solid #29A8E0;padding:0.7rem 0.9rem;border-radius:0 6px 6px 0}
.dee-mc-verdict p{font-size:11.5px;color:#1B3A6B;font-weight:600;line-height:1.55}
.dee-mc-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.dee-mc-metric{background:#F9FAFB;border:1px solid #E8EAF0;border-radius:6px;padding:0.5rem 0.4rem;text-align:center}
.dee-mc-metric-val{font-size:15px;font-weight:700;color:#1B3A6B;line-height:1.1}
.dee-mc-metric-lbl{font-size:7.5px;color:#888;line-height:1.3;margin-top:2px}
.dee-mc-metric-sub{font-size:6.5px;color:#bbb;line-height:1.3;margin-top:1px}
.dee-mc-two{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dee-mc-panel{border-radius:6px;padding:0.55rem 0.7rem;border:1px solid}
.dee-mc-panel.dee-opp{background:#F4FAFE;border-color:#D6EAF7}
.dee-mc-panel.dee-barr{background:#FFF8F6;border-color:#F5DDD5}
.dee-mc-panel-lbl{font-size:7.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:2px}
.dee-mc-panel p{font-size:9.5px;color:#555;line-height:1.5}
.dee-mc-proof{border-top:1px solid #F0F2F5;padding-top:0.6rem}
.dee-mc-proof-row{display:flex;align-items:flex-start;gap:6px;margin-bottom:5px}
.dee-mc-rank{width:14px;height:14px;border-radius:3px;background:#1B3A6B;color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.dee-mc-proof-txt{flex:1}
.dee-mc-proof-metric{font-size:10px;color:#1a1a2e;font-weight:600;line-height:1.4}
.dee-mc-proof-src{font-size:8px;color:#aaa;line-height:1.4}
.dee-mc-badge{font-size:7px;font-weight:700;padding:1px 5px;border-radius:3px;flex-shrink:0;letter-spacing:0.04em;margin-top:2px}
.dee-bd-direct{background:#E6F6EC;color:#17703C;border:1px solid #BFE6CE}
.dee-bd-cat{background:#FEF6E6;color:#8A5D0B;border:1px solid #F2DFB8}
 
/* ── WHAT DEE DOES ── */
.dee-what-dee{background:#fff;padding:5rem 4rem}
.dee-what-dee-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.dee-section-eyebrow{font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#29A8E0;margin-bottom:0.75rem;display:block}
.dee-what-dee h2{font-size:32px;font-weight:600;color:#1B3A6B;line-height:1.2;margin-bottom:1.25rem;letter-spacing:-0.3px}
.dee-what-dee p{font-size:15px;color:#555;line-height:1.85;margin-bottom:1.2rem}
.dee-what-dee p:last-of-type{margin-bottom:0}
.dee-what-dee p.dee-emphasis{font-size:16px;color:#1B3A6B;font-weight:600}
.dee-key-points{display:flex;flex-direction:column;gap:1rem}
.dee-key-point{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 1.25rem;background:#F9FAFB;border-radius:10px;border:1px solid #E8EAF0}
.dee-kp-icon{width:36px;height:36px;border-radius:8px;background:#1B3A6B;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dee-kp-icon svg{width:16px;height:16px;stroke:#29A8E0;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dee-kp-title{font-size:13px;font-weight:700;color:#1B3A6B;margin-bottom:0.2rem}
.dee-kp-text{font-size:13px;color:#666;line-height:1.6}
 
.dee-section-header{text-align:center;max-width:620px;margin:0 auto 3rem}
.dee-section-header h2{font-size:30px;font-weight:600;color:#1B3A6B;line-height:1.2;margin-bottom:0.85rem;letter-spacing:-0.3px}
.dee-section-header p{font-size:15px;color:#666;line-height:1.75}
 
/* ── HOW IT WORKS ── */
.dee-how-works{background:#fff;padding:5rem 4rem}
.dee-how-works-inner{max-width:1100px;margin:0 auto}
.dee-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.dee-step-card{background:#F9FAFB;border-radius:12px;border:1px solid #E8EAF0;padding:2rem;display:flex;flex-direction:column}
.dee-step-num{font-size:10.5px;font-weight:700;color:#29A8E0;letter-spacing:0.1em;margin-bottom:0.75rem;display:block}
.dee-step-title{font-size:17px;font-weight:700;color:#1B3A6B;margin-bottom:0.6rem;line-height:1.25}
.dee-step-text{font-size:13.5px;color:#555;line-height:1.7;flex:1}
.dee-step-input{margin-top:1rem;padding:0.85rem;background:#fff;border:1px solid #E8EAF0;border-radius:7px}
.dee-step-input-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:#aaa;margin-bottom:0.5rem}
.dee-step-input-note{font-size:11.5px;color:#777;line-height:1.55;margin-bottom:0.55rem;font-style:italic}
.dee-step-input-items{display:flex;flex-wrap:wrap;gap:5px}
.dee-step-tag{font-size:11px;color:#1B3A6B;background:#E8F4FB;border:1px solid #C7E0F0;padding:2px 8px;border-radius:4px;font-weight:500}
.dee-step-field{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;padding:4px 0;border-bottom:1px solid #F0F2F5}
.dee-step-field:last-child{border-bottom:none}
.dee-step-field-k{color:#888}
.dee-step-field-v{color:#1B3A6B;font-weight:600}
 
/* ── EXAMPLE OUTPUT ── */
.dee-output-section{background:#1B3A6B;padding:5rem 4rem}
.dee-output-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr;gap:4rem;align-items:center}
.dee-output-left h2{font-size:30px;font-weight:600;color:#fff;line-height:1.2;margin-bottom:1rem;letter-spacing:-0.3px}
.dee-output-left p{font-size:15px;color:rgba(255,255,255,0.62);line-height:1.8;margin-bottom:1.75rem}
.dee-output-points{display:flex;flex-direction:column;gap:0.85rem}
.dee-output-point{display:flex;gap:10px;align-items:flex-start}
.dee-op-dot{width:6px;height:6px;border-radius:50%;background:#29A8E0;flex-shrink:0;margin-top:10px}
.dee-op-text{font-size:16px;color:rgba(255,255,255,0.7);line-height:1.6}
.dee-oc-caption{font-size:10.5px;color:rgba(255,255,255,0.3);text-align:center;margin-top:0.75rem}
 
/* Compact decision card extract */
.dee-dcard{background:#fff;border-radius:11px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,0.16);max-width:340px;margin:0 auto}
.dee-dc-head{background:#0F2347;border-bottom:2px solid #29A8E0;padding:0.55rem 0.9rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.35rem}
.dee-dc-head-brand{font-size:9.5px;font-weight:700;color:#fff}
.dee-dc-head-sub{font-size:7.5px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.08em}
.dee-dc-tagrow{display:flex;flex-wrap:wrap;gap:4px;padding:0.5rem 0.9rem;background:#F9FAFB;border-bottom:1px solid #E8EAF0}
.dee-dc-tag{font-size:7.5px;font-weight:600;padding:2px 6px;border-radius:4px;border:1px solid}
.dee-dc-body{padding:0.9rem;display:flex;flex-direction:column;gap:0.7rem}
.dee-dc-lbl{font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:#29A8E0;margin-bottom:3px}
.dee-dc-verdict{background:#EBF6FC;border-left:3px solid #29A8E0;padding:0.6rem 0.7rem;border-radius:0 5px 5px 0}
.dee-dc-verdict p{font-size:9.5px;color:#1B3A6B;font-weight:600;line-height:1.55}
.dee-dc-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.dee-dc-metric{background:#F9FAFB;border:1px solid #E8EAF0;border-radius:5px;padding:0.4rem 0.3rem;text-align:center}
.dee-dc-metric-val{font-size:13px;font-weight:700;color:#1B3A6B;line-height:1.1}
.dee-dc-metric-lbl{font-size:6.5px;color:#666;line-height:1.25;margin-top:2px;font-weight:500}
.dee-dc-metric-sub{font-size:5.5px;color:#aaa;line-height:1.2;margin-top:1px}
.dee-dc-two{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dee-dc-panel{border-radius:5px;padding:0.5rem 0.6rem;border:1px solid}
.dee-dc-panel.dee-opp{background:#F4FAFE;border-color:#D6EAF7}
.dee-dc-panel.dee-barr{background:#FFF8F6;border-color:#F5DDD5}
.dee-dc-panel-lbl{font-size:6.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:2px}
.dee-dc-panel p{font-size:8.5px;color:#555;line-height:1.5}
.dee-dc-panel strong{color:#1B3A6B;font-weight:700}
.dee-dc-proof{border:1px solid #E8EAF0;border-radius:5px;overflow:hidden}
.dee-dc-proof-item{padding:0.48rem 0.6rem;border-bottom:1px solid #F5F6F8}
.dee-dc-proof-item:last-child{border-bottom:none}
.dee-dc-proof-head{display:flex;align-items:center;gap:5px;margin-bottom:2px}
.dee-dc-prank{width:12px;height:12px;border-radius:3px;background:#1B3A6B;color:#fff;font-size:7px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dee-dc-ptype{font-size:7px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:0.04em;flex:1}
.dee-dc-badge{font-size:6px;font-weight:700;padding:1px 4px;border-radius:3px;letter-spacing:0.03em}
.dee-dc-pmetric{font-size:8.5px;color:#1a1a2e;font-weight:600;line-height:1.4;margin-bottom:1px}
.dee-dc-psrc{font-size:7px;color:#aaa;line-height:1.35}
.dee-dc-viewfull{background:#F5F6F8;border:1px dashed #D8DCE4;border-radius:6px;padding:0.55rem 0.7rem;display:flex;flex-direction:column;gap:3px;text-align:center}
.dee-dc-viewfull span{font-size:8px;color:#999;line-height:1.4}
.dee-dc-viewfull a{font-size:9px;font-weight:700;color:#29A8E0;text-decoration:none}
 
/* ── EVIDENCE STRENGTH ── */
.dee-estrength{background:#fff;padding:5rem 4rem}
.dee-es-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.dee-es-left h2{font-size:30px;font-weight:600;color:#1B3A6B;line-height:1.2;margin-bottom:1rem;letter-spacing:-0.3px}
.dee-es-left p{font-size:15px;color:#555;line-height:1.85;margin-bottom:1.1rem}
.dee-es-left p:last-child{margin-bottom:0}
.dee-es-cards{display:flex;flex-direction:column;gap:1rem}
.dee-es-card{border-radius:11px;padding:1.35rem 1.5rem;border:1px solid}
.dee-es-card.dee-direct{background:#F4FBF6;border-color:#CDEBD9}
.dee-es-card.dee-cat{background:#FFFCF4;border-color:#F2E4C4}
.dee-es-card-head{display:flex;align-items:center;gap:9px;margin-bottom:0.6rem}
.dee-es-badge{font-size:9.5px;font-weight:700;padding:2.5px 9px;border-radius:4px;letter-spacing:0.05em}
.dee-es-card-title{font-size:14px;font-weight:700;color:#1B3A6B}
.dee-es-card p{font-size:13px;color:#666;line-height:1.65}
 
/* ── WHO IT'S FOR ── */
.dee-for-section{background:#F5F6F8;padding:5rem 4rem}
.dee-for-section-inner{max-width:1100px;margin:0 auto}
.dee-for-section h2{font-size:30px;font-weight:600;color:#1B3A6B;line-height:1.2;margin-top:0.5rem;max-width:560px;letter-spacing:-0.3px}
.dee-for-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem}
.dee-for-card{background:#fff;border-radius:12px;border:1px solid #E8EAF0;padding:1.75rem}
.dee-for-role{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:#29A8E0;margin-bottom:0.5rem}
.dee-for-title{font-size:16px;font-weight:700;color:#1B3A6B;margin-bottom:0.6rem;line-height:1.3}
.dee-for-text{font-size:13.5px;color:#666;line-height:1.7}
 
/* ── PLATFORM STRIP ── */
.dee-platform-strip{background:#0F2347;padding:3.5rem 4rem}
.dee-ps-inner{max-width:1100px;margin:0 auto}
.dee-ps-eyebrow{font-size:10px;font-weight:700;color:#29A8E0;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.6rem;text-align:center}
.dee-ps-sub{font-size:14px;color:rgba(255,255,255,0.45);text-align:center;margin-bottom:2rem}
.dee-ps-row{display:flex;align-items:stretch;border:1px solid rgba(255,255,255,0.1);border-radius:12px;overflow:hidden}
.dee-ps-cell{flex:1;padding:1.35rem 1rem;border-right:1px solid rgba(255,255,255,0.08);text-align:center;display:flex;flex-direction:column;justify-content:center}
.dee-ps-cell:last-child{border-right:none}
.dee-ps-name{font-size:13px;font-weight:600;color:rgba(255,255,255,0.6);margin-bottom:0.35rem}
.dee-ps-desc{font-size:11px;color:rgba(255,255,255,0.3);line-height:1.45}
.dee-ps-cell.active{background:rgba(41,168,224,0.1);border-top:2px solid #29A8E0;border-right-color:rgba(41,168,224,0.3);margin-top:-1px;margin-bottom:-1px}
.dee-ps-cell.active .dee-ps-name{color:#fff;font-weight:700}
.dee-ps-cell.active .dee-ps-desc{color:rgba(255,255,255,0.55)}
.dee-ps-here{font-size:9px;font-weight:700;color:#29A8E0;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.4rem}


/* bottom cta — strengthened per Aug 2026 lock */
.dee-bottom-cta{background:#F5F6F8;padding:5.5rem 0;text-align:center;border-top:1px solid #E8EAF0}
.dee-bc-eyebrow{color:#29A8E0;font-size:13px;font-weight:700;letter-spacing:0.1em}
.dee-bottom-cta h2{color:#1B3A6B;font-size:32px;font-weight:600;margin-top:0.7rem;letter-spacing:-0.02em}
.dee-bottom-cta p{color:#555;font-size:17px;max-width:600px;margin:1.1rem auto 0;line-height:1.6}
.dee-btn-navy{background:#1B3A6B;color:#fff;padding:0.95rem 1.9rem;border-radius:6px;font-weight:600;font-size:16px;display:inline-block;margin-top:1.8rem}
.dee-btn-navy:hover{background:#122a52}


/* ── RESPONSIVE ── */
@media(max-width:980px){
  .dee-hero-inner,.dee-what-dee-inner,.dee-output-inner,.dee-es-inner{grid-template-columns:1fr}
  .dee-steps-grid,.dee-for-grid{grid-template-columns:1fr}
  .dee-ps-row{flex-wrap:wrap}
  .dee-ps-cell{flex:1 1 45%;border-bottom:1px solid rgba(255,255,255,0.08)}
}
@media(max-width:600px){
  .dee-hero,.dee-what-dee,.dee-how-works,.dee-output-section,.dee-estrength,.dee-for-section,.dee-platform-strip,.dee-bottom-cta,.footer{padding-left:1.5rem;padding-right:1.5rem}
  .dee-hero h1{font-size:40px;font-weight:600;color:#fff;line-height:1.2;margin-bottom:.4rem;letter-spacing:0}  
  .dee-bottom-cta-inner{flex-direction:column;align-items:flex-start}
  .dee-dc-metrics,.dee-mc-metrics{grid-template-columns:1fr 1fr}
  .dee-dc-two,.dee-dc-route{grid-template-columns:1fr}
}


/* === Typography alignment with site === */
.dee-what-dee h2,
.dee-section-header h2,
.dee-output-left h2,
.dee-es-left h2,
.dee-for-section h2,
.dee-bottom-cta h2{
font-size:26px;
font-weight:600;
line-height:1.25;
letter-spacing:0;
}

.dee-what-dee p,
.dee-output-left p,
.dee-es-left p,
.dee-section-header p{
font-size:18px;
line-height:1.75;
  /*color:#555;*/
}

.dee-kp-title,
.dee-step-title,
.dee-es-card-title,
.dee-for-title{
font-size:18px;
font-weight:600;
}

.dee-kp-text,
.dee-step-text,
.dee-es-card p,
.dee-for-text,
.dee-ps-desc{
font-size:16px;
line-height:1.65;
}

.dee-ps-name{font-size:16px;}
.dee-bottom-cta p{font-size:16px;line-height:1.7;}
.dee-btn-navy{font-size:16px;}

@media(max-width:600px){
.dee-hero h1{font-size:28px;}
.dee-hero-desc{font-size:16px;}
.dee-what-dee h2,
.dee-section-header h2,
.dee-output-left h2,
.dee-es-left h2,
.dee-for-section h2,
.dee-bottom-cta h2{font-size:22px;}
}


/* ── 4. BACKED BY EVIDENCE ── */

.stc-x07.stc-x07.stc-x07{
  background:#1B3A6B;
  padding:5rem 4rem;
}

.stc-x08.stc-x08.stc-x08{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:5rem;
  align-items:start;
}

.stc-x09.stc-x09.stc-x09{
  font-size:10px;
  font-weight:700;
  color:#29A8E0;
  text-transform:uppercase;
  letter-spacing:0.12em;
  margin-bottom:0.75rem;
}

.stc-x10.stc-x10.stc-x10{
  font-size:28px;
  font-weight:700;
  color:#fff;
  margin-bottom:1rem;
  letter-spacing:-0.3px;
  line-height:1.25;
}

.stc-x11.stc-x11.stc-x11{
  font-size:16px;
  color:rgba(255,255,255,0.62);
  line-height:1.8;
  margin-bottom:2.25rem;
}

.stc-x12.stc-x12.stc-x12{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}

.stc-x13.stc-x13.stc-x13{
  display:flex;
  gap:1rem;
  align-items:flex-start;
}

.stc-x14.stc-x14.stc-x14{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#29A8E0;
  flex-shrink:0;
  margin-top:6px;
}

.stc-x15.stc-x15.stc-x15{
  font-size:16px;
  font-weight:600;
  color:#fff;
  margin-bottom:2px;
}

.stc-x16.stc-x16.stc-x16{
  font-size:14px;
  color:rgba(255,255,255,0.55);
  line-height:1.6;
}

.stc-x17.stc-x17.stc-x17{
  background:#F9FAFB;
  border:1.5px solid #E8EAF0;
  border-radius:14px;
  overflow:hidden;
}

.stc-x18.stc-x18.stc-x18{
  background:#1B3A6B;
  padding:0.9rem 1.5rem;
  display:flex;
  align-items:center;
  gap:0.75rem;
}

.stc-x19.stc-x19.stc-x19{
  font-size:10px;
  font-weight:700;
  color:#29A8E0;
  text-transform:uppercase;
  letter-spacing:0.1em;
  flex-shrink:0;
}

.stc-x20.stc-x20.stc-x20{
  font-size:13px;
  color:rgba(255,255,255,0.85);
  font-style:italic;
  margin:0;
}

.stc-x21.stc-x21.stc-x21{
  display:grid;
  grid-template-columns:1.5fr 1fr;
}

.stc-x22.stc-x22.stc-x22{
  padding:1.25rem 1.5rem;
  border-right:1px solid #E8EAF0;
}

.stc-x23.stc-x23.stc-x23{
  font-size:12.5px;
  color:#1a1a2e;
  line-height:1.8;
  margin-bottom:1rem;
}

.stc-x24.stc-x24.stc-x24{
  display:inline-flex;
  align-items:center;
  background:#EEF7FD;
  border:1px solid #C8E8F7;
  color:#1B6BB0;
  font-size:10px;
  font-weight:700;
  padding:1px 6px;
  border-radius:8px;
  cursor:pointer;
  vertical-align:baseline;
  line-height:1.6;
}

.stc-x25.stc-x25.stc-x25{
  font-size:10px;
  font-weight:700;
  color:#1B3A6B;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:0.6rem;
}

.stc-x26.stc-x26.stc-x26{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:1rem;
}

.stc-x27.stc-x27.stc-x27{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  padding:4px 0;
  border-bottom:1px solid #F0F2F5;
}

.stc-x28.stc-x28.stc-x28{
  color:#444;
}

.stc-x29.stc-x29.stc-x29{
  color:#1B3A6B;
  font-weight:600;
}

.stc-x30.stc-x30.stc-x30{
  display:inline-flex;
  align-items:center;
  background:#EEF7FD;
  border:1px solid #C8E8F7;
  color:#1B6BB0;
  font-size:9.5px;
  font-weight:700;
  padding:1px 5px;
  border-radius:6px;
  cursor:pointer;
}

.stc-x31.stc-x31.stc-x31{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  padding:4px 0;
}

.stc-x32.stc-x32.stc-x32{
  padding:1rem 1.15rem;
  background:#FAFBFC;
}

.stc-x33.stc-x33.stc-x33{
  font-size:9.5px;
  font-weight:700;
  color:#999;
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:0.75rem;
}

.stc-x34.stc-x34.stc-x34{
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  margin-bottom:1rem;
}

.stc-x35.stc-x35.stc-x35{
  display:flex;
  gap:0.5rem;
  align-items:flex-start;
}

.stc-x36.stc-x36.stc-x36{
  background:#29A8E0;
  color:#fff;
  font-size:9px;
  font-weight:700;
  padding:2px 6px;
  border-radius:4px;
  flex-shrink:0;
  margin-top:1px;
  letter-spacing:0.02em;
}

.stc-x37.stc-x37.stc-x37{
  font-size:10.5px;
  color:#666;
  line-height:1.45;
  margin:0;
}

.stc-x38.stc-x38.stc-x38{
  background:#1B3A6B;
  color:#fff;
  font-size:9px;
  font-weight:700;
  padding:2px 6px;
  border-radius:4px;
  flex-shrink:0;
  margin-top:1px;
}

.stc-x39.stc-x39.stc-x39{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin-bottom:0.75rem;
}

.stc-x40.stc-x40.stc-x40{
  background:#fff;
  border:1px solid #E8EAF0;
  border-radius:6px;
  padding:0.4rem;
  cursor:pointer;
}

.stc-x41.stc-x41.stc-x41{
  height:24px;
  background:linear-gradient(135deg,#1B3A6B,#29A8E0);
  border-radius:3px;
  margin-bottom:0.35rem;
}

.stc-x42.stc-x42.stc-x42{
  font-size:9px;
  color:#666;
  line-height:1.35;
  margin:0;
}

.stc-x43.stc-x43.stc-x43{
  height:24px;
  background:linear-gradient(135deg,#29A8E0,#185FA5);
  border-radius:3px;
  margin-bottom:0.35rem;
}

.stc-x44.stc-x44.stc-x44{
  font-size:11px;
  font-weight:600;
  color:#29A8E0;
  text-decoration:none;
}

.stc-x45.stc-x45.stc-x45{
  font-size:11px;
  color:rgba(255,255,255,0.35);
  text-align:center;
  margin-top:0.85rem;
}


/* ── 5. CONNECTED PLATFORM STRIP ── */

.stc-x46.stc-x46.stc-x46{
  background:#0F2347;
  padding:3.5rem 4rem;
}

.stc-x47.stc-x47.stc-x47{
  max-width:1100px;
  margin:0 auto;
}

.stc-x48.stc-x48.stc-x48{
  font-size:10px;
  font-weight:700;
  color:#29A8E0;
  text-transform:uppercase;
  letter-spacing:0.12em;
  margin-bottom:0.6rem;
  text-align:center;
}

.stc-x49.stc-x49.stc-x49{
  font-size:14px;
  color:rgba(255,255,255,0.45);
  text-align:center;
  margin-bottom:2rem;
}

.stc-x50.stc-x50.stc-x50{
  display:flex;
  align-items:stretch;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  overflow:hidden;
}

.stc-x51.stc-x51.stc-x51{
  flex:1;
  padding:1.35rem 1rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-right:1px solid rgba(255,255,255,0.08);
  text-align:center;
}

.stc-x52.stc-x52.stc-x52{
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,0.6);
  margin-bottom:0.35rem;
}

.stc-x53.stc-x53.stc-x53{
  font-size:11px;
  color:rgba(255,255,255,0.3);
  line-height:1.45;
}

.stc-x54.stc-x54.stc-x54{
  flex:1;
  padding:1.35rem 1rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-right:1px solid rgba(41,168,224,0.3);
  text-align:center;
  background:rgba(41,168,224,0.1);
  border-top:2px solid #29A8E0;
  margin-top:-1px;
  margin-bottom:-1px;
}

.stc-x55.stc-x55.stc-x55{
  font-size:9px;
  font-weight:700;
  color:#29A8E0;
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:0.4rem;
}

.stc-x56.stc-x56.stc-x56{
  font-size:13px;
  font-weight:700;
  color:#fff;
  margin-bottom:0.35rem;
}

.stc-x57.stc-x57.stc-x57{
  font-size:11px;
  color:rgba(255,255,255,0.55);
  line-height:1.45;
}

.stc-x58.stc-x58.stc-x58{
  flex:1;
  padding:1.35rem 1rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}

@media (max-width:600px){
  .stc-x08.stc-x08.stc-x08{
    grid-template-columns:1fr;
    gap:8px;
    margin-bottom:0.75rem;
  }
  
   .stc-x50.stc-x50.stc-x50{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      border-radius:10px;
    }

    .stc-x51.stc-x51.stc-x51,
    .stc-x54.stc-x54.stc-x54{
      border-right:none;
      border-bottom:1px solid rgba(255,255,255,0.08);
    }

    .stc-x54.stc-x54.stc-x54{
      border-right:none;
      border-bottom:1px solid rgba(41,168,224,0.3);
      border-top:2px solid #29A8E0;
    }

    .stc-x58.stc-x58.stc-x58{
      border-bottom:none;
    }
}








/* ============================================================
   CROSS-BROWSER / LAYOUT STABILISATION OVERRIDES
   Added last intentionally — does not require removing
   existing CSS above.
   ============================================================ */

/* ------------------------------------------------------------
   1. GLOBAL TYPOGRAPHY
   Use a predictable font stack across Safari / Chrome.
   ------------------------------------------------------------ */

body{
  font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}


/* ------------------------------------------------------------
   2. NAVIGATION
   Prevent text-width differences from changing nav spacing.
   ------------------------------------------------------------ */

.nav{
  min-height:60px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:32px;
  flex-shrink:0;
}

.nav-links a{
  white-space:nowrap;
  line-height:1;
}


/* ------------------------------------------------------------
   3. FOOTER GRID
   Prevent intrinsic text widths from pushing columns around.
   ------------------------------------------------------------ */

.footer-grid{
  grid-template-columns:
    minmax(240px,2.2fr)
    repeat(3,minmax(130px,1fr));
  gap:48px;
}

.footer-brand,
.footer-col{
  min-width:0;
}

.footer-brand p,
.footer-col a{
  overflow-wrap:break-word;
}


/* ------------------------------------------------------------
   4. FOOTER BOTTOM
   Explicitly establish flex layout instead of relying on
   justify-content without display:flex.
   ------------------------------------------------------------ */

.footer-bottom{
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.footer-sub-bottom{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  width:100%;
}


/* ------------------------------------------------------------
   5. TRUSTED BY — CURRENT .fgtb IMPLEMENTATION
   Make the grid deterministic and prevent intrinsic logo
   widths from affecting the columns.
   ------------------------------------------------------------ */

.fgtb-section{
   background: linear-gradient(105deg, rgba(12, 26, 54, 0.96) 0%, rgba(12, 26, 54, 0.85) 55%, rgba(12, 26, 54, 0.55) 100%);/*background:#1B3A6B;*/
  padding:64px 0 72px;
}

.fgtb-container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}

.fgtb-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:center;
}

.fgtb-logo{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.fgtb-logo img{
  display:block;
  width:100%;
  max-width:210px;
  height:70px;
  object-fit:contain;
}


/* ------------------------------------------------------------
   6. TRUSTED BY — TABLET
   Keep 5 columns slightly longer before moving to 3.
   ------------------------------------------------------------ */

@media(max-width:1100px){

  .fgtb-container{
    padding-left:24px;
    padding-right:24px;
  }

  .fgtb-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
    /*gap:36px 24px;*/
  }

  .fgtb-logo img{
    max-width:180px;
  }
}


/* ------------------------------------------------------------
   7. TRUSTED BY — SMALL TABLET
   ------------------------------------------------------------ */

@media(max-width:900px){

  .fgtb-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    /*gap:40px 24px;*/
  }

}


/* ------------------------------------------------------------
   8. TRUSTED BY — MOBILE
   ------------------------------------------------------------ */

@media(max-width:600px){

  .fgtb-section{
    padding:48px 0;
  }

  .fgtb-container{
    padding-left:20px;
    padding-right:20px;
  }

  .fgtb-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    /*gap:32px 20px;*/
  }

  .fgtb-logo img{
    height:54px;
    max-width:150px;
  }

}


/* ------------------------------------------------------------
   9. REMOVE LOGO MOVEMENT ON HOVER
   Keeps the Trusted By section visually stable.
   ------------------------------------------------------------ */

.fgtb-logo:hover img{
  opacity:1;
  transform:none;
}


/* ------------------------------------------------------------
   10. TRUSTED BY TYPOGRAPHY
   The later global typography block currently changes
   .fh-trusted-sub from 16px to 18px.
   This restores the intended 16px value.
   ------------------------------------------------------------ */

.fh-trusted-sub{
  font-size:16px;
  line-height:1.75;
}


/* ------------------------------------------------------------
   11. FOOTER MOBILE
   Preserve the existing mobile behaviour while keeping
   the desktop stabilisation above.
   ------------------------------------------------------------ */

@media(max-width:768px){

  .footer-grid{
    grid-template-columns:1fr;
    gap:32px;
  }

  .footer-bottom,
  .footer-sub-bottom{
    flex-direction:column;
    gap:12px;
  }

}


/* ------------------------------------------------------------
   12. VERY SMALL MOBILE
   ------------------------------------------------------------ */

@media(max-width:460px){

  .nav-links{
    gap:20px;
  }

}





/* ============================================================
   TRENDS BANNER
   ============================================================ */

.trends-banner-section {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #06152f;
}


/* ============================================================
   MAIN BANNER
   ============================================================ */

.trends-banner {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


/* ============================================================
   BACKGROUND IMAGE
   ============================================================ */

.trends-banner-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}


/* ============================================================
   TEXT
   ============================================================ */

.trends-banner-copy {
  position: absolute;

  left: 5.5%;
  top: 13%;

  width: 45%;

  z-index: 2;

  text-align: left;
}


.trends-banner-eyebrow {
  margin: 0 0 2.2%;

  color: #00baf2;

  font-size: clamp(10px, 0.9vw, 15px);
  font-weight: 700;

  line-height: 1.2;

  text-transform: uppercase;
  letter-spacing: 0.18em;
}


.trends-banner-title {
  margin: 0 0 2.5%;

  color: #ffffff;

  font-size: clamp(26px, 3vw, 48px);
  font-weight: 700;

  line-height: 1.1;
  letter-spacing: -0.5px;
}


.trends-banner-title span {
  color: #00baf2;
}


.trends-banner-sub {
  max-width: 520px;

  margin: 0;

  color: rgba(255, 255, 255, 0.78);

  font-size: clamp(12px, 1.15vw, 18px);
  font-weight: 400;

  line-height: 1.45;
}


/* ============================================================
   BUTTON + FEATURES
   ============================================================ */

.trends-banner-actions {
  position: absolute;

  left: 5.5%;
  top: 67%;

  width: 58%;

  z-index: 3;

  display: flex;
  align-items: center;

  gap: clamp(10px, 1.4vw, 24px);
}


/* ============================================================
   EXPLORE BUTTON
   ============================================================ */

.trends-banner-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  min-width: clamp(170px, 17vw, 280px);

  padding: clamp(10px, 1vw, 17px)
           clamp(16px, 1.8vw, 30px);

  gap: clamp(8px, 1vw, 16px);

  border-radius: 999px;

  background: #00baf2;

  color: #06213f;

  font-size: clamp(11px, 1.05vw, 18px);
  font-weight: 600;

  line-height: 1;

  text-decoration: none;

  white-space: nowrap;

  box-sizing: border-box;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


.trends-banner-button:hover {
  background: #ffffff;
  color: #06213f;

  transform: translateY(-2px);
}


.trends-banner-arrow {
  font-size: clamp(16px, 1.5vw, 25px);

  line-height: 1;
}


/* ============================================================
   DIVIDER
   ============================================================ */

.trends-banner-divider {
  width: 1px;

  height: clamp(35px, 4vw, 58px);

  flex-shrink: 0;

  background: rgba(255, 255, 255, 0.55);
}


/* ============================================================
   SUPPORTING FEATURES
   ============================================================ */

.trends-banner-feature {
  display: flex;

  align-items: center;

  gap: clamp(5px, 0.7vw, 11px);

  flex-shrink: 0;

  color: #ffffff;

  font-size: clamp(9px, 0.85vw, 15px);

  font-weight: 400;

  line-height: 1.25;

  white-space: nowrap;
}


.trends-banner-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  color: #00baf2;

  font-size: clamp(20px, 1.8vw, 32px);

  line-height: 1;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1000px) {

  .trends-banner-copy {
    left: 5%;
    width: 46%;
  }

  .trends-banner-actions {
    left: 5%;
    width: 62%;

    gap: 12px;
  }

  .trends-banner-feature {
    font-size: 10px;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

  .trends-banner-copy {
    left: 6%;
    top: 12%;
    width: 48%;
  }


  .trends-banner-eyebrow {
    margin-bottom: 10px;

    font-size: 8px;
  }


  .trends-banner-title {
    margin-bottom: 10px;

    font-size: clamp(20px, 4vw, 30px);
  }


  .trends-banner-sub {
    max-width: 260px;

    font-size: 10px;
  }


  .trends-banner-actions {
    left: 6%;
    top: 67%;

    width: 60%;

    gap: 8px;
  }


  .trends-banner-button {
    min-width: 135px;

    padding: 9px 13px;

    gap: 7px;

    font-size: 9px;
  }


  .trends-banner-arrow {
    font-size: 15px;
  }


  .trends-banner-divider {
    height: 30px;
  }


  .trends-banner-feature {
    gap: 4px;

    font-size: 7px;
  }


  .trends-banner-icon {
    font-size: 17px;
  }

}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 500px) {

  .trends-banner-copy {
    left: 5%;
    top: 10%;

    width: 52%;
  }


  .trends-banner-eyebrow {
    font-size: 7px;
  }


  .trends-banner-title {
    font-size: 17px;
  }


  .trends-banner-sub {
    font-size: 8px;
  }


  .trends-banner-actions {
    left: 5%;
    top: 67%;

    width: 62%;

    gap: 5px;
  }


  .trends-banner-button {
    min-width: 105px;

    padding: 7px 9px;

    font-size: 7px;
  }


  .trends-banner-arrow {
    font-size: 11px;
  }


  .trends-banner-feature {
    font-size: 6px;
  }


  .trends-banner-icon {
    font-size: 13px;
  }

}




/* ============================================================
   AI CARDS — FINAL ALIGNMENT
   ============================================================ */

/* ------------------------------------------------------------
   SENSIA
   Match the total height of:
   DEE header + DEE image
   ------------------------------------------------------------ */

.fh-ai-card--sensia .fh-ai-card-head {
  height: 328px;
  min-height: 307px;
  box-sizing: border-box;
}


/* ------------------------------------------------------------
   DEE IMAGE
   KEEP THE CURRENT FULL IMAGE
   ------------------------------------------------------------ */

.fh-dee-card-image {
  display: block;
  width: 100%;
  height: 264px;
  object-fit: cover;
  object-position: top center;
}


/* ------------------------------------------------------------
   BODY
   ------------------------------------------------------------ */

.fh-ai-card-body {
  box-sizing: border-box;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 768px) {

  .fh-ai-card--sensia .fh-ai-card-head {
    height: auto;
    min-height: auto;
  }

  .fh-dee-card-image {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

}



/* ============================================================
   IFF CLIENT QUOTE BAND
   FMCG Gurus homepage style
   ============================================================ */

.fg-quote-band {
  background: rgba(41,168,224,0.08);
  padding: 3.5rem 4rem;
}

.fg-quote-band__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 3rem;
  align-items: center;
}


/* ------------------------------------------------------------
   LEFT — CLIENT
   ------------------------------------------------------------ */

.fg-quote-band__who {
  border-right: 1px solid rgba(27,58,107,0.15);
  padding-right: 2rem;
}

.fg-quote-band__logo {
  display: block;
  max-width: 140px;
  height: auto;
}

.fg-quote-band__logo-text {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  color: #1B3A6B;
  letter-spacing: 0;
}

.fg-quote-band__label {
  margin-top: 0.5rem;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00baf2;
}


/* ------------------------------------------------------------
   RIGHT — QUOTE
   ------------------------------------------------------------ */

.fg-quote-band__mark {
  font-family: Georgia, serif;
  font-size: 44px;
  line-height: 0.6;
  height: 22px;
  margin-bottom: 0.75rem;
  color: #00baf2;
  font-weight: 600;
}

.fg-quote-band__quote {
  margin: 0;
  max-width: 800px;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 500;
  color: #1B3A6B;  
}

.fg-quote-band__cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 14px;
  line-height: 1.5;
  font-style: normal;
  color: rgba(27,58,107,0.7);
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 768px) {

  .fg-quote-band {
    padding: 2.5rem 1.5rem;
  }

  .fg-quote-band__inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .fg-quote-band__who {
    border-right: 0;
    border-bottom: 1px solid rgba(27,58,107,0.15);
    padding-right: 0;
    padding-bottom: 1rem;
  }

  .fg-quote-band__logo-text {
    font-size: 24px;
  }

  .fg-quote-band__quote {
    font-size: 18px;
    line-height: 1.55;
  }

  .fg-quote-band__cite {
    font-size: 13px;
  }

}


/* ============================================================
   CLIENT QUOTES — LANTMÄNNEN UNIBAKE + FONTERRA
   ============================================================ */

.fg-client-quotes {
  background: rgba(41,168,224,0.08);
  padding: 3.5rem 4rem;
}

.fg-client-quotes__inner {
  max-width: 1375px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;

  align-items: stretch;
}


/* ============================================================
   EACH QUOTE
   ============================================================ */

.fg-client-quote {
  box-sizing: border-box;
  padding: 0 3rem;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


/* LEFT QUOTE */
.fg-client-quote:first-child {
  padding-left: 0;
  padding-right: 3.5rem;
}


/* RIGHT QUOTE */
.fg-client-quote + .fg-client-quote {
  border-left: 1px solid rgba(27,58,107,0.15);
  padding-left: 3.5rem;
  padding-right: 0;
}


/* ============================================================
   COMPANY NAME
   ============================================================ */

.fg-client-quote__name {
  margin: 0;

  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;

  color: #1B3A6B;
}


/* ============================================================
   CLIENT PERSPECTIVE
   ============================================================ */

.fg-client-quote__label {
  margin-top: 0.45rem;

  font-size: 10px;
  line-height: 1.4;
  font-weight: 700;

  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: #00baf2;
}


/* ============================================================
   QUOTE MARK
   ============================================================ */

.fg-client-quote__mark {
  margin-top: 1.5rem;
  margin-bottom: 0.65rem;
  height: 22px;

  font-family: Georgia, serif;
  font-size: 44px;
  line-height: 0.6;
  font-weight: 500;
  color: #00baf2;
}

/* ============================================================
   QUOTE TEXT
   ============================================================ */

.fg-client-quote__text {
  margin: 0;
  /*min-height: 110px;*/

  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;

  color: #1B3A6B;
  font-style: normal;
}

/* Attribution now starts at exactly the same height */
.fg-client-quote__cite {
  display: block;
  margin-top: 0.85rem;

  font-size: 15px;
  line-height: 1.5;

  color: rgba(27,58,107,0.7);
  font-style: normal;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

  .fg-client-quotes {
    padding: 2.5rem 1.5rem;
  }

  .fg-client-quotes__inner {
    grid-template-columns: 1fr;
  }

  .fg-client-quote,
  .fg-client-quote:first-child,
  .fg-client-quote + .fg-client-quote {
    padding-left: 0;
    padding-right: 0;
  }

  .fg-client-quote + .fg-client-quote {
    border-left: 0;
    border-top: 1px solid rgba(27,58,107,0.15);

    margin-top: 2.5rem;
    padding-top: 2.5rem;
  }

  .fg-client-quote__name {
    font-size: 24px;
  }

  .fg-client-quote__text {
    font-size: 21px;
    line-height: 1.5;
  }

}






/* ============================================================
   ADDITION: DEE PAGE — YELLOW ACCENT
   Existing layout and navigation remain unchanged.
   ============================================================ */

.dee-hero-full-name {
  color: #FFD84D;
}

.dee-btn-primary {
  background: #FFD84D;
  color: #1B3A6B;
}

.dee-section-eyebrow,
.dee-ps-eyebrow {
  color: #1B3A6B;
}

.dee-section-eyebrow::before,
.dee-ps-eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F2B705;
  margin-right: 8px;
  vertical-align: 1px;
}

.dee-hero .dee-section-eyebrow,
.dee-output-section .dee-section-eyebrow,
.dee-platform-strip .dee-ps-eyebrow {
  color: #FFD84D;
}

.dee-mc-verdict,
.dee-dc-verdict {
  border-left-color: #F2B705;
  background: #FFF8DB;
}

.dee-mc-lbl,
.dee-dc-lbl,
.dee-for-role {
  color: #1B3A6B;
}

.dee-step-num {
  display: inline-block;
  align-self: flex-start;
  width: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: #FFD84D;
  color: #1B3A6B;
  font-weight: 700;
}

.dee-op-dot {
  background: #F2B705;
}

.dee-ps-cell.active {
  background: rgba(255, 216, 77, 0.10);
  border-top: 3px solid #FFD84D;
}

.dee-ps-cell.active,
.dee-ps-cell.active * {
  color: #fff;
}

.dee-ps-cell.active .dee-ps-here {
  color: #FFD84D;
}




/* ============================================================
   ADDITION: SOLUTIONS — PRODUCT ACCENT COLOURS
   ============================================================ */

/* Product tabs */
.sr-product-tab {
  --acc: #29A8E0;
  --acc-line: #29A8E0;
  border-top: 3px solid var(--acc-line);
}

.sr-product-tab[data-panel="sensia"] {
  --acc: #00CFC8;
  --acc-line: #00CFC8;
}

.sr-product-tab[data-panel="sr-scanner"],
.sr-product-tab[data-panel="commercial"] {
  --acc: #F0694E;
  --acc-line: #F0694E;
}

.sr-product-tab[data-panel="dee"] {
  --acc: #FFD84D;
  --acc-line: #F2B705;
}

.sr-product-tab[data-panel="research"] {
  --acc: #1B3A6B;
  --acc-line: #1B3A6B;
}

.sr-product-tab.active {
  background: color-mix(in srgb, var(--acc) 9%, #fff);
  border-color: var(--acc-line);
}

/* Product panels */
.sr-panel {
  --acc: #29A8E0;
  --acc-line: #29A8E0;
  --btn: #1B3A6B;
  --btn-text: #fff;
  border-top: 3px solid var(--acc-line);
}

#sensia {
  --acc: #00CFC8;
  --acc-line: #00CFC8;
  --btn: #00CFC8;
  --btn-text: #1B3A6B;
}

#sr-scanner,
#commercial {
  --acc: #F0694E;
  --acc-line: #F0694E;
  --btn: #D9542F;
  --btn-text: #fff;
}

#dee {
  --acc: #FFD84D;
  --acc-line: #F2B705;
  --btn: #FFD84D;
  --btn-text: #1B3A6B;
}

#research {
  --acc: #1B3A6B;
  --acc-line: #1B3A6B;
  --btn: #1B3A6B;
  --btn-text: #fff;
}

.sr-panel .sr-tag {
  color: #1B3A6B;
}

.sr-panel .sr-tag::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acc-line);
  margin-right: 8px;
  vertical-align: 1px;
}

.sr-panel .sr-dot {
  background: var(--acc-line);
}

.sr-panel .sr-btn-primary {
  background: var(--btn);
  color: var(--btn-text);
}

.sr-panel .sr-mock-top {
  border-bottom: 3px solid var(--acc-line);
}






/* ============================================================
   SOLUTIONS — PROTECT EXISTING PANELS
   Keep Consumer Intelligence and Survey Explorer unchanged
   ============================================================ */

#consumer-intelligence .sr-panel-grid,
#survey-explorer .sr-panel-grid {
    grid-template-columns: 1fr 1fr;
}

/* ============================================================
   OPPORTUNITY SCANNER — IMAGE FIX ONLY
   ============================================================ */

#sr-scanner .sr-panel-grid {
    grid-template-columns: .88fr 1.12fr;
    align-items: start;
}

#sr-scanner .sr-panel-copy,
#sr-scanner .sr-mock {
    align-self: start;
    margin-top: 0;
}

#sr-scanner .sr-mock {
    width: 100%;
    height: auto;
    min-height: 0;
}

#sr-scanner .sr-mock img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: top center;
}

@media (max-width: 980px) {
    #sr-scanner .sr-panel-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   SOLUTIONS — REMAINING PRODUCT MOCKUPS
   Consumer Intelligence and Survey Explorer remain untouched.
   ============================================================ */

/* Sensia AI — reduce mockup slightly and keep it inside column */
#sensia .sr-mock {
    width: 100%;
    max-width: 94%;
    justify-self: end;
    min-width: 0;
}

#sensia .sr-mock img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Commercial Score — keep the complete image within its column */
#commercial .sr-mock {
    width: 100%;
    max-width: 96%;
    justify-self: end;
    min-width: 0;
}

#commercial .sr-mock img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

/* DEE — prevent the mockup from overflowing horizontally */
#dee .sr-panel-grid {
    min-width: 0;
}

#dee .sr-mock {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: end;
    overflow: hidden;
}

#dee .sr-mock img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Custom Research — keep its existing layout, constrain image only */
#research .sr-mock {
    max-width: 100%;
    min-width: 0;
}

#research .sr-mock img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Mobile — stack product copy and mockup */
@media (max-width: 980px) {
    #sensia .sr-panel-grid,
    #commercial .sr-panel-grid,
    #dee .sr-panel-grid,
    #research .sr-panel-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #sensia .sr-mock,
    #commercial .sr-mock,
    #dee .sr-mock,
    #research .sr-mock {
        width: 100%;
        max-width: 100%;
        justify-self: stretch;
    }
}







/* ==========================================================
   SOLUTIONS REFINED — PRODUCT MOCKUP SIZING
   Keep Consumer Intelligence and Survey Explorer unchanged.
   ========================================================== */

/* Shared safety rules: prevent mockups overflowing columns */
#sensia .sr-panel-grid,
#sr-scanner .sr-panel-grid,
#commercial .sr-panel-grid,
#dee .sr-panel-grid,
#research .sr-panel-grid {
    min-width: 0;
}

#sensia .sr-mock,
#sr-scanner .sr-mock,
#commercial .sr-mock,
#dee .sr-mock,
#research .sr-mock {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    justify-self: end;
}

/* 1. SENSIA AI — HTML-built mockup */
#sensia .sr-mock {
    width: 96%;
}

/* Keep Sensia content inside its mockup */
#sensia .sr-ex-wrap,
#sensia .sr-ex-body,
#sensia .sr-ex-cards {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#sensia .sr-ex-table {
    width: 100%;
    table-layout: fixed;
}

/* 2. OPPORTUNITY SCANNER — screenshot image */
#sr-scanner .sr-mock {
    width: 100%;
}

#sr-scanner .sr-mock-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center top;
}

/* 3. COMMERCIAL SCORE — screenshot image */
#commercial .sr-mock {
    width: 96%;
}

#commercial .sr-mock-img,
#commercial .sr-mock > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center top;
}

/* 4. DEE — show the entire image without cropping */
#dee .sr-mock {
    width: 96%;
    overflow: visible;
}

#dee .sr-mock > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    object-fit: contain;
    object-position: center top;
}

/* 5. CUSTOM RESEARCH — HTML-built mockup */
#research .sr-mock {
    width: 96%;
    min-width: 0;
}

#research .sr-flow,
#research .sr-flow-grid,
#research .sr-flow-step {
    min-width: 0;
    box-sizing: border-box;
}

#research .sr-flow-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Responsive sizing */
@media (max-width: 980px) {
    #sensia .sr-mock,
    #sr-scanner .sr-mock,
    #commercial .sr-mock,
    #dee .sr-mock,
    #research .sr-mock {
        width: 100%;
        max-width: 100%;
        justify-self: stretch;
    }
}

@media (max-width: 600px) {
    #research .sr-flow-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #sensia .sr-ex-body {
        grid-template-columns: minmax(0, 1fr);
    }
}






/* Position quote text between the blue quotation marks */
.fg-quote-band__inner > div:last-child {
    position: relative;
}

.fg-quote-band__quote {
    display: inline;
}

.fg-quote-band__mark {
    display: inline-block;
    color: #00BAF2;
    vertical-align: top;
}

.fg-quote-band__mark--close {
    vertical-align: bottom;
    margin-left: 4px;
}


/* CLIENT QUOTES — OPENING AND CLOSING QUOTATION MARKS */

/* ============================================================
   CLIENT QUOTES — QUOTATION MARK SPACING
   ============================================================ */

.fg-client-quote__text {
    position: relative;
    margin-top: 12px;
    line-height: inherit;
}

.fg-client-quote__mark {
    color: #00BAF2;
    font-size: 1.15em;
    font-weight: 700;
    margin: 0;
}

.fg-client-quote__mark--close {
    display: inline;
    margin-left: 2px;
    white-space: nowrap;
    vertical-align: baseline;
}






/* ============================================================
   TRUSTED GLOBALLY + IFF CLIENT PERSPECTIVE
   ============================================================ */

.fgtb-section {
  padding: 40px 0;
  /* Keep the existing background colour unchanged */
}

.fgtb-container {
  width: 100%;
  max-width: 1375px;
  margin: 0 auto;
  padding: 0 32px;

  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  gap: 40px;
  align-items: center;
}

.fgtb-main {
  min-width: 0;
}

.fgtb-main .fh-trusted-label {
  margin-bottom: 12px;
}

.fgtb-main .fh-trusted-title {
  margin-bottom: 12px;
}

.fgtb-main .fh-trusted-sub {
  margin-bottom: 28px;
}

/* Five logos per row */
.fgtb-main .fgtb-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}

.fgtb-main .fgtb-logo {
  min-width: 0;
  min-height: 105px;
  padding: 16px 10px;

  display: flex;
  align-items: center;
  justify-content: center;
  /*border: 1px solid rgba(255, 255, 255, 0.10);*/
}

.fgtb-main .fgtb-logo img {
  display: block;
  width: 100%;
  max-width: 150px;
  height: 50px;
  object-fit: contain;
}

/* IFF testimonial card */
.fg-iff-card {
  min-width: 0;
  padding: 28px 26px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 3px solid #29A8E0;
  border-radius: 14px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.fg-iff-logo {
  color: white;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
}

.fg-iff-label {
  margin-top: 6px;
  color: #29A8E0;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fg-iff-quote {
  color: white;
  margin: 0;
  font-size: 22px;
  line-height: 1.45;
  font-weight: 500;
}

/* Tablet */
@media (max-width: 1000px) {
  .fgtb-container {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .fg-iff-card {
    max-width: none;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .fgtb-container {
    padding: 0 20px;
    gap: 24px;
  }

  .fgtb-main .fgtb-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fgtb-main .fgtb-logo {
    min-height: 90px;
    padding: 12px 8px;
  }

  .fgtb-main .fgtb-logo img {
    height: 42px;
  }

  .fg-iff-card {
    padding: 22px 20px;
  }

  .fg-iff-quote {
    font-size: 18px;
  }
}



/* ============================================================
   HOW IT WORKS + CREDIBILITY — DARK GRADIENT
   ============================================================ */

   .fh-flow{
        background: #0C1A36 !important;
   }
   
.fh-cred {
 
  background: linear-gradient(105deg, rgba(12, 26, 54, 0.96) 0%, rgba(12, 26, 54, 0.85) 55%, rgba(12, 26, 54, 0.55) 100%) !important;

  margin-bottom: 0 !important;
  color: #fff !important;
}

/* How It Works text */
.fh-flow .fh-flow-label,
.fh-flow .fh-flow-arrow {
  color: #fff !important;
}

/* Step numbers */
.fh-flow .fh-flow-num {
  color: #fff !important;
}

/* Credibility heading */
.fh-cred .fh-cred-label {
  color: #00BAF2 !important;
}

/* Credibility numbers */
.fh-cred .fh-cred-num {
  color: #fff !important;
}

/* Credibility descriptions */
.fh-cred .fh-cred-stat-label {
  color: #fff !important;
}

/* Divider lines */
.fh-cred .fh-cred-divider {
  border-color: rgba(255, 255, 255, 0.35) !important;
  background-color: rgba(255, 255, 255, 0.35) !important;
}

/* ============================================================
   DSM-FIRMENICH — KEEP WHITE
   ============================================================ */

.fg-quote-band {
  background: #fff !important;
  margin-top: 0 !important;
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.fg-quote-band .fg-quote-band__logo-text,
.fg-quote-band .fg-quote-band__quote {
  color: #1B3A6B !important;
}

.fg-quote-band .fg-quote-band__label,
.fg-quote-band .fg-quote-band__mark {
  color: #00BAF2 !important;
}

.fg-quote-band .fg-quote-band__inner {
  gap: 36px !important;
}

@media (max-width: 768px) {
  .fg-quote-band {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .fg-quote-band .fg-quote-band__inner {
    gap: 20px !important;
  }
}



.fh-cred-num{font-size:clamp(44px,4.6vw,64px) !important}
.fh-cred-grid{column-gap:40px !important}




/* ============================================================
   SOLUTIONS PAGE — HERO BACKGROUND IMAGE OVERRIDE
   ============================================================ */

.sr-hero {
  background-image:
    linear-gradient(
      105deg,
      rgba(12, 26, 54, 0.96) 0%,
      rgba(12, 26, 54, 0.72) 55%,
      rgba(12, 26, 54, 0.55) 100%
    ),
    url('/wp-content/themes/fmcg/static/img/solutions-top-banner.jpeg');

  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
}

.sr-hero .sr-hero-inner {
  position: relative;
  z-index: 1;
}

.sr-hero h1 {
  color: #fff;
}

.sr-hero p {
  color: rgba(255, 255, 255, 0.85);
}

.sr-hero .sr-hero-note {
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 700px) {
  .sr-hero {
    background-position: center center;
  }
}




/* ============================================================
   HOMEPAGE HERO — TEXT LEFT, IMAGE RIGHT
   ============================================================ */

.fh-hero {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  position: relative;
  overflow: hidden;
  min-height: 520px;
}

/* Image on the right */
.fh-hero .fh-hero-media {
  margin-left: -5%;
  position: relative !important;
  inset: auto !important;
  grid-column: 2;
  grid-row: 1;
  width: 95%;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
}

/* Show the complete image */
.fh-hero .fh-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Remove the image overlay */
.fh-hero .fh-hero-media-overlay {
  display: none !important;
}

/* Text on the left */
.fh-hero .fh-hero-content {
  position: relative !important;
  inset: auto !important;
  grid-column: 1;
  grid-row: 1;
  width: 100%;  
  z-index: 2;
}

.fh-hero .fh-hero-copy {
  max-width: 650px;
}

/* Keep the text readable */
.fh-hero .fh-hero-title,
.fh-hero .fh-hero-eyebrow,
.fh-hero .fh-hero-sub {
  text-align: left;
}

/* Mobile — stack text and image */
@media (max-width: 768px) {
  .fh-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .fh-hero .fh-hero-content {
    grid-column: 1;
    grid-row: 1;
    padding: 40px 20px 24px;
  }

  .fh-hero .fh-hero-media {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    height: auto;
  }

  .fh-hero .fh-hero-media img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}






/* TRUSTED GLOBALLY — align logos and IFF in one row */

.fgtb-section .fgtb-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px !important;
  align-items: center !important;
  gap: 32px !important;
}

/* Logo area */
.fgtb-section .fgtb-main {
  min-width: 0 !important;
  margin-bottom: 0 !important;
}

.fgtb-section .fgtb-main .fgtb-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  column-gap: 20px !important;
  row-gap: 24px !important;
}

/* Larger logos */
.fgtb-section .fgtb-main .fgtb-logo img {
  width: 100% !important;
  max-width: 220px !important;
  height: 80px !important;
  object-fit: contain !important;
}

/* IFF card: same row as logos */
.fgtb-section .fg-iff-card {
  width: 100% !important;
  max-width: 300px !important;
  margin: 0 !important;
  align-self: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

/* Tablet: stack the card below the logos */
@media (max-width: 900px) {
  .fgtb-section .fgtb-container {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .fgtb-section .fg-iff-card {
    max-width: 420px !important;
    justify-self: center !important;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .fgtb-section .fgtb-main .fgtb-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .fgtb-section .fgtb-main .fgtb-logo img {
    height: 60px !important;
  }

  .fgtb-section .fg-iff-card {
    max-width: 100% !important;
  }
}









/* ============================================================
   Home Page Updated CSS
   ============================================================ */
   
   
   
/* ============================================================
   HOMEPAGE — OCT 2026 (Rooban pack: phani-homepage-pack-final)
   Everything below is additive. LOCKED items are NOT touched:
   - Hero Opportunity Scanner image / size / position (live)
   - Trusted Globally logos size + layout (live)
   - Footer layout + FG logo placement (live)
   ============================================================ */


/* ------------------------------------------------------------
   1. HEADER — taller, bigger logo, more spacing (site-wide)
   ------------------------------------------------------------ */
.nav{
  height:80px !important;
  min-height:80px !important;
}
.nav-logo{font-size:22px}
.nav-logo img{height:40px;width:auto;display:block}
.nav-links{gap:32px}
.nav-links a{font-size:16px}
.nav-links a.nav-cta,
.nav-cta{
  padding:12px 20px;
  font-size:15px;
}

/* Mobile: collapse menu under 900px so nothing pushes the page wide */
@media(max-width:900px){
  .nav{
    padding:0 20px !important;
    position:sticky;
  }
  .nav-links{display:none !important}
  .nav-links.open{
    display:flex !important;
    flex-direction:column;
    align-items:flex-start;
    position:absolute;
    top:80px;
    left:0;
    right:0;
    background:#1a335f;
    padding:1rem 20px 1.5rem;
    gap:1.5rem;
    z-index:99;
  }
  .hamburger,
  .menu{display:block}
}


/* ------------------------------------------------------------
   2. HERO — clean-up only (image block untouched)
   ------------------------------------------------------------ */
.fh-hero .fh-hero-title{
  font-size:42px;
  line-height:1.14;
  letter-spacing:-0.6px;
  margin-bottom:32px;
}

/* 1-2-3 under the buttons */
.fh-hero-journey{
  list-style:none;
  margin:36px 0 0;
  padding:26px 0 0;
  border-top:1px solid rgba(255,255,255,.12);
  display:grid;
  gap:14px;
  max-width:520px;
}
.fh-hero-journey-item{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:16px;
  font-weight:600;
  line-height:1.4;
  color:#fff;
}
.fh-hero-journey-num{
  font-style:normal;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#29A8E0;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:700;
  flex:none;
}

@media(max-width:768px){
  .fh-hero .fh-hero-title{font-size:30px;line-height:1.18;margin-bottom:24px}
  .fh-hero-journey{margin-top:28px;padding-top:22px}
}


/* ------------------------------------------------------------
   3. COMMERCIAL DECISION ENGINE STRIP — black like the hero,
      no dividing line, aligned to the hero text
   ------------------------------------------------------------ */
.fh-ce{
  background:#000;
  color:#fff;
  border:0;
  padding:0 4rem 44px;
}
.fh-ce-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.fh-ce-label{
  margin:0 0 8px;
  color:#00BAF2;
  font-size:14px;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
}
.fh-ce-text{
  margin:0;
  color:#fff;
  font-size:20px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.2px;
}
.fh-ce-link{
  color:#29A8E0;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.fh-ce-link:hover{color:#00BAF2}
@media(max-width:900px){
  .fh-ce{padding:8px 20px 40px}
  .fh-ce-inner{flex-direction:column;align-items:flex-start;gap:12px}
  .fh-ce-text{font-size:18px}
  .fh-ce-link{white-space:normal}
}


/* ------------------------------------------------------------
   4. STATS — faded navy (the only fade at the top)
   ------------------------------------------------------------ */
.fh-cred{
  background:linear-gradient(105deg,rgba(12,26,54,.96) 0%,rgba(12,26,54,.85) 55%,rgba(12,26,54,.55) 100%),#F5F6F8 !important;
  padding:64px 4rem 68px !important;
}
.fh-cred .fh-cred-label{color:#00BAF2 !important}
.fh-cred .fh-cred-divider{
  height:1px;
  border:0 !important;
  background:rgba(255,255,255,.18) !important;
}
.fh-cred .fh-cred-num{
  color:#fff !important;
  font-weight:300;
  font-size:clamp(44px,4.6vw,64px) !important;
}
.fh-cred .fh-cred-stat-label{
  color:#fff !important;
  font-size:15px;
}
.fh-cred .fh-cred-grid{column-gap:40px !important}

/* Mobile: two stats per row */
@media(max-width:900px){
  .fh-cred{padding:48px 24px 52px !important}
  .fh-cred .home-grid.fh-cred-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:24px !important;
    row-gap:32px !important;
  }
  .fh-cred .fh-cred-num{min-height:0}
}


/* ------------------------------------------------------------
   5. TOP 10 TRENDS 2027 — rounded card on white, no fade
   ------------------------------------------------------------ */
.fh-trends-card{
  background:#fff !important;
  padding:72px 24px !important;
}
.fh-trends-card .trends-banner{
  display:block;
  position:relative;
  width:100%;
  max-width:1192px;
  margin:0 auto;
  padding:0;
  border-radius:20px;
  overflow:hidden;
  text-decoration:none;
}
.fh-trends-card .trends-banner .trends-banner-image{
  display:block;
  width:100%;
  height:460px;
  object-fit:cover;
  object-position:50% 45%;
}
@media(max-width:900px){
  .fh-trends-card{padding:48px 16px !important}
  .fh-trends-card .trends-banner{border-radius:14px}
  .fh-trends-card .trends-banner .trends-banner-image{height:auto}
}


/* ------------------------------------------------------------
   6. RESOURCES — feature card with navy fade, side cards,
      four photo cards, "Get in touch" CTA
   ------------------------------------------------------------ */
.fh-insights{background:#fff}
.fh-insights .rs-feat-grid{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:24px;
  margin:0 0 24px;
}

/* Feature card */
.fh-insights .rs-feat-primary{
  min-height:440px;
  border-radius:14px;
}
.fh-insights .rs-feat-primary-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(12,26,54,.15) 0%,rgba(12,26,54,.92) 70%);
}
.fh-insights .rs-feat-primary-content{
  justify-content:flex-end;
  padding:32px;
}
.fh-insights .rs-feat-h2{flex:none;font-size:24px;letter-spacing:-.4px}
.fh-insights .rs-feat-desc{color:rgba(255,255,255,.8)}
.fh-insights .rs-feat-foot{border-top-color:rgba(255,255,255,.2)}
.fh-insights .rs-link-navy{color:#fff}

/* Two side cards: image left, text right */
.fh-insights .rs-feat-stack{display:grid;gap:24px}
.fh-insights .rs-feat-card{
  display:grid;
  grid-template-columns:150px 1fr;
  border-radius:14px;
  border:1px solid #e1e8f0;
}
.fh-insights .rs-feat-thumb,
.fh-insights .rs-feat-thumb-grad{
  height:auto;
  min-height:100%;
}
.fh-insights .rs-feat-thumb-grad{
  align-items:flex-end;
  padding:16px;
}
.fh-insights .rs-feat-thumb-word{font-size:18px;line-height:1.15}
.fh-insights .rs-feat-card-body{padding:22px 24px}
.fh-insights .rs-tag-light{color:#1a8bc0}

/* Four photo cards */
.fh-insights .fh-mini-list{gap:24px}
.fh-insights .fh-mini-card{border-radius:12px;border-color:#e1e8f0;box-shadow:none}
.fh-insights .fh-mini-thumb{height:120px;min-height:120px}
.fh-insights .fh-mini-img-1,
.fh-insights .fh-mini-img-2,
.fh-insights .fh-mini-img-3,
.fh-insights .fh-mini-img-4{opacity:1;filter:none}
.fh-insights .fh-mini-tag-1,
.fh-insights .fh-mini-tag-2,
.fh-insights .fh-mini-tag-3,
.fh-insights .fh-mini-tag-4{color:#1a8bc0}

/* Get in touch CTA */
.fh-insights-cta{
  margin-top:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}
.fh-insights-cta-text{
  margin:0;
  font-size:17px;
  font-weight:600;
  color:#1B3A6B;
}

@media(max-width:900px){
  .fh-insights .rs-feat-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .fh-insights .rs-feat-card{grid-template-columns:1fr}
  .fh-insights .rs-feat-thumb,
  .fh-insights .rs-feat-thumb-grad{height:140px;min-height:140px}
  .fh-insights .fh-mini-thumb{height:160px;min-height:160px}
}


/* ------------------------------------------------------------
   7. TRUSTED GLOBALLY — live design kept. IFF text only.
   (Logo size / grid / card layout above are untouched.)
   ------------------------------------------------------------ */
.fgtb-section .fg-iff-quote{
  font-size:16px !important;
  line-height:1.6 !important;
}
.fgtb-section .fg-iff-logo{font-size:18px !important}


/* ------------------------------------------------------------
   8. CLIENT QUOTES — three equal columns, pale-blue box on white
   ------------------------------------------------------------ */
.fg-client-quotes{
  background:#fff !important;
  padding:56px 24px !important;
}
.fg-client-quotes .fg-client-quotes__inner{
  max-width:1192px;
  margin:0 auto;
  background:#EAF5FC;
  border-radius:20px;
  padding:40px 44px;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  align-items:start;
  box-sizing:border-box;
}
.fg-client-quotes .fg-client-quote{
  margin:0 !important;
  padding:0 28px !important;
  width:auto !important;
  border:0 !important;
  display:block;
}
.fg-client-quotes .fg-client-quote:first-child{padding-left:0 !important}
.fg-client-quotes .fg-client-quote:last-child{padding-right:0 !important}
.fg-client-quotes .fg-client-quote + .fg-client-quote{
  border-left:1px solid rgba(27,58,107,.15) !important;
}
.fg-client-quotes .fg-client-quote__name{
  margin:0 0 10px;
  font-size:17px;
  font-weight:700;
  line-height:1.25;
  color:#1B3A6B;
}
.fg-client-quotes .fg-client-quote__text{
  margin:0;
  font-size:15px;
  line-height:1.6;
  font-weight:500;
  color:#1B3A6B;
}

@media(max-width:900px){
  .fg-client-quotes{padding:40px 16px !important}
  .fg-client-quotes .fg-client-quotes__inner{
    grid-template-columns:1fr !important;
    padding:28px 24px;
  }
  .fg-client-quotes .fg-client-quote{padding:0 !important}
  .fg-client-quotes .fg-client-quote + .fg-client-quote{
    border-left:0 !important;
    border-top:1px solid rgba(27,58,107,.15) !important;
    margin-top:28px !important;
    padding-top:28px !important;
  }
}


/* ------------------------------------------------------------
   9. AI CAPABILITIES — white, thin top line, less space above
   ------------------------------------------------------------ */
.fh-ai{
  background:#fff !important;
  border-top:1px solid #E3E9F1;
  padding-top:24px !important;
}
.fh-ai-reviews{display:none}   /* reviews removed from the home page */

/* DEE card image: show the whole card, no left-side crop */
.fh-dee-card-image{
  object-fit:contain !important;
  object-position:center !important;
  background:#fff;
}

/* CTAs: Sensia turquoise, DEE yellow */
.fh-ai-btn--sensia{
  background:#00CFC8;
  border:1.5px solid #00CFC8;
  color:#0a1220;
}
.fh-ai-btn--sensia:hover{background:#00b8b2;border-color:#00b8b2}
.fh-ai-btn--dee{
  background:#FFD84D;
  border:1.5px solid #FFD84D;
  color:#1B3A6B;
}
.fh-ai-btn--dee:hover{background:#F2C832;border-color:#F2C832}



/* ------------------------------------------------------------
   7b. TRUSTED GLOBALLY — heading full width, IFF aligned with logos
   (logo size 80px and IFF card styling unchanged)
   ------------------------------------------------------------ */
.fgtb-section .fgtb-container{
  display:block !important;
}
.fgtb-section .fgtb-head{margin-bottom:28px}
.fgtb-section .fgtb-head .fh-trusted-label,
.fgtb-section .fgtb-head .fh-trusted-title{margin-bottom:12px}
.fgtb-section .fgtb-head .fh-trusted-sub{margin-bottom:0}
.fgtb-section .fgtb-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:32px;
  align-items:stretch;               /* IFF card = same height as the logo block */
}
.fgtb-section .fgtb-body .fgtb-main{
  display:flex;
  align-items:center;
}
.fgtb-section .fgtb-body .fgtb-grid{width:100%}
.fgtb-section .fgtb-body .fg-iff-card{
  align-self:stretch !important;
  justify-content:center;
  /* logo cells have 16px top/bottom padding (live) — match it so the
     card's top/bottom edges line up with the logo images, not the cells */
  margin:16px 0 !important;
}
@media(max-width:900px){
  .fgtb-section .fgtb-body{grid-template-columns:1fr;gap:24px}
  .fgtb-section .fgtb-body .fg-iff-card{justify-self:center;margin:0 !important}
}


/* ------------------------------------------------------------
   10a. EYEBROW LABELS — one shared size site-wide
   ------------------------------------------------------------ */
.fh-hero-eyebrow,
.fh-cred-label,
.fh-trusted-label,
.fh-insights-eyebrow,
.fh-insights .fh-insights-eyebrow,
.fh-ai-eyebrow,
.fh-help-eyebrow,
.trends-banner-eyebrow,
.fh-ce-label{
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:1.8px !important;
  text-transform:uppercase;
}
.fh-insights .fh-insights-eyebrow,
.fh-ai-eyebrow{color:#1a8bc0}


/* ------------------------------------------------------------
   Remove "Client perspective" labels on every quote
   ------------------------------------------------------------ */
.fg-iff-label,
.fg-client-quote__label,
.fg-quote-band__label{display:none !important}


/* ------------------------------------------------------------
   12. QUOTE MARKS — hanging cyan marks (site-wide)
   ------------------------------------------------------------ */
.fg-quote-band__mark,
.fg-client-quote__mark{display:none !important}

.fg-quote-band__quote,
.fg-client-quote__text{
  position:relative;
  font-style:normal !important;
}
.fg-quote-band__quote::before,
.fg-client-quote__text::before{
  content:"\201C";
  color:#29A8E0;
  position:absolute;
  left:-0.5em;
  top:0;
}
.fg-quote-band__quote::after,
.fg-client-quote__text::after{
  content:"\201D";
  color:#29A8E0;
  margin-left:-0.28em;
}


/* ------------------------------------------------------------
   Mobile fixes found in the 375px check
   ------------------------------------------------------------ */
@media(max-width:768px){
  /* hero screenshot was absolutely positioned → 0px tall on phones */
  .fh-hero .fh-hero-media{margin-left:0;width:100%;padding:0 20px 40px;box-sizing:border-box}
  .fh-hero .fh-hero-media img{position:static !important;width:100%;height:auto}

  /* Solutions: stack the three options so "Report Store" is not cut off */
  .fh-help-content{padding:3.5rem 20px}
  .fh-help-title{font-size:30px}
  .fh-help-cols{flex-direction:column;gap:18px}
  .fh-help-col,.fh-help-col-mid,.fh-help-col-end{padding:0;border-right:0}
}

/* ------------------------------------------------------------
   13. PHONE SAFETY (375px) — no sideways scroll from homepage
   ------------------------------------------------------------ */
#main-content{overflow-x:clip}
@media(max-width:600px){
  .fh-hero .fh-hero-ctas a{flex:1 1 auto;text-align:center}
}

/* ===== end HOMEPAGE — OCT 2026 ===== */







/* ============================================================
   COMMERCIAL ENGINE PAGE  (/commercial-engine/)
   Every class is prefixed fg-ce- and every rule is scoped to
   this page, so it can be appended to the site stylesheet
   without affecting the home page or any other page.
   Font: Arial (site font). Sizes: site type scale.
   Images to upload to /wp-content/themes/fmcg/static/img/:
     commercial-engine-hero.jpg, commercial-engine-band.jpg,
     commercial-engine-demo.jpg, commercial-engine-scanner.webp,
     commercial-engine-scanner.png, commercial-engine-score.webp,
     commercial-engine-score.png
   ============================================================ */

/* ---------- Page base ---------- */
.fg-ce-page{
  --fg-ce-navy:#1B3A6B;
  --fg-ce-navy-d:#0f2347;
  --fg-ce-cyan:#29A8E0;
  --fg-ce-orange:#F0694E;
  --fg-ce-orange-d:#D9542F;
  --fg-ce-orange-t:#FDECE7;
  --fg-ce-ink:#13213a;
  --fg-ce-muted:#5b6b82;
  --fg-ce-line:#E1E8F0;
  --fg-ce-soft:#F5F7FA;
  background:#fff;
  color:var(--fg-ce-ink);
  font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.fg-ce-page *,
.fg-ce-page *::before,
.fg-ce-page *::after{box-sizing:border-box}
.fg-ce-page a{color:inherit}

.fg-ce-wrap{
  max-width:1180px;
  margin:0 auto;
  padding-left:32px;
  padding-right:32px;
}

/* Eyebrow label (orange dot + uppercase) — 14px to match the site's label size */
.fg-ce-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--fg-ce-orange);
}
.fg-ce-eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--fg-ce-orange);
  flex:none;
}

/* Section headings */
.fg-ce-page h2{
  margin:12px 0 16px;
  font-size:32px;
  line-height:1.2;
  letter-spacing:-.6px;
  font-weight:600;
  color:var(--fg-ce-navy);
  text-wrap:balance;
}

/* Buttons */
.fg-ce-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:600 16px/1 'Inter','Inter Fallback',Arial,Helvetica,sans-serif;
  padding:15px 24px;
  border-radius:8px;
  text-decoration:none;
  border:1.5px solid transparent;
  cursor:pointer;
}
.fg-ce-btn-o{background:var(--fg-ce-orange-d);color:#fff !important}
.fg-ce-btn-o:hover{background:#C24826}
.fg-ce-btn-g{border-color:rgba(255,255,255,.35);color:#fff !important;background:transparent}
.fg-ce-btn-g:hover{border-color:#fff}
.fg-ce-btn:focus-visible,
.fg-ce-tab:focus-visible{outline:3px solid var(--fg-ce-cyan);outline-offset:3px}

/* ============================================================
   1. HERO (photo + tilted Opportunity Scanner mock)
   ============================================================ */
.fg-ce-hero{
  position:relative;
  z-index:2;
  overflow:visible;
  color:#fff;
  background:#0f2347 url("/wp-content/themes/fmcg/static/img/commercial-engine-hero.jpg") 62% 30%/cover no-repeat;
}
.fg-ce-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(90deg,rgba(15,35,71,.97) 0%,rgba(15,35,71,.9) 36%,rgba(27,58,107,.55) 62%,rgba(27,58,107,.25) 100%);
}
.fg-ce-hero .fg-ce-wrap{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:48px;
  align-items:end;
  min-height:640px;
  padding-top:96px;
  padding-bottom:0;
}
.fg-ce-hero-copy{align-self:center;padding-bottom:72px}
.fg-ce-hero h1{
  margin:16px 0 10px;
  font-size:44px;
  line-height:1.12;
  letter-spacing:-.5px;
  font-weight:700;
  color:#fff;
}
.fg-ce-sub{margin:0 0 22px;color:var(--fg-ce-orange);font-size:18px;font-weight:600}
.fg-ce-lead{margin:0 0 10px;font-size:18px;font-weight:600;color:#fff}
.fg-ce-body{margin:0 0 30px;max-width:46ch;font-size:18px;line-height:1.55;color:rgba(255,255,255,.75)}
.fg-ce-ctas{display:flex;gap:12px;flex-wrap:wrap}

/* Product screenshot (Opportunity Scanner image, tilted like the mock) */
.fg-ce-stage{
  position:relative;
  z-index:3;
  align-self:end;
  justify-self:stretch;
  margin-bottom:-120px;
  /* let the screenshot run a little into the right margin on wide screens */
  margin-right:calc(-1 * clamp(0px, (100vw - 1180px) / 2 - 40px, 64px));
}
.fg-ce-stage picture{display:block}
.fg-ce-mock-img{
  display:block;
  width:100%;
  height:auto;
  transform:perspective(1600px) rotateY(-7deg) rotateX(2deg);
  transform-origin:left center;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.35));
}


/* ============================================================
   CLIENT QUOTE (sits under the hero; mock overlaps into it)
   ============================================================ */
.fg-ce-hq{
  position:relative;
  z-index:1;
  background:#fff;
  border-bottom:1px solid var(--fg-ce-line);
}
.fg-ce-hq .fg-ce-wrap{
  max-width:980px;
  padding-top:170px;
  padding-bottom:64px;
  text-align:center;
}
.fg-ce-hq-q{
  margin:0 auto;
  font-size:18px;
  line-height:1.45;
  font-weight:500;
  font-style:normal;
  color:var(--fg-ce-navy);
}
.fg-ce-hq-q::before{content:"\201C";color:var(--fg-ce-orange)}
.fg-ce-hq-q::after{content:"\201D"}
.fg-ce-hq-who{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:2px}
.fg-ce-hq-who b{font-size:16px;letter-spacing:-.01em;color:var(--fg-ce-navy)}


/* ============================================================
   2. TWO TOOLS (tabs)
   ============================================================ */
.fg-ce-tools{background:#fff;padding:96px 0}
.fg-ce-tools-head{max-width:720px;margin:0 auto 36px;text-align:center}

.fg-ce-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:36px}
.fg-ce-tab{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 18px 14px;
  background:none;
  border:0;
  border-bottom:4px solid transparent;
  cursor:pointer;
  font:600 26px/1 'Inter','Inter Fallback',Arial,Helvetica,sans-serif;
  letter-spacing:-.6px;
  color:#b6c1d0;
}
.fg-ce-tab small{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:2px solid currentColor;
  border-radius:50%;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
}
.fg-ce-tab[aria-selected="true"]{color:var(--fg-ce-navy);border-bottom-color:var(--fg-ce-orange)}
.fg-ce-tab[aria-selected="true"] small{color:var(--fg-ce-orange-d)}
.fg-ce-tab-arrow{align-self:center;color:var(--fg-ce-orange);font-size:26px}

.fg-ce-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:56px;
  align-items:center;
  padding:56px;
  background:var(--fg-ce-soft);
  border-radius:24px;
}
.fg-ce-panel[hidden]{display:none !important}
.fg-ce-panel h3{
  margin:10px 0 14px;
  font-size:22px;
  line-height:1.25;
  letter-spacing:-.6px;
  font-weight:600;
  color:var(--fg-ce-navy);
}
.fg-ce-panel p{margin:0 0 14px;font-size:16px;color:#4a5a72}
.fg-ce-panel .fg-ce-areas-lbl{
  margin:22px 0 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#8a99ad;
}
.fg-ce-chips{display:flex;flex-wrap:wrap;gap:8px}
.fg-ce-chips span{
  padding:9px 14px;
  font-size:16px;
  font-weight:600;
  color:var(--fg-ce-navy);
  background:#fff;
  border:1px solid var(--fg-ce-line);
  border-left:3px solid var(--fg-ce-orange);
  border-radius:8px;
}

/* Example screenshots in the two tabs */
.fg-ce-panel .fg-ce-cap{margin:10px 0 0;font-size:12px;color:#8a99ad;text-align:right}

/* Opportunity Scanner screenshot in the scanner tab: wider image column */
.fg-ce-panel.fg-ce-panel-wide{
  grid-template-columns:minmax(0,.75fr) minmax(0,1.35fr);
  gap:40px;
  padding:48px;
}
.fg-ce-panel picture{display:block}
.fg-ce-shot-img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 24px 30px rgba(27,58,107,.18));
}
/* screenshot without its own rounded corners */
.fg-ce-shot-img-framed{
  border-radius:12px;
  border:1px solid var(--fg-ce-line);
  filter:none;
  box-shadow:0 24px 60px rgba(27,58,107,.16);
}

/* ============================================================
   3. PHOTO BAND — insight-led to decision-led
   ============================================================ */
.fg-ce-band{
  position:relative;
  display:flex;
  align-items:center;
  min-height:560px;
  background:#0f2347 url("/wp-content/themes/fmcg/static/img/solutions_refined_Analytics_War_Room.png") center/cover no-repeat;
}
.fg-ce-band::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(15,35,71,.94) 0%,rgba(15,35,71,.82) 38%,rgba(15,35,71,.15) 70%,rgba(15,35,71,0) 100%);
}
.fg-ce-band .fg-ce-wrap{position:relative;z-index:1;width:100%}
.fg-ce-band-in{max-width:560px;padding:72px 0;color:#fff}
.fg-ce-band h2{color:#fff}
.fg-ce-band p{margin:0 0 12px;font-size:16px;color:rgba(255,255,255,.8)}

.fg-ce-shift{
  display:grid;
  grid-template-columns:1fr auto 1.3fr;
  gap:18px;
  align-items:center;
  margin:28px 0;
}
.fg-ce-shift-from{
  font-size:18px;
  font-weight:500;
  line-height:1.3;
  color:rgba(255,255,255,.55);
}
.fg-ce-shift-rule{
  position:relative;
  display:block;
  width:44px;
  height:2px;
  background:var(--fg-ce-orange);
}
.fg-ce-shift-rule::after{
  content:"";
  position:absolute;
  right:-1px;
  top:-4px;
  border:5px solid transparent;
  border-left:7px solid var(--fg-ce-orange);
  border-right:0;
}
.fg-ce-shift-to{
  font-size:26px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.6px;
  color:#fff;
}
.fg-ce-band .fg-ce-tagline{
  margin:0;
  padding-left:14px;
  border-left:3px solid var(--fg-ce-orange);
  font-size:16px;
  font-weight:600;
  color:#fff;
}


/* ============================================================
   4. PLATFORM STRIP
   ============================================================ */
.fg-ce-platform{background:var(--fg-ce-navy-d);color:#fff;padding:72px 0;text-align:center}
.fg-ce-platform-sub{margin:6px 0 28px;font-size:16px;color:rgba(255,255,255,.6)}
.fg-ce-cells{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  overflow:hidden;
  text-align:center;
}
.fg-ce-cells > div{padding:26px 14px;border-left:1px solid rgba(255,255,255,.08)}
.fg-ce-cells > div:first-child{border-left:0}
.fg-ce-cells b{display:block;font-size:16px;color:rgba(255,255,255,.75)}
.fg-ce-cells span{font-size:13px;color:rgba(255,255,255,.45)}
.fg-ce-cells .fg-ce-cell-on{background:rgba(240,105,78,.10);box-shadow:inset 0 3px 0 var(--fg-ce-orange)}
.fg-ce-cells .fg-ce-cell-on b{color:#fff}
.fg-ce-cells .fg-ce-cell-on span{color:rgba(255,255,255,.8)}
.fg-ce-cells .fg-ce-cell-on em{
  display:block;
  margin-bottom:6px;
  font-style:normal;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.5px;
  color:var(--fg-ce-orange);
}


/* ============================================================
   5. DEMO FORM beside a photo
   ============================================================ */
.fg-ce-demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:620px}
.fg-ce-demo-img{background:#ddd url("/wp-content/themes/fmcg/static/img/commercial-engine-demo.jpg") center/cover no-repeat}
.fg-ce-demo-form{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:72px 64px;
  background:#fff;
}
.fg-ce-demo-form h2{margin-top:10px}
.fg-ce-demo-intro{margin:0 0 24px;color:var(--fg-ce-muted)}

.fg-ce-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg-ce-form label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--fg-ce-navy)}
.fg-ce-form .fg-ce-full{grid-column:1/-1}
.fg-ce-form input,
.fg-ce-form select{
  width:100%;
  padding:12px 14px;
  font:16px 'Inter','Inter Fallback',Arial,Helvetica,sans-serif;
  color:var(--fg-ce-ink);
  background:#fff;
  border:1px solid #CBD6E3;
  border-radius:8px;
}
.fg-ce-form input:focus,
.fg-ce-form select:focus{outline:2px solid var(--fg-ce-cyan);border-color:transparent}
.fg-ce-form .fg-ce-btn{grid-column:1/-1;justify-content:center;margin-top:6px}
.fg-ce-ok{grid-column:1/-1;margin:0;font-size:14px;color:#146c43}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .fg-ce-hero{background-position:70% 20%}
  .fg-ce-hero .fg-ce-wrap,
  .fg-ce-panel,
  .fg-ce-demo{grid-template-columns:minmax(0,1fr)}
  .fg-ce-hero .fg-ce-wrap{min-height:auto;padding-top:72px}
  .fg-ce-hero .fg-ce-wrap{gap:32px}
  .fg-ce-hero-copy{padding-bottom:0}
  .fg-ce-stage{margin-bottom:-40px;margin-right:0;justify-self:stretch}
  .fg-ce-mock-img{transform:none;filter:drop-shadow(0 18px 28px rgba(0,0,0,.3))}
  .fg-ce-hq .fg-ce-wrap{padding-top:96px}
  .fg-ce-panel,
  .fg-ce-panel.fg-ce-panel-wide{padding:32px;grid-template-columns:minmax(0,1fr)}
  .fg-ce-cells{grid-template-columns:1fr}
  .fg-ce-cells > div{border-left:0;border-top:1px solid rgba(255,255,255,.08)}
  .fg-ce-cells > div:first-child{border-top:0}
  .fg-ce-demo-img{min-height:320px}
}
@media (max-width:768px){
  .fg-ce-hero h1{font-size:34px}
  .fg-ce-page h2{font-size:26px}
  .fg-ce-tab{font-size:20px}
  .fg-ce-shift-to{font-size:22px}
  .fg-ce-tools{padding:64px 0}
}
@media (max-width:600px){
  .fg-ce-wrap{padding-left:16px;padding-right:16px}
  .fg-ce-tab-arrow{display:none}
  .fg-ce-panel,
  .fg-ce-panel.fg-ce-panel-wide{padding:24px 18px}
  .fg-ce-form{grid-template-columns:1fr}
  .fg-ce-demo-form{padding:48px 20px}
  .fg-ce-band{min-height:auto}
  .fg-ce-band::before{background:rgba(15,35,71,.82)}
  .fg-ce-shift{grid-template-columns:1fr}
  .fg-ce-shift-rule{transform:rotate(90deg);margin:4px 0 4px 6px}
}
@media (prefers-reduced-motion:reduce){
  .fg-ce-page *{transition:none !important}
}
/* ===== end COMMERCIAL ENGINE PAGE ===== */

/* ============================================================
   COMMERCIAL ENGINE — round 2 (Rooban, Oct 2026)
   ============================================================ */

/* 1. Hero: no screenshot; copy centred vertically, 96px bottom padding */
.fg-ce-hero .fg-ce-wrap{align-items:center;padding-bottom:96px}
.fg-ce-hero-copy{padding-bottom:0}

/* 7. No dots before any eyebrow on this page */
.fg-ce-eyebrow::before{display:none}

/* 4. Commercial Score: next-action line as a normal sentence */
.fg-ce-panel .fg-ce-next{
  margin:18px 0 0;
  font-size:15px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  color:var(--fg-ce-navy);
}

/* 5. How it helps (directly under Two Tools) */
.fg-ce-intro{position:relative;z-index:1;background:#fff;border-top:1px solid var(--fg-ce-line)}
.fg-ce-intro .fg-ce-wrap{padding-top:72px;padding-bottom:88px}
.fg-ce-intro-eb{text-align:center;margin:0 0 16px}
.fg-ce-intro-p{max-width:820px;margin:0 auto 20px;text-align:center;font-size:19px;line-height:1.65;color:var(--fg-ce-navy)}
.fg-ce-intro-p2{max-width:820px;margin:0 auto 48px;text-align:center;font-size:17px;line-height:1.65;color:var(--fg-ce-muted)}
.fg-ce-intro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.fg-ce-intro-grid > div{border-top:3px solid var(--fg-ce-orange);padding-top:20px}
.fg-ce-page .fg-ce-intro-grid h3{margin:0 0 8px;font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif;font-size:19px;line-height:1.3;font-weight:600;color:var(--fg-ce-navy)}
.fg-ce-intro-grid p{margin:0;font-size:16px;line-height:1.6;color:var(--fg-ce-muted)}

/* Demo form: validation message */
.fg-ce-err{grid-column:1/-1;margin:0;font-size:14px;color:#b42318}
.fg-ce-form [aria-invalid="true"]{border-color:#b42318}

@media (max-width:980px){
  .fg-ce-hero .fg-ce-wrap{padding-bottom:64px}
  .fg-ce-intro .fg-ce-wrap{padding-top:56px}
  .fg-ce-intro-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .fg-ce-intro-eb{text-align:left}
  .fg-ce-intro-p{font-size:17px;text-align:left}
  .fg-ce-intro-p2{font-size:16px;text-align:left}
}
/* ===== end COMMERCIAL ENGINE round 2 ===== */



/* ============================================================
   SOLUTIONS PAGE (/solutions-refined/) — PANEL ALIGNMENT
   Every product panel now follows the Consumer Intelligence
   layout: mock fills the right column (right edge level with
   the accent line), vertically centred, never touching the line.
   !important is needed because older rules use #id selectors.
   ============================================================ */
.sr-product-stage .sr-panel .sr-panel-grid{
  grid-template-columns:.88fr 1.12fr !important;
  gap:42px !important;
  align-items:center !important;
  min-width:0 !important;
}
.sr-product-stage .sr-panel .sr-panel-copy{
  align-self:center !important;
  margin-top:0 !important;
}
.sr-product-stage .sr-panel .sr-mock{
  justify-self:stretch !important;
  align-self:center !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:24px 0 !important;          /* keeps tall mocks off the accent line */
  box-sizing:border-box;
}

/* Sensia AI — text inside the example box at 14px */
#sensia .sr-mock .sr-ex-q p,
#sensia .sr-mock .sr-ex-table,
#sensia .sr-mock .sr-ex-table th,
#sensia .sr-mock .sr-ex-table td,
#sensia .sr-mock .sr-ex-card p{
  font-size:14px !important;
  line-height:1.5;
}

/* DEE — card image box at 95% of the column, right edge on the line */
.sr-product-stage #dee .sr-mock{
  width:95% !important;
  max-width:95% !important;
  justify-self:end !important;
}

/* Opportunity Scanner + Commercial Score — product screenshots */
.sr-product-stage .sr-mock.sr-mock-shot{
  background:#fff;
  overflow:hidden;
}
.sr-product-stage .sr-mock.sr-mock-shot picture{display:block}
.sr-product-stage .sr-mock.sr-mock-shot .sr-mock-img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
}

/* Selector boxes — hover uses each box's own colour (was always blue) */
.sr-selector .sr-product-tab:hover{
  border-color:var(--acc-line);
  background:color-mix(in srgb, var(--acc) 5%, #fff);
}
.sr-selector .sr-product-tab.active:hover{
  background:color-mix(in srgb, var(--acc) 9%, #fff);
}

/* Screenshot mocks — no white frame/background behind the image */
.sr-product-stage .sr-mock.sr-mock-shot{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
/* Opportunity Scanner image already has rounded transparent corners */
.sr-product-stage #sr-scanner .sr-mock-shot .sr-mock-img{
  filter:drop-shadow(0 14px 30px rgba(27,58,107,.16));
}
/* Commercial Score image is square-cornered: round it here */
.sr-product-stage #commercial .sr-mock-shot .sr-mock-img{
  border-radius:13px;
  box-shadow:0 14px 45px rgba(27,58,107,.12);
}

/* Tablet / mobile: stack copy above the mock, full width */
@media (max-width:980px){
  .sr-product-stage .sr-panel .sr-panel-grid{grid-template-columns:minmax(0,1fr) !important;gap:24px !important}
  .sr-product-stage .sr-panel .sr-mock,
  .sr-product-stage #dee .sr-mock{width:100% !important;max-width:100% !important;margin:0 !important}
}
/* ===== end SOLUTIONS PAGE ===== */


/* ============================================================
   SINGLE REPORT PAGE (Report Store)  — prefix fg-rsp-
   New look from Rooban's report-page design.
   Font: Arial (site font). Sizes: site type scale.
   Every rule is scoped to .fg-rsp-* so nothing else changes.
   The page extends base.twig (Bootstrap/Bulma), so margins,
   sizes and fonts are set explicitly here.
   ============================================================ */
.fg-rsp-page{
  --fg-rsp-navy:#1B3A6B;
  --fg-rsp-teal:#29A8E0;
  --fg-rsp-teal-ink:#1a7fae;
  --fg-rsp-tint:#f2f8fc;
  --fg-rsp-fg:#14243f;
  --fg-rsp-muted:#5a6b84;
  --fg-rsp-line:#dde5ef;
  background:#fff;
  color:var(--fg-rsp-fg);
  font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.fg-rsp-page *,
.fg-rsp-page *::before,
.fg-rsp-page *::after{box-sizing:border-box}
.fg-rsp-page a{color:inherit}

.fg-rsp-wrap{max-width:1160px;margin:0 auto;padding-left:24px;padding-right:24px}

/* ---------- Buttons ---------- */
.fg-rsp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:14px 20px;
  font:600 16px/1 'Inter','Inter Fallback',Arial,Helvetica,sans-serif;
  border-radius:8px;
  border:1.5px solid transparent;
  text-decoration:none !important;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.fg-rsp-btn-primary{background:var(--fg-rsp-navy);color:#fff !important}
.fg-rsp-btn-primary:hover{background:#142d54}
.fg-rsp-btn-primary:disabled{opacity:.55;cursor:default}
.fg-rsp-btn-ghost{background:transparent;border-color:var(--fg-rsp-line);color:var(--fg-rsp-navy) !important}
.fg-rsp-btn-ghost:hover{border-color:var(--fg-rsp-teal)}
.fg-rsp-btn:focus-visible{outline:3px solid var(--fg-rsp-teal);outline-offset:2px}

/* ---------- Breadcrumb ---------- */
.fg-rsp-crumb{padding-top:24px;font-size:14px;color:var(--fg-rsp-muted)}
.fg-rsp-crumb a{text-decoration:none;color:var(--fg-rsp-muted)}
.fg-rsp-crumb a:hover{color:var(--fg-rsp-navy)}
.fg-rsp-crumb span{margin:0 8px;opacity:.6}


/* ============================================================
   HERO: description + buy card
   ============================================================ */
.fg-rsp-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:56px;
  align-items:start;
  padding:20px 0 56px;
}

.fg-rsp-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.fg-rsp-tag{
  padding:6px 10px;
  border-radius:6px;
  background:var(--fg-rsp-tint);
  color:var(--fg-rsp-teal-ink);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.fg-rsp-tag:empty{display:none}

.fg-rsp-page .fg-rsp-title{
  margin:0 0 12px;
  font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif;
  font-size:40px;
  line-height:1.15;
  letter-spacing:-.5px;
  font-weight:700;
  color:var(--fg-rsp-navy);
  text-wrap:balance;
}
.fg-rsp-dek{margin:0 0 28px;max-width:60ch;font-size:18px;line-height:1.55;color:var(--fg-rsp-muted)}

/* Report description from post.content */
.fg-rsp-content{max-width:68ch;margin-top:8px}
.fg-rsp-content h2,
.fg-rsp-content iframe,
.fg-rsp-content .embed-responsive{display:none !important}
.fg-rsp-content p{margin:0 0 16px;font-size:16px;line-height:1.65;color:var(--fg-rsp-fg)}
.fg-rsp-content p:empty{display:none}
.fg-rsp-content h3,
.fg-rsp-content h4{
  margin:28px 0 10px !important;
  font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif;
  font-size:18px;
  line-height:1.35;
  font-weight:700;
  color:var(--fg-rsp-navy);
}
.fg-rsp-content ul{margin:0 0 18px;padding-left:20px;list-style:disc outside}
.fg-rsp-content li{margin:0 0 6px;font-size:16px;line-height:1.6}
.fg-rsp-content strong,
.fg-rsp-content b{color:var(--fg-rsp-fg);font-weight:700}
.fg-rsp-help{margin-top:24px;padding-top:18px;border-top:1px solid var(--fg-rsp-line)}


/* ---------- Buy card ---------- */
.fg-rsp-buy{
  position:sticky;
  top:96px;
  padding:26px;
  background:#fff;
  border:1px solid var(--fg-rsp-line);
  border-radius:14px;
}
.fg-rsp-buy-h{margin:0 0 16px;font-size:18px;font-weight:700;color:var(--fg-rsp-navy)}
.fg-rsp-price{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.fg-rsp-price strong{
  font-size:34px;
  line-height:1.1;
  letter-spacing:-.5px;
  color:var(--fg-rsp-navy);
  font-variant-numeric:tabular-nums;
}
.fg-rsp-cur{display:flex;flex:none;border:1px solid var(--fg-rsp-line);border-radius:7px;overflow:hidden}
.fg-rsp-cur-btn{
  padding:6px 9px;
  background:none;
  border:0;
  font:600 12px 'Inter','Inter Fallback',Arial,Helvetica,sans-serif;
  color:var(--fg-rsp-muted);
  cursor:pointer;
}
.fg-rsp-cur-btn.active,
.fg-rsp-cur-btn[aria-pressed="true"]{background:var(--fg-rsp-navy);color:#fff}
.fg-rsp-vat{margin:0 0 20px;font-size:14px;color:var(--fg-rsp-muted)}
.fg-rsp-stack{display:grid;gap:10px}

.fg-rsp-inc-h{
  margin:22px 0 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--fg-rsp-muted);
}
.fg-rsp-inc{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fg-rsp-inc li{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:14px;line-height:1.4;word-break:break-word}
.fg-rsp-inc svg{flex:none;margin-top:1px;color:var(--fg-rsp-teal)}
.fg-rsp-inc a{color:var(--fg-rsp-teal-ink);text-decoration:none;font-weight:600}
.fg-rsp-inc a:hover{text-decoration:underline}

.fg-rsp-sub{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--fg-rsp-line);font-size:14px;color:var(--fg-rsp-muted)}
.fg-rsp-sub a{color:var(--fg-rsp-teal-ink);font-weight:600}


/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.fg-rsp-sec-h{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:22px}
.fg-rsp-page .fg-rsp-sec-h h2{
  margin:0;
  font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif;
  font-size:28px;
  line-height:1.2;
  letter-spacing:-.5px;
  font-weight:600;
  color:var(--fg-rsp-navy);
}
.fg-rsp-sec-h p{margin:0;font-size:14px;color:var(--fg-rsp-muted)}
.fg-rsp-sec-h-2{margin-top:44px}


/* ============================================================
   PREVIEW: only the Google Slides embed from post.content
   ============================================================ */
.fg-rsp-preview{background:var(--fg-rsp-tint);padding:48px 0}
.fg-rsp-preview-embed > *{display:none !important}
.fg-rsp-preview-embed > iframe,
.fg-rsp-preview-embed > .embed-responsive,
.fg-rsp-preview-embed > p:has(iframe),
.fg-rsp-preview-embed > div:has(iframe){display:block !important}
.fg-rsp-preview-embed > p:has(iframe){font-size:0;margin:0}
.fg-rsp-preview-embed .embed-responsive{padding:0 !important;height:auto !important;overflow:visible}
.fg-rsp-preview-embed iframe{
  display:block !important;
  width:100% !important;
  max-width:960px;
  height:auto !important;
  aspect-ratio:960 / 569;
  margin:0 auto !important;
  position:static !important;
  border:1px solid var(--fg-rsp-line);
  border-radius:8px;
  background:#fff;
}
/* No embed on this report: hide the whole Preview strip */
.fg-rsp-preview:not(:has(iframe)){display:none}


/* ============================================================
   RELATED REPORTS
   ============================================================ */
.fg-rsp-related{padding:52px 0 64px}
.fg-rsp-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fg-rsp-rel a{
  display:flex;
  flex-direction:column;
  padding:20px;
  background:#fff;
  border:1px solid var(--fg-rsp-line);
  border-radius:12px;
  text-decoration:none !important;
  transition:border-color .15s;
}
.fg-rsp-rel a:hover{border-color:var(--fg-rsp-teal)}
.fg-rsp-k{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--fg-rsp-teal-ink)}
.fg-rsp-page .fg-rsp-rel h3{
  flex:1;
  margin:8px 0 14px;
  font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.4;
  font-weight:600;
  color:var(--fg-rsp-navy);
}
.fg-rsp-go{font-size:14px;font-weight:600;color:var(--fg-rsp-muted)}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .fg-rsp-hero{grid-template-columns:minmax(0,1fr);gap:32px}
  .fg-rsp-buy{position:static}
  .fg-rsp-rel{grid-template-columns:minmax(0,1fr)}
  .fg-rsp-page .fg-rsp-title{font-size:32px}
}
@media (max-width:640px){
  .fg-rsp-wrap{padding-left:16px;padding-right:16px}
  .fg-rsp-page .fg-rsp-title{font-size:28px}
  .fg-rsp-dek{font-size:17px}
  .fg-rsp-page .fg-rsp-sec-h h2{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .fg-rsp-page *{transition:none !important}
}
/* ---------- Cart pop-up (report page) ---------- */
.fg-rsp-btn.is-in-cart{background:#fff;color:var(--fg-rsp-navy) !important;border-color:var(--fg-rsp-navy)}
.fg-rsp-btn.is-in-cart:hover{background:var(--fg-rsp-tint)}
html.fg-rsp-cart-open{overflow:hidden}
.fg-rsp-cart{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px}
.fg-rsp-cart[hidden]{display:none !important}
.fg-rsp-cart-backdrop{position:absolute;inset:0;background:rgba(12,26,54,.55)}
.fg-rsp-cart-dialog{
  position:relative;
  width:min(460px,100%);
  max-height:calc(100vh - 32px);
  overflow:auto;
  padding:24px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 30px 70px rgba(12,26,54,.35);
  font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif;
  color:var(--fg-rsp-fg);
}
.fg-rsp-cart-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:4px}
.fg-rsp-page .fg-rsp-cart-head h2{margin:0;font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif;font-size:22px;font-weight:600;color:var(--fg-rsp-navy)}
.fg-rsp-cart-x{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:8px;background:none;color:var(--fg-rsp-muted);cursor:pointer}
.fg-rsp-cart-x:hover{background:var(--fg-rsp-tint);color:var(--fg-rsp-navy)}
.fg-rsp-cart-count{margin:0 0 14px;font-size:14px;color:var(--fg-rsp-muted)}
.fg-rsp-cart-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--fg-rsp-line)}
.fg-rsp-cart-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--fg-rsp-line)}
.fg-rsp-cart-name{font-size:15px;font-weight:600;line-height:1.4;color:var(--fg-rsp-navy)}
.fg-rsp-cart-price{font-size:15px;font-weight:700;color:var(--fg-rsp-fg);font-variant-numeric:tabular-nums}
.fg-rsp-cart-remove{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--fg-rsp-line);border-radius:7px;background:#fff;color:#b42318;cursor:pointer}
.fg-rsp-cart-remove:hover{background:#fdecea;border-color:#f3c2bc}
.fg-rsp-cart-empty{padding:18px 0;font-size:15px;color:var(--fg-rsp-muted);border-bottom:1px solid var(--fg-rsp-line)}
.fg-rsp-cart-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;font-size:15px;color:var(--fg-rsp-muted)}
.fg-rsp-cart-total strong{font-size:22px;color:var(--fg-rsp-navy)}
.fg-rsp-cart-note{margin:4px 0 18px;font-size:13px;color:var(--fg-rsp-muted)}
.fg-rsp-cart-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fg-rsp-btn.is-disabled{opacity:.45;pointer-events:none}
.fg-rsp-cart-continue{display:block;margin:14px auto 0;padding:6px 10px;border:0;background:none;font:600 14px 'Inter','Inter Fallback',Arial,Helvetica,sans-serif;color:var(--fg-rsp-teal-ink);cursor:pointer}
.fg-rsp-cart-continue:hover{text-decoration:underline}
.fg-rsp-cart-x:focus-visible,.fg-rsp-cart-remove:focus-visible,.fg-rsp-cart-continue:focus-visible{outline:3px solid var(--fg-rsp-teal);outline-offset:2px}
@media (max-width:480px){
  .fg-rsp-cart{align-items:flex-end;padding:0}
  .fg-rsp-cart-dialog{width:100%;border-radius:14px 14px 0 0;max-height:85vh}
  .fg-rsp-cart-actions{grid-template-columns:1fr}
}
/* ===== end cart pop-up ===== */
/* ===== end SINGLE REPORT PAGE ===== */


/* ============================================================
   ABOUT PAGE — hero video (Rooban, Oct 2026)
   - Brighter video: full opacity + a lighter overlay that only
     darkens the left side behind the text.
   - Small custom controls bottom-right: Play/Pause + Mute/Unmute.
     No browser control bar. Autoplay stays muted.
   ============================================================ */
.fh-ab-hero .fh-ab-hero-video{opacity:1}
.fh-ab-hero .fh-ab-hero-video::-webkit-media-controls{display:none !important}
.fh-ab-hero .fh-ab-hero-overlay{
  background:linear-gradient(90deg,rgba(8,18,38,.72) 0%,rgba(8,18,38,.5) 38%,rgba(8,18,38,.14) 68%,rgba(8,18,38,0) 100%);
}
/* keep the white text crisp on the brighter video */
.fh-ab-hero .fh-ab-hero-content{text-shadow:0 1px 16px rgba(0,0,0,.35)}
.fh-ab-hero .fh-ab-hero-sub{color:rgba(255,255,255,.88)}

/* controls */
.fh-ab-vctrl{
  position:absolute;
  right:24px;
  bottom:24px;
  z-index:3;
  display:flex;
  gap:8px;
}
.fh-ab-vctrl[hidden]{display:none}
.fh-ab-vbtn{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:rgba(12,26,54,.55);
  color:#fff;
  cursor:pointer;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:background .15s,border-color .15s;
}
.fh-ab-vbtn:hover{background:rgba(12,26,54,.85);border-color:#fff}
.fh-ab-vbtn:focus-visible{outline:3px solid #00baf2;outline-offset:3px}
.fh-ab-vbtn svg{display:block}
/* icon swaps */
.fh-ab-vbtn .fh-ab-i-play,
.fh-ab-vbtn .fh-ab-i-sound{display:none}
.fh-ab-vbtn.is-paused .fh-ab-i-play{display:block}
.fh-ab-vbtn.is-paused .fh-ab-i-pause{display:none}
#fh-ab-mute:not(.is-muted) .fh-ab-i-sound{display:block}
#fh-ab-mute:not(.is-muted) .fh-ab-i-muted{display:none}

@media (max-width:768px){
  .fh-ab-vctrl{right:16px;bottom:16px}
  .fh-ab-vbtn{width:44px;height:44px}   /* bigger tap target on phones */
  .fh-ab-hero .fh-ab-hero-overlay{background:linear-gradient(90deg,rgba(8,18,38,.7) 0%,rgba(8,18,38,.45) 100%)}
}
/* ===== end ABOUT PAGE ===== */


/* ============================================================
   HOMEPAGE — OCT 2026 (round 2, Rooban)
   1) Option B alignment: section text/headings share ONE left
      edge; boxes (Trends card, quotes box) stick out to the left
      of it. Edge = Trends-card edge + 44px (the quotes box padding).
   2) Commercial Decision Engine moved under the Opportunity
      Scanner image in the hero (separate strip removed).
   Everything is scoped to :is(.fh-home, main:has(> .fh-hero)) (the homepage <main>).
   ============================================================ */

:is(.fh-home, main:has(> .fh-hero)){
  /* text edge: 168px at 1440 wide, 88px at 1280, never under 56px on desktop */
  --fh-edge:max(56px, calc((100% - 1192px) / 2 + 44px));
  /* how far boxes stick out left of the text edge */
  --fh-box-out:44px;
}
@media (max-width:900px){
  :is(.fh-home, main:has(> .fh-hero)){ --fh-edge:24px; --fh-box-out:16px; }
}


/* ---------- 2) HERO: image + Commercial Decision Engine caption ---------- */
/* Right-hand column holds the image (same width/position as before) + caption */
:is(.fh-home, main:has(> .fh-hero)) .fh-hero .fh-hero-visual{
  grid-column:2;
  grid-row:1;
  align-self:center;
  min-width:0;
  width:95%;
  margin-left:-5%;            /* same as the live image column */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  padding:48px 0;
  position:relative;
  z-index:1;
}
/* Image box hugs the picture: identical visible size, no letter-boxing */
:is(.fh-home, main:has(> .fh-hero)) .fh-hero .fh-hero-visual .fh-hero-media{
  position:relative !important;
  inset:auto !important;
  grid-column:auto;
  grid-row:auto;
  width:100% !important;
  margin-left:0 !important;
  height:auto !important;
  min-height:0 !important;
  overflow:visible;
}
:is(.fh-home, main:has(> .fh-hero)) .fh-hero .fh-hero-visual .fh-hero-media img{
  position:static !important;
  display:block;
  width:100% !important;
  height:auto !important;
  object-fit:contain;
}
/* Caption under the image: orange label + link (Commercial Engine colour) */
:is(.fh-home, main:has(> .fh-hero)) .fh-hero-ce{text-align:center;max-width:620px;margin-top:8px}
:is(.fh-home, main:has(> .fh-hero)) .fh-hero-ce .fh-ce-label{margin:0 0 10px;color:#F0694E !important}
:is(.fh-home, main:has(> .fh-hero)) .fh-hero-ce-text{
  margin:0 0 12px;
  font-size:18px;
  line-height:1.45;
  font-weight:600;
  color:#fff !important;
}
:is(.fh-home, main:has(> .fh-hero)) .fh-hero-ce .fh-ce-link{font-size:16px;color:#F0694E !important}
:is(.fh-home, main:has(> .fh-hero)) .fh-hero-ce .fh-ce-link:hover{color:#ff8a72 !important}

@media (max-width:768px){
  :is(.fh-home, main:has(> .fh-hero)) .fh-hero .fh-hero-visual{
    grid-column:1;
    grid-row:2;
    width:100%;
    margin-left:0;
    padding:0 20px 44px;
    gap:22px;
  }
  :is(.fh-home, main:has(> .fh-hero)) .fh-hero .fh-hero-visual .fh-hero-media{padding:0 !important}
  :is(.fh-home, main:has(> .fh-hero)) .fh-hero-ce-text{font-size:17px}
}


/* ---------- 1) OPTION B: one text edge for the sections below ---------- */

/* Resources: heading + cards start on the edge */
:is(.fh-home, main:has(> .fh-hero)) .fh-insights{
  padding-left:var(--fh-edge) !important;
  padding-right:var(--fh-edge) !important;
}
:is(.fh-home, main:has(> .fh-hero)) .fh-insights > div{max-width:none !important;width:auto;margin:0}

/* Trusted Globally: heading, logos and IFF card all inside the same
   left AND right edges as the other sections. IFF card 270px (was 300)
   so the logos keep their live size (160px wide logos). */
:is(.fh-home, main:has(> .fh-hero)) .fgtb-section .fgtb-container{
  max-width:none !important;
  padding-left:var(--fh-edge) !important;
  padding-right:var(--fh-edge) !important;
}
:is(.fh-home, main:has(> .fh-hero)) .fgtb-section .fgtb-body{grid-template-columns:minmax(0,1fr) 270px !important;gap:24px !important}
:is(.fh-home, main:has(> .fh-hero)) .fgtb-section .fgtb-body .fg-iff-card{max-width:270px !important}
:is(.fh-home, main:has(> .fh-hero)) .fgtb-section .fgtb-main .fgtb-grid{column-gap:0 !important}
:is(.fh-home, main:has(> .fh-hero)) .fgtb-section .fgtb-main .fgtb-logo{padding-left:2px;padding-right:2px}
/* never larger than the live size (wide logos drew at 160px) */
:is(.fh-home, main:has(> .fh-hero)) .fgtb-section .fgtb-main .fgtb-logo img{max-width:160px !important}
@media (max-width:900px){
  :is(.fh-home, main:has(> .fh-hero)) .fgtb-section .fgtb-body{grid-template-columns:minmax(0,1fr) !important}
  :is(.fh-home, main:has(> .fh-hero)) .fgtb-section .fgtb-body .fg-iff-card{max-width:none !important;width:100% !important;justify-self:stretch !important}
}

/* Client quotes: names/quotes on the edge, pale box sticks out by --fh-box-out */
:is(.fh-home, main:has(> .fh-hero)) .fg-client-quotes{
  padding-left:calc(var(--fh-edge) - var(--fh-box-out)) !important;
  padding-right:calc(var(--fh-edge) - var(--fh-box-out)) !important;
}
:is(.fh-home, main:has(> .fh-hero)) .fg-client-quotes .fg-client-quotes__inner{
  max-width:none;
  padding-left:var(--fh-box-out);
  padding-right:var(--fh-box-out);
}

/* AI capabilities */
:is(.fh-home, main:has(> .fh-hero)) .fh-ai{
  padding-left:var(--fh-edge) !important;
  padding-right:var(--fh-edge) !important;
}
:is(.fh-home, main:has(> .fh-hero)) .fh-ai .fh-ai-inner{max-width:none}

/* Solutions */
:is(.fh-home, main:has(> .fh-hero)) .fh-help .fh-help-content{
  max-width:none;
  padding-left:var(--fh-edge);
  padding-right:var(--fh-edge);
}

/* Top 10 Trends: left as the contained card (text is part of the image) */
/* Phones: hero text on the same 24px edge as every section below */
@media (max-width:768px){
  :is(.fh-home, main:has(> .fh-hero)) .fh-hero .fh-hero-content{padding-left:24px !important;padding-right:24px !important}
  :is(.fh-home, main:has(> .fh-hero)) .fh-hero .fh-hero-visual{padding-left:24px;padding-right:24px}
}
/* ===== end HOMEPAGE round 2 ===== */

/* ============================================================
   CUSTOM RESEARCH — new look (Rooban, custom-research-v4, Oct 2026)
   Page: /custom-research/   Twig: <main id="main-content" class="cr-page">
   Every rule is scoped to .cr-page, so the older .cr-* rules above
   and every other page stay untouched.
   Site type: Arial · eyebrow 14px/1.8px · h1 44px (34 mobile) ·
   h2 36px (26 mobile) · lead 18px (17 mobile) · cards 16px · buttons 16px
   ============================================================ */
.cr-page{
  --cr-navy:#1B3A6B;
  --cr-cyan:#00baf2;
  --cr-cyan-ink:#1a8bc0;
  --cr-muted:#5a6b84;
  --cr-line:#dfe6f0;
  --cr-soft:#eceff4;
  --cr-tint:#F5F9FD;
  font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif;
  color:var(--cr-navy);
}
.cr-page *,.cr-page *::before,.cr-page *::after{box-sizing:border-box}

/* Layout */
.cr-page .cr-container{width:min(1375px,calc(100% - 64px));margin:0 auto}
.cr-page .cr-section{padding:88px 0}

/* Eyebrows / kickers — 14px, 1.8px, uppercase */
.cr-page .cr-eyebrow,
.cr-page .cr-kicker{
  display:block;
  margin:0 0 14px;
  font-size:14px;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
  line-height:1.3;
  color:var(--cr-cyan-ink);
}
.cr-page .cr-dark .cr-kicker{color:var(--cr-cyan)}

/* Headings */
.cr-page h1,.cr-page h2,.cr-page h3{font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif}
.cr-page .cr-section h2{
  margin:0 0 18px;
  font-size:36px;
  line-height:1.2;
  letter-spacing:-.4px;
  font-weight:600;
  color:var(--cr-navy);
  max-width:780px;
}
.cr-page .cr-dark h2{color:#fff;max-width:none}
.cr-page .cr-lead{
  margin:0;
  max-width:720px;
  font-size:18px;
  line-height:1.55;
  color:var(--cr-muted);
}
.cr-page .cr-dark .cr-lead{color:rgba(255,255,255,.78)}

/* Buttons — 16px */
.cr-page .cr-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 24px;
  border-radius:8px;
  border:1.5px solid transparent;
  font-size:16px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  transition:background .15s,color .15s,border-color .15s;
}
.cr-page .cr-btn-blue{background:var(--cr-cyan);border-color:var(--cr-cyan);color:#fff}
.cr-page .cr-btn-blue:hover{background:#009fd6;border-color:#009fd6;color:#fff;transform:none}
.cr-page .cr-btn-outline{background:#fff;border-color:var(--cr-navy);color:var(--cr-navy)}
.cr-page .cr-btn-outline:hover{background:var(--cr-navy);border-color:var(--cr-navy);color:#fff}
.cr-page .cr-btn:focus-visible{outline:3px solid var(--cr-cyan);outline-offset:3px}

/* Photos (real <img>, cropped to fill their box) */
.cr-page .cr-photo{display:block;border-radius:20px;overflow:hidden;background:var(--cr-soft);min-width:0}
.cr-page .cr-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* 1. HERO — white, copy left / photo right */
.cr-page .cr-hero{background:#fff;color:var(--cr-navy);padding:72px 0;border-bottom:1px solid var(--cr-line)}
.cr-page .cr-hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.cr-page .cr-hero-copy{min-width:0}
.cr-page .cr-hero h1{
  margin:0 0 20px;
  max-width:640px;
  font-size:44px;
  line-height:1.12;
  letter-spacing:-.5px;
  font-weight:700;
  color:var(--cr-navy);
}
.cr-page .cr-hero p{margin:0;max-width:600px;font-size:18px;line-height:1.55;color:var(--cr-muted)}
.cr-page .cr-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.cr-page .cr-hero-photo{aspect-ratio:3/2;min-height:420px}

/* 2. WHEN TO USE IT — brand navy, three cards */
.cr-page .cr-section.cr-dark{background:var(--cr-navy);color:#fff}
.cr-page .cr-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.cr-page .cr-why-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  padding:32px 30px;
}
.cr-page .cr-why-card h3{margin:0 0 12px;font-size:20px;line-height:1.3;font-weight:600;color:#fff}
.cr-page .cr-why-card p{margin:0;font-size:16px;line-height:1.55;color:rgba(255,255,255,.78)}

/* 3. WHAT YOU WILL RECEIVE — 2×2 cards beside the photo */
.cr-page .cr-section.cr-soft{background:var(--cr-soft)}
.cr-page .cr-recv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:stretch}
.cr-page .cr-pv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:32px}
.cr-page .cr-pv-card{
  background:#fff;
  border:1px solid var(--cr-line);
  border-top:3px solid var(--cr-cyan);
  border-radius:14px;
  overflow:hidden;
  transition:none;
}
.cr-page .cr-pv-card:hover{transform:none;box-shadow:none}
.cr-page .cr-pv-body{padding:24px 24px 26px;border-top:0}
.cr-page .cr-pv-body h3{margin:0 0 8px;font-size:18px;line-height:1.3;font-weight:600;color:var(--cr-navy)}
.cr-page .cr-pv-body p{margin:0;font-size:16px;line-height:1.5;color:var(--cr-muted)}
.cr-page .cr-recv-photo{min-height:520px;height:100%}

/* 4. HOW IT WORKS + GET STARTED — photo left / copy right */
.cr-page .cr-section.cr-flow{background:var(--cr-tint)}
.cr-page .cr-flow-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:stretch}
.cr-page .cr-flow-photo{min-height:560px;height:100%}
.cr-page .cr-steps{margin-top:28px;border-top:1px solid var(--cr-line)}
.cr-page .cr-steps div{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--cr-line);
}
.cr-page .cr-steps b{font-size:16px;line-height:1.5;font-weight:700;color:var(--cr-navy)}
.cr-page .cr-steps span{font-size:16px;line-height:1.5;color:var(--cr-muted)}
.cr-page .cr-flow-cta{margin-top:44px;padding-top:36px;border-top:3px solid var(--cr-cyan)}
.cr-page .cr-flow-cta h3{margin:0 0 12px;font-size:26px;line-height:1.2;font-weight:600;color:var(--cr-navy)}
.cr-page .cr-flow-cta .cr-btn{margin-top:26px}

/* Tablet / phone — one column, photo above the copy */
@media (max-width:980px){
  .cr-page .cr-container{width:calc(100% - 48px)}
  .cr-page .cr-hero-grid,
  .cr-page .cr-recv,
  .cr-page .cr-flow-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .cr-page .cr-hero-photo{order:-1;min-height:0;aspect-ratio:16/10}
  .cr-page .cr-recv-photo,
  .cr-page .cr-flow-photo{order:-1;min-height:0;height:auto;aspect-ratio:16/10}
  .cr-page .cr-why-grid{grid-template-columns:minmax(0,1fr)}
  .cr-page .cr-section h2{max-width:none}
}
@media (max-width:768px){
  .cr-page .cr-hero{padding:48px 0 56px}
  .cr-page .cr-section{padding:64px 0}
  .cr-page .cr-hero h1{font-size:34px}
  .cr-page .cr-section h2{font-size:26px}
  .cr-page .cr-flow-cta h3{font-size:22px}
}
@media (max-width:600px){
  .cr-page .cr-container{width:calc(100% - 32px)}
  .cr-page .cr-hero p,
  .cr-page .cr-lead{font-size:17px}
  .cr-page .cr-pv-grid{grid-template-columns:minmax(0,1fr)}
  .cr-page .cr-steps div{grid-template-columns:minmax(0,1fr);gap:4px}
  .cr-page .cr-why-card{padding:26px 22px}
  .cr-page .cr-actions .cr-btn{flex:1 1 100%}
  .cr-page .cr-photo{border-radius:14px}
}
@media (prefers-reduced-motion:reduce){
  .cr-page *{transition:none !important}
}
/* ===== end CUSTOM RESEARCH — new look ===== */

/* ============================================================
   COMMERCIAL ENGINE — round 3 (Rooban, Oct 2026)
   Platform: frosted cards on the photo band (same style as DEE)
   - Separate navy "The platform" section removed from the twig
     (its old .fg-ce-platform / .fg-ce-cells rules are now unused).
   - Band min-height 720px, text centred above a row of 5 cards,
     light navy fade along the bottom of the photo.
   ============================================================ */
.fg-ce-band{flex-direction:column;align-items:stretch;justify-content:space-between;min-height:720px}
.fg-ce-band::before{
  background:
    linear-gradient(90deg,rgba(15,35,71,.94) 0%,rgba(15,35,71,.82) 38%,rgba(15,35,71,.15) 70%,rgba(15,35,71,0) 100%),
    linear-gradient(0deg,rgba(15,35,71,.72) 0%,rgba(15,35,71,0) 38%);
}
.fg-ce-band>.fg-ce-wrap:not(.fg-ce-plat){flex:1;display:flex;align-items:center}
.fg-ce-band>.fg-ce-plat{display:block;width:100%}
.fg-ce-band .fg-ce-plat{position:relative;z-index:1;padding-bottom:40px}

/* Label above the cards — 13px, capitals, 1.4px */
.fg-ce-plat-lbl{display:block;margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.75)}

/* Five frosted cards in one row */
.fg-ce-plat-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.fg-ce-plat-cell{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:16px;
  border-radius:12px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  text-decoration:none;
  transition:background .15s;
}
.fg-ce-plat-cell:hover{background:rgba(255,255,255,.24)}
.fg-ce-plat-cell:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fg-ce-plat-cell b{font-size:15px;font-weight:700;line-height:1.3;color:#fff}
.fg-ce-plat-cell span{font-size:13px;line-height:1.4;color:rgba(255,255,255,.78)}

/* Commercial Engine card: orange outline, light orange tint, "You are here" */
.fg-ce-plat-cell.is-here{background:rgba(240,105,78,.22);border-color:var(--fg-ce-orange)}
.fg-ce-plat-cell.is-here:hover{background:rgba(240,105,78,.30)}
.fg-ce-plat-cell em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#FFB4A3}

/* Tablet / mobile: band grows with content, cards two per row */
@media (max-width:980px){
  .fg-ce-band{min-height:auto}
  .fg-ce-band>.fg-ce-wrap:not(.fg-ce-plat){padding-top:56px}
  .fg-ce-plat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  /* keep the stronger mobile overlay so white text stays readable over the photo */
  .fg-ce-band::before{background:rgba(15,35,71,.82)}
  .fg-ce-band-in{padding:24px 0 40px}
  .fg-ce-band .fg-ce-plat{padding-bottom:32px}
  .fg-ce-plat-cell{padding:14px}
}
/* ===== end COMMERCIAL ENGINE round 3 ===== */

/* ============================================================
   DEE PAGE — v2 (Rooban, Oct 2026): same family as Commercial Engine
   Page: /fmcg-dee-page/   Twig: <main id="main-content" class="dx">
   Every rule starts with .dx, so nothing else on the site changes.
   Values are Rooban's "DEE v2" block. Changes from his file:
   - his generic .pv-* class names are renamed .dx-* (no clashes)
   - photos are real <img> (behind the text on desktop, stacked
     above the text on phones, as asked)
   - rules for removed sections (old strip / old bottom CTA) dropped
   ============================================================ */

/* Base type — matches Commercial Engine */
.dx{font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.dx h1,.dx h2,.dx h3,.dx p,.dx a,.dx span,.dx b{font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif}
.dx .dx-wrap{max-width:1240px;margin:0 auto;padding:0 4rem;box-sizing:border-box}

/* Eyebrows — 14px, 700, 1.8px, capitals, no dots */
.dx .dx-eb{display:block;font-size:14px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;line-height:1.3;color:#1B3A6B;margin:0 0 12px}
.dx .dx-eb::before{display:none}
.dx .dx-helps .dx-eb,.dx .dx-for .dx-eb{color:#E0A100}   /* white sections */
.dx .dx-band .dx-eb,.dx .dx-cta .dx-eb{color:#FFD84D}    /* photo sections */

/* Section headings — 32px / 600 / 1.2 / -0.6px (26px mobile) */
.dx h2{font-size:32px!important;line-height:1.2!important;letter-spacing:-.6px!important;font-weight:600!important;color:#1B3A6B;margin:0 0 16px;text-wrap:balance}
.dx .dx-hero p,.dx .dx-helps p,.dx .dx-band p,.dx .dx-for p{margin:0}

/* Buttons — 16px / 600, padding 15px 24px, radius 8px */
.dx .dee-btn-primary,.dx .dee-btn-ghost,.dx .dx-btn{font:600 16px/1 'Inter','Inter Fallback',Arial,Helvetica,sans-serif;padding:15px 24px;border-radius:8px}
.dx .dx-btn{display:inline-flex;align-items:center;background:#FFD84D;color:#1B3A6B;text-decoration:none;transition:background .15s}
.dx .dx-btn:hover{background:#ffe27a;color:#1B3A6B}
.dx .dee-btn-primary:focus-visible,.dx .dee-btn-ghost:focus-visible,.dx .dx-btn:focus-visible,.dx .dx-plat-cell:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Photos: full-bleed behind the text (desktop) */
.dx .dx-hero,.dx .dx-band,.dx .dx-cta{position:relative;background:#0f2347;color:#fff;overflow:hidden}
.dx .dx-photo{position:absolute;inset:0;z-index:0;display:block;margin:0}
.dx .dx-photo img{display:block;width:100%;height:100%;object-fit:cover}
.dx .dx-hero::before,.dx .dx-band::before,.dx .dx-cta::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.dx .dx-hero .dx-wrap,.dx .dx-band .dx-wrap,.dx .dx-cta .dx-wrap{position:relative;z-index:2}

/* 1. HERO — navy fade on the left (Commercial Engine style) */
.dx .dx-hero .dx-photo img{object-position:center 35%}
.dx .dx-hero::before{background:linear-gradient(90deg,rgba(15,35,71,.97) 0%,rgba(15,35,71,.9) 36%,rgba(27,58,107,.55) 62%,rgba(27,58,107,.2) 100%)}
.dx .dx-hero .dx-wrap{min-height:600px;display:flex;align-items:center;padding-top:80px;padding-bottom:80px}
.dx .dx-hero-copy{max-width:540px}
.dx .dx-hero h1{font-size:44px;line-height:1.12;font-weight:700;letter-spacing:-.5px;color:#fff;margin:0 0 10px}
.dx .dx-hero .dee-hero-full-name{font-size:18px;margin:0 0 22px}           /* yellow #FFD84D from the existing DEE rules */
.dx .dx-hero .dx-hero-body{font-size:18px;line-height:1.55;color:rgba(255,255,255,.8);margin:0 0 30px}

/* 2. HOW IT HELPS — text + Commercial Argument Card */
.dx .dx-helps{background:#fff;padding:96px 0}
.dx .dx-helps-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.dx .dx-lead{font-size:17px;line-height:1.7;color:#55657e}
.dx .dx-helps .dx-proof{margin-top:16px}
.dx .dx-rows{margin-top:28px;border-top:1px solid #E8EAF0}
.dx .dx-rows div{display:grid;grid-template-columns:210px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid #E8EAF0}
.dx .dx-rows b{font-size:16px;color:#1B3A6B}
.dx .dx-rows span{font-size:16px;line-height:1.6;color:#55657e}
.dx .dx-helps .dx-cardproof{margin-top:18px;padding-left:14px;border-left:3px solid #F2B705;font-size:15px;line-height:1.55;color:#1B3A6B;font-weight:600}
.dx .dx-helps .dx-cap{margin-top:12px;text-align:right;font-size:12px;color:#8a99ad}

/* 3. WHY IT MATTERS — supermarket band */
.dx .dx-band{display:flex;align-items:center;min-height:560px}
.dx .dx-band .dx-photo img{object-position:center}
.dx .dx-band::before{background:linear-gradient(90deg,rgba(15,35,71,.95) 0%,rgba(15,35,71,.84) 40%,rgba(15,35,71,.2) 72%,rgba(15,35,71,0) 100%)}
.dx .dx-band .dx-wrap{width:100%}
.dx .dx-band-in{max-width:560px;padding:72px 0;color:#fff}
.dx .dx-band h2{color:#fff}
.dx .dx-band .dx-lead{color:rgba(255,255,255,.82)}
.dx .dx-labels{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:24px;font-size:15px;color:rgba(255,255,255,.85)}
.dx .dx-labels>span{display:flex;align-items:center;gap:8px}
.dx .dx-band .dx-tag{margin-top:26px;padding-left:14px;border-left:3px solid #F2B705;font-size:16px;font-weight:700;color:#fff}

/* 4. WHO DEE IS FOR — three columns */
.dx .dx-for{background:#F5F6F8;padding:88px 0}
.dx .dx-for-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.dx .dx-for-grid>div{border-top:3px solid #F2B705;padding-top:18px}
.dx .dx-role{display:block;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#8a99ad;margin-bottom:8px}
.dx .dx-for-grid h3{font-size:19px;line-height:1.3;font-weight:600;color:#1B3A6B;margin:0 0 8px}
.dx .dx-for-grid p{font-size:16px;line-height:1.6;color:#55657e}

/* 5. SEE DEE IN ACTION — bright photo (no fade on the right) + frosted platform cards */
.dx .dx-cta{min-height:760px}
.dx .dx-cta .dx-photo img{object-position:center 22%}
.dx .dx-cta::before{background:linear-gradient(90deg,rgba(15,35,71,.78) 0%,rgba(15,35,71,.45) 40%,rgba(15,35,71,0) 72%),linear-gradient(0deg,rgba(15,35,71,.7) 0%,rgba(15,35,71,0) 38%)}
.dx .dx-cta-wrap{min-height:760px;display:flex;flex-direction:column;justify-content:space-between;padding-top:96px;padding-bottom:40px}
.dx .dx-cta-copy{max-width:540px}
.dx .dx-cta h2{color:#fff;margin:0 0 14px}
.dx .dx-cta-copy p{font-size:17px;line-height:1.65;margin:0 0 28px;color:rgba(255,255,255,.9)}
.dx .dx-plat-lbl{display:block;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.75);margin:0 0 12px}
.dx .dx-plat-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.dx .dx-plat-cell{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-decoration:none;transition:background .15s}
.dx .dx-plat-cell:hover{background:rgba(255,255,255,.24)}
.dx .dx-plat-cell b{font-size:15px;font-weight:700;line-height:1.3;color:#fff}
.dx .dx-plat-cell span{font-size:13px;line-height:1.4;color:rgba(255,255,255,.78)}
.dx .dx-plat-cell.is-here{background:rgba(255,216,77,.22);border-color:#FFD84D}
.dx .dx-plat-cell em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;line-height:1.4;color:#FFD84D}

/* Tablet (Rooban's 980px rules) */
@media (max-width:980px){
  .dx .dx-wrap{padding:0 20px}
  .dx .dx-hero .dx-wrap{min-height:auto;padding-top:64px;padding-bottom:64px}
  .dx .dx-hero .dx-photo img{object-position:70% 30%}
  .dx .dx-hero h1{font-size:34px}
  .dx .dx-helps{padding:56px 0}
  .dx .dx-helps-grid{grid-template-columns:1fr;gap:36px}
  .dx .dx-rows div{grid-template-columns:1fr;gap:4px}
  .dx .dx-band{min-height:auto}
  .dx .dx-band::before{background:rgba(15,35,71,.86)}
  .dx .dx-for{padding:56px 0}
  .dx .dx-for-grid{grid-template-columns:1fr}
  .dx h2{font-size:26px!important}
  .dx .dx-plat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dx .dx-cta::before{background:rgba(15,35,71,.62)}
}

/* Phones: photo stacks above the text, text sits on navy */
@media (max-width:768px){
  .dx .dx-hero,.dx .dx-band,.dx .dx-cta{display:block;min-height:0}
  .dx .dx-hero::before,.dx .dx-band::before,.dx .dx-cta::before{display:none}
  .dx .dx-photo{position:relative;inset:auto;aspect-ratio:16/10}
  .dx .dx-hero .dx-photo img{object-position:65% 35%}
  .dx .dx-hero .dx-wrap{padding-top:36px;padding-bottom:48px}
  .dx .dx-band-in{padding:36px 0 48px}
  .dx .dx-cta-wrap{min-height:0;padding-top:36px;padding-bottom:40px;gap:40px}
  .dx .dee-hero-ctas a{flex:1 1 100%;text-align:center;justify-content:center}
}
/* ===== end DEE PAGE v2 ===== */

/* ============================================================
   SENSIA AI PAGE — v2 (Rooban, Oct 2026)
   Same family as Commercial Engine + DEE; accent = teal.
   Page: /fmcg-new-sensia-page/   Twig: <main id="main-content" class="snx">
   Every rule starts with .snx, so nothing else on the site changes.
   Values are Rooban's "Sensia v2" block. Changes from his file:
   - photos are real <img> (behind the text on desktop, stacked above
     the text on phones, like DEE)
   - his unused "Ask. Analyse. Act. bright band" rules dropped
   ============================================================ */

/* Base type */
.snx{font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.snx h1,.snx h2,.snx h3,.snx p,.snx a,.snx span,.snx b,.snx button{font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif}
.snx .sx-wrap{max-width:1240px;margin:0 auto;padding:0 4rem;box-sizing:border-box}

/* Eyebrows — 14px / 700 / 1.8px, teal */
.snx .sx-eb{display:block;font-size:14px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;line-height:1.3;color:#00A8A2;margin:0 0 12px}
.snx .sx-hero .sx-eb,.snx .sx-cta .sx-eb{color:#00CFC8}

/* Headings — 32px / 600 (26px mobile), incl. the existing sections */
.snx h2,.snx .sn-h2-ex,.snx .stc-x10.stc-x10.stc-x10{font-size:32px!important;line-height:1.2!important;letter-spacing:-.6px!important;font-weight:600!important;text-wrap:balance}
.snx .sx-how h2{color:#1B3A6B;margin:0 0 16px}
.snx .sn-eyb-muted,.snx .stc-x09.stc-x09.stc-x09{font-size:14px!important;letter-spacing:1.8px!important;font-weight:700!important;color:#00A8A2!important}
.snx .sn-examples-lead,.snx .stc-x11.stc-x11.stc-x11{font-size:17px!important;line-height:1.7!important}
.snx .sn-container,.snx .stc-x08.stc-x08.stc-x08{max-width:1112px!important}

/* Buttons — 16px / 600, 15px 24px, 8px */
.snx .sx-ctas{display:flex;gap:12px;flex-wrap:wrap}
.snx .sx-btn{display:inline-flex;align-items:center;justify-content:center;font:600 16px/1 'Inter','Inter Fallback',Arial,Helvetica,sans-serif;padding:15px 24px;border-radius:8px;text-decoration:none;border:1.5px solid transparent;transition:background .15s,border-color .15s}
.snx .sx-btn-t{background:#00CFC8;color:#0F2347}
.snx .sx-btn-t:hover{background:#2ee0da;color:#0F2347}
.snx .sx-btn-g{border-color:rgba(255,255,255,.4);color:#fff}
.snx .sx-btn-g:hover{border-color:#00CFC8;color:#fff}
.snx .sx-btn-n{background:#1B3A6B;color:#fff}
.snx .sx-btn-n:hover{background:#142d54;color:#fff}
.snx .sx-btn:focus-visible,.snx .sx-plat-cell:focus-visible{outline:2px solid #00CFC8;outline-offset:3px}

/* Full-bleed photos behind text (hero + closing section) */
.snx .sx-hero,.snx .sx-cta{position:relative;overflow:hidden;color:#fff;background:#0b1730}
.snx .sx-bg{position:absolute;inset:0;z-index:0;display:block;margin:0}
.snx .sx-bg img{display:block;width:100%;height:100%;object-fit:cover}
.snx .sx-hero::before,.snx .sx-cta::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.snx .sx-hero .sx-wrap,.snx .sx-cta .sx-wrap{position:relative;z-index:2}

/* 1. HERO */
.snx .sx-hero .sx-bg img{object-position:center 40%}
.snx .sx-hero::before{background:linear-gradient(90deg,rgba(11,23,48,.96) 0%,rgba(11,23,48,.86) 36%,rgba(11,23,48,.45) 64%,rgba(11,23,48,.15) 100%)}
.snx .sx-hero .sx-wrap{min-height:620px;display:flex;align-items:center;padding-top:80px;padding-bottom:80px}
.snx .sx-hero-copy{max-width:560px}
.snx .sx-hero h1{font-size:44px;line-height:1.12;letter-spacing:-.5px;font-weight:700;color:#fff;margin:0 0 18px}
.snx .sx-hero h1 span{color:#00CFC8}
.snx .sx-hero p{font-size:18px;line-height:1.55;color:rgba(255,255,255,.82);margin:0 0 30px}

/* 2. HOW IT WORKS */
.snx .sx-how{background:#fff;padding:96px 0}
.snx .sx-how-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:56px;align-items:center}
.snx .sx-lead{font-size:17px;line-height:1.7;color:#55657e;margin:0}
.snx .sx-how-btn{margin-top:28px}
.snx .sx-photo{display:block;border-radius:20px;overflow:hidden;aspect-ratio:3/2;width:100%;background:#eef1f5}
.snx .sx-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.snx .sx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
.snx .sx-steps>div{border-top:3px solid #00CFC8;padding-top:20px}
.snx .sx-steps h3{margin:0 0 8px;font-size:19px;line-height:1.3;font-weight:600;color:#1B3A6B}
.snx .sx-steps p{margin:0;font-size:16px;line-height:1.6;color:#33415a}
.snx .sx-steps p.sx-sup{margin-top:8px;font-size:14px;line-height:1.6;color:#7a8799}

/* 4. EVIDENCE TRANSPARENCY — text + real Sensia output card (Rooban mockup, Oct 2026) */
.snx .sx-ev{background:#fff;border-top:1px solid #E8EAF0;padding:90px 0}
.snx .sx-ev-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,680px);gap:64px;align-items:center}
.snx .sx-ev h2{color:#1B3A6B;margin:0 0 20px}
.snx .sx-ev-intro{margin:0 0 30px;font-size:17px;line-height:1.7;color:#55657e}
.snx .sx-ev-pt{padding:18px 0;border-top:1px solid #E8EAF0}
.snx .sx-ev-pt b{display:block;margin-bottom:6px;font-size:17px;color:#1B3A6B}
.snx .sx-ev-pt span{font-size:15px;line-height:1.5;color:#55657e}
/* card — shared: also used in the Solutions page Sensia panel, so not limited to .snx (class names are unique) */
.sx-ev-card{margin:0;min-width:0;background:#fff;border:1px solid #E3E7EC;border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(27,58,107,.12)}
.sx-ev-q{display:flex;gap:18px;align-items:center;padding:14px 22px;background:#1B3A6B;color:#fff}
.sx-ev-q small{flex:none;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#29A8E0}
.sx-ev-q i{font-size:14px;line-height:1.4}
.sx-ev-body{display:grid;grid-template-columns:minmax(0,1fr) 230px;align-items:start}
.sx-ev-ans{padding:20px 22px 22px;font-size:13px;line-height:1.6;color:#374151}
.sx-ev-ans p{margin:0 0 12px;font-size:13px;line-height:1.6;color:#374151}
.sx-ev-ans :is(h4,p.sx-ev-h){margin:14px 0 6px;font-size:14.5px;line-height:1.3;color:#1B3A6B}
.sx-ev-ref{display:inline-block;margin-left:2px;padding:1px 5px;border-radius:4px;background:#eef4ff;color:#1d4ed8;font-size:11px;font-weight:700;line-height:1.5;white-space:nowrap}
.sx-ev-t{width:100%;margin:4px 0 10px;border-collapse:collapse;font-size:12.5px}
.sx-ev-t th{padding:8px 6px;border-bottom:2px solid #E3E7EC;text-align:left;font-size:12px;font-weight:700;color:#666}
.sx-ev-t td{padding:6px 5px;border-bottom:1px solid #E3E7EC}
.sx-ev-t th:nth-child(n+2),.sx-ev-t td:nth-child(n+2){text-align:right;white-space:nowrap}
.sx-ev-blur{display:inline-block;filter:blur(5px);user-select:none}
.sx-ev-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sx-ev-ans .sx-ev-lock{margin:-6px 0 14px;text-align:right;font-size:12px;color:#9aa3af}
/* GLP-1 highlight */
.sx-ev-glp{margin-top:14px;padding:14px 16px;border-radius:10px;background:linear-gradient(120deg,#0f2a52,#1B3A6B 60%,#1d5c8f);color:#fff}
.sx-ev-tag{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#00CFC8}
.sx-ev-glp :is(h4,p.sx-ev-h){margin:4px 0 6px;font-size:15px;color:#fff}
.sx-ev-big{margin:14px 0 4px;font-size:28px;font-weight:700;line-height:1;color:#fff}
.sx-ev-lab{font-size:13px;color:#b9c9e2}
.sx-ev-glp p{margin:12px 0 0;color:#dbe6f5}
.sx-ev-glp .sx-ev-ref{background:rgba(255,255,255,.15);color:#fff}
/* sources */
.sx-ev-src{padding:18px 16px;border-left:1px solid #E3E7EC;background:#f8fafc}
.sx-ev-src :is(h5,p.sx-ev-sh){margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#666}
.sx-ev-src .sx-ev-h5-2{margin-top:22px}
.sx-ev-sq{display:flex;gap:8px;margin-bottom:9px;font-size:11.5px;line-height:1.4;color:#374151}
.sx-ev-sq .sx-ev-ref{flex:none;height:fit-content;margin-left:0}
.sx-ev-rp{display:flex;gap:8px;align-items:center;margin-bottom:6px;padding:6px;border:1px solid #E3E7EC;border-radius:8px;background:#fff}
.sx-ev-rp picture{flex:none}
.sx-ev-rp img{display:block;width:56px;height:37px;object-fit:cover;border-radius:4px}
.sx-ev-rp .sx-ev-ref{margin-left:0}
.sx-ev-rp b{display:block;margin-top:2px;font-size:11.5px;line-height:1.3;color:#1B3A6B}
.sx-ev-rp em{font-style:normal;font-size:11px;color:#9aa3af}
.sx-ev-src .sx-ev-all{margin:6px 0 0;font-size:13px;font-weight:700;color:#29A8E0}
.sx-ev-foot{padding:8px 22px;border-top:1px solid #E3E7EC;font-size:12px;color:#9aa3af}

/* 5. SEE SENSIA IN ACTION + frosted platform cards */
.snx .sx-cta{min-height:760px}
.snx .sx-cta .sx-bg img{object-position:center 40%}
.snx .sx-cta::before{background:linear-gradient(90deg,rgba(11,23,48,.86) 0%,rgba(11,23,48,.55) 40%,rgba(11,23,48,0) 72%),linear-gradient(0deg,rgba(11,23,48,.75) 0%,rgba(11,23,48,0) 38%)}
.snx .sx-cta .sx-wrap{min-height:760px;display:flex;flex-direction:column;justify-content:space-between;padding-top:96px;padding-bottom:40px}
.snx .sx-cta-copy{max-width:540px}
.snx .sx-cta h2{color:#fff;margin:0 0 14px}
.snx .sx-cta p{font-size:17px;line-height:1.65;color:rgba(255,255,255,.9);margin:0 0 28px}
.snx .sx-plat-lbl{display:block;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.75);margin:0 0 12px}
.snx .sx-plat-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.snx .sx-plat-cell{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-decoration:none;transition:background .15s}
.snx .sx-plat-cell:hover{background:rgba(255,255,255,.24)}
.snx .sx-plat-cell b{font-size:15px;font-weight:700;line-height:1.3;color:#fff}
.snx .sx-plat-cell span{font-size:13px;line-height:1.4;color:rgba(255,255,255,.78)}
.snx .sx-plat-cell.is-here{background:rgba(0,207,200,.2);border-color:#00CFC8}
.snx .sx-plat-cell em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;line-height:1.4;color:#00CFC8}

/* Tablet (Rooban's 980px rules) */
@media (max-width:980px){
  .snx .sx-wrap{padding:0 20px}
  .snx .sx-hero .sx-wrap{min-height:auto;padding-top:64px;padding-bottom:64px}
  .snx .sx-hero h1{font-size:34px}
  .snx .sx-how{padding:56px 0}
  .snx .sx-how-grid{grid-template-columns:1fr;gap:32px}
  .snx .sx-photo{order:-1}
  .snx .sx-steps{grid-template-columns:1fr;gap:20px;margin-top:40px}
  .snx .sx-cta,.snx .sx-cta .sx-wrap{min-height:auto}
  .snx .sx-cta .sx-wrap{padding-top:64px;gap:40px}
  .snx .sx-cta::before{background:rgba(11,23,48,.62)}
  .snx .sx-plat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .snx h2,.snx .sn-h2-ex,.snx .stc-x10.stc-x10.stc-x10{font-size:26px!important}
}

/* Phones: photo stacks above the text, text on navy */
@media (max-width:768px){
  .snx .sx-hero::before,.snx .sx-cta::before{display:none}
  .snx .sx-bg{position:relative;inset:auto;aspect-ratio:16/10}
  .snx .sx-hero .sx-wrap{padding-top:36px;padding-bottom:48px}
  .snx .sx-cta .sx-wrap{padding-top:36px;padding-bottom:40px}
  .snx .sx-ctas .sx-btn{flex:1 1 100%}
}
/* Evidence card: one column on tablets/phones (sources below the answer) */
@media (max-width:980px){
  .snx .sx-ev{padding:56px 0}
  .snx .sx-ev-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .sx-ev-body{grid-template-columns:minmax(0,1fr)}
  .sx-ev-src{border-left:0;border-top:1px solid #E3E7EC}
}
@media (max-width:600px){
  .sx-ev-q{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 18px}
  .sx-ev-ans{padding:18px}
  .sx-ev-foot{padding:8px 18px}
}
/* ===== end SENSIA AI PAGE v2 ===== */

/* ============================================================
   CONTACT PAGE — image-left layout (Rooban mockup, Oct 2026)
   Twig: <div class="ct-page"> around the page.
   Intro across the top, then photo (left) + form card (right),
   same height. Photo stacks above the form on phones.
   Every rule starts with .ct-page, so Book a Demo / Newsletter
   (which share .page-wrap / .form-card) are not affected.
   ============================================================ */
.ct-page{font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif;background:#F5F6F8}
.ct-page .ct-wrap{max-width:1100px;margin:0 auto;padding:64px 2rem 80px;box-sizing:border-box}

/* Intro */
.ct-page .ct-intro{margin-bottom:36px}
.ct-page .ct-eyebrow{margin:0 0 14px;font-size:14px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;line-height:1.3;color:#1a8bc0}
.ct-page .ct-intro h1{margin:0 0 18px;max-width:760px;font-size:36px;line-height:1.2;font-weight:600;letter-spacing:-.4px;color:#1B3A6B}
.ct-page .ct-lead{margin:0;max-width:620px;font-size:17px;line-height:1.7;color:#55657e}

/* Photo + form, same height */
.ct-page .ct-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:stretch}
.ct-page .ct-photo{position:relative;display:block;min-height:420px;border-radius:12px;overflow:hidden;background:#1B3A6B}
.ct-page .ct-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 45%;display:block}
.ct-page .form-card{margin:0;min-width:0}

/* Tablet / phone: photo above the form */
@media (max-width:860px){
  .ct-page .ct-cols{grid-template-columns:minmax(0,1fr);gap:24px}
  .ct-page .ct-photo{min-height:0;aspect-ratio:16/10}
}
@media (max-width:768px){
  .ct-page .ct-wrap{padding:40px 1.25rem 56px}
  .ct-page .ct-intro{margin-bottom:28px}
  .ct-page .ct-intro h1{font-size:26px}
  .ct-page .form-card{padding:1.75rem 1.25rem}
}
/* ===== end CONTACT PAGE ===== */

/* ============================================================
   BOOK A DEMO — new layout (Rooban mockup, Oct 2026)
   Twig: <div class="bd-page"> around the page.
   Intro + "What to expect" steps in a row, then photo (left,
   wider) + form card (right) at the same height, then
   "Trusted by" client logos in two lines. Every rule starts with .bd-page.
   ============================================================ */
.bd-page{font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif;background:#F5F6F8}
.bd-page .bd-wrap{max-width:1180px;margin:0 auto;padding:64px 2rem 80px;box-sizing:border-box}

/* Intro */
.bd-page .bd-intro{margin-bottom:36px}
.bd-page .bd-eyebrow{margin:0 0 14px;font-size:14px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;line-height:1.3;color:#1a8bc0}
.bd-page .bd-intro h1{margin:0 0 16px;font-size:36px;line-height:1.2;font-weight:600;letter-spacing:-.4px;color:#1B3A6B}
.bd-page .bd-lead{margin:0;max-width:640px;font-size:17px;line-height:1.7;color:#55657e}

/* Small grey labels ("What to expect", "Trusted by") */
.bd-page .bd-label{margin:32px 0 16px;font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#6b7280}

/* What to expect — 3 steps in a row */
.bd-page .bd-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.bd-page .bd-steps li{display:flex;gap:12px;align-items:flex-start}
.bd-page .bd-num{flex:none;display:grid;place-items:center;width:26px;height:26px;margin-top:1px;border-radius:50%;background:#1B3A6B;color:#fff;font-size:13px;font-weight:700}
.bd-page .bd-steps b{display:block;margin-bottom:4px;font-size:16px;line-height:1.4;color:#1B3A6B}
.bd-page .bd-steps p{margin:0;font-size:15px;line-height:1.6;color:#55657e}

/* Photo (wider) + form, same height */
.bd-page .bd-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:30px;align-items:stretch}
.bd-page .bd-photo{position:relative;display:block;min-height:560px;border-radius:14px;overflow:hidden;background:#e9edf3}
.bd-page .bd-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:48% 60%;display:block}
.bd-page .form-card{margin:0;min-width:0;border-radius:14px}

/* Trusted by — the homepage "Trusted Globally" logos, small, in two lines (5 per row).
   The logo files are white (made for the navy homepage section), so
   brightness(0) turns them solid dark and opacity makes them a calm grey. */
.bd-page .bd-trust{margin-top:48px;text-align:center}
.bd-page .bd-logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:26px 48px;max-width:860px;margin:0 auto;padding:0;list-style:none}
.bd-page .bd-logos li{display:flex;align-items:center;justify-content:center;min-width:0;height:44px}
.bd-page .bd-logos img{display:block;width:100%;max-width:128px;height:45px;object-fit:contain;filter:brightness(0);opacity:.55;transition:opacity .15s}
.bd-page .bd-logos li:hover img{opacity:.8}

/* Tablet / phone: steps stack, photo above the form */
@media (max-width:900px){
  .bd-page .bd-logos{gap:22px 28px;max-width:640px}
  .bd-page .bd-steps,
  .bd-page .bd-cols{grid-template-columns:minmax(0,1fr)}
  .bd-page .bd-steps{gap:16px}
  .bd-page .bd-photo{min-height:0;aspect-ratio:4/3}
}
@media (max-width:768px){
  .bd-page .bd-wrap{padding:40px 1.25rem 56px}
  .bd-page .bd-intro{margin-bottom:28px}
  .bd-page .bd-intro h1{font-size:26px}
  .bd-page .form-card{padding:1.75rem 1.25rem}
  .bd-page .bd-photo{aspect-ratio:16/10}
  .bd-page .bd-logos{gap:18px 14px}
  .bd-page .bd-logos li{height:34px}
  .bd-page .bd-logos img{height:26px}
}
@media (max-width:480px){
  .bd-page .bd-logos{gap:16px 8px}
  .bd-page .bd-logos img{height:24px}
}
/* ---- Book a Demo — layout v2 (Rooban "book-a-demo-layout-v2", Oct 2026) ---- */
/* Intro */
.bd-page .bd-wrap{padding:0 32px}
.bd-page .bd-intro{margin:0;padding:72px 0 36px}
.bd-page .bd-eyebrow{margin:0 0 12px;font-size:12px;letter-spacing:.14em;color:#29A8E0}
.bd-page .bd-intro h1{margin:0 0 14px;font-size:38px;font-weight:700;letter-spacing:-.5px}
.bd-page .bd-lead{max-width:620px;font-size:17px;line-height:1.6}
/* Photo (44%) + form (56%), same height */
.bd-page .bd-cols{grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:56px;padding-bottom:80px}
.bd-page .bd-photo{min-height:0}
.bd-page .bd-photo img{object-position:39% center}
/* Form card: same style as the Newsletter page */
.bd-page .form-card{width:100%;max-width:520px;padding:40px 36px 30px;border:1px solid #e3e7ec;border-radius:14px;background:#fff}
.bd-page .form-card h2{margin:0 0 10px;font-size:22px;font-weight:600;color:#1B3A6B}
.bd-page .form-card .form-sub{margin:0 0 26px;font-size:15px;line-height:1.6;color:#55657e}
.bd-page .form-card .form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin:0}
.bd-page .form-card .form-group{margin-bottom:16px}
.bd-page .form-card label{display:block;margin-bottom:8px;font-size:15px;font-weight:400;color:#1a1a2e}
.bd-page .form-card input[type=text],
.bd-page .form-card input[type=email],
.bd-page .form-card input[type=tel],
.bd-page .form-card select,
.bd-page .form-card textarea{width:100%;padding:10px 13px;border:1px solid #d9e0e8;border-radius:6px;background-color:#fff;color:#1a1a2e;font-family:inherit;font-size:15px;line-height:1.4;box-shadow:none}
.bd-page .form-card input::placeholder,.bd-page .form-card textarea::placeholder{color:#9aa6b8}
.bd-page .form-card input:focus,.bd-page .form-card select:focus,.bd-page .form-card textarea:focus{outline:2px solid rgba(41,168,224,.35);border-color:#29A8E0;box-shadow:none}
.bd-page .form-card textarea{min-height:90px;height:auto;resize:vertical}
.bd-page .form-card .intl-tel-input input[type=tel]{padding-left:52px}
.bd-page .form-card .submit-btn,
.bd-page .form-card input[type=submit],
.bd-page .form-card .wpcf7-submit{display:block;width:100%;margin-top:6px;padding:14px;border:0;border-radius:6px;background:#1B3A6B;color:#fff;font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:background .15s}
.bd-page .form-card .submit-btn:hover,
.bd-page .form-card input[type=submit]:hover,
.bd-page .form-card .wpcf7-submit:hover{background:#29A8E0}
.bd-page .form-card .form-legal{margin:14px 0 0;font-size:11.5px;line-height:1.6;color:#8a96a8;text-align:center}
.bd-page .form-card .form-legal a{color:#8a96a8;text-decoration:underline}
.bd-page .form-card .wpcf7-not-valid-tip{margin-top:6px;font-size:13px}
.bd-page .form-card .wpcf7-response-output{margin:14px 0 0;padding:10px 12px;border-radius:6px;font-size:14px}
/* Trusted by: under a thin line, label + logos left-aligned */
.bd-page .bd-trust{margin:0;padding:40px 0 64px;border-top:1px solid #e3e7ec;text-align:left}
.bd-page .bd-trust .bd-label{margin:0 0 16px;font-size:12px;letter-spacing:.14em;color:#29A8E0}
/* Logos (fixed Oct 2026): every logo sits in the same 102 x 36 box (smaller boxes keep the same shape),
   then a per-logo scale evens out how big each one LOOKS — the logo files have different shapes
   and padding, so tall marks (Red Bull, Fonterra, ADM) were too big and thin ones (dsm-firmenich) too small.
   Desktop: one row of 10. Up to 1100px: two even rows of 5 across the full width. */
.bd-page .bd-logos{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));justify-items:center;align-items:center;gap:24px 10px;max-width:none;margin:0;padding:0;list-style:none}
.bd-page .bd-logos li{display:flex;align-items:center;justify-content:center;width:100%;max-width:102px;height:auto;aspect-ratio:17/6;min-width:0}
.bd-page .bd-logos img{display:block;width:100%;max-width:none;height:100%;object-fit:contain;transform:scale(var(--lg,1));filter:brightness(0);opacity:.55}
.bd-page .bd-logos img[alt="Nestlé"]{--lg:1.13}
.bd-page .bd-logos img[alt="PepsiCo"]{--lg:1.09}
.bd-page .bd-logos img[alt="Kerry"]{--lg:1.1}
.bd-page .bd-logos img[alt="Red Bull"]{--lg:.85}
.bd-page .bd-logos img[alt="dsm-firmenich"]{--lg:1.3}
.bd-page .bd-logos img[alt="FrieslandCampina"]{--lg:.84}
.bd-page .bd-logos img[alt="Glanbia"]{--lg:1.18}
.bd-page .bd-logos img[alt="Fonterra"]{--lg:.88}
.bd-page .bd-logos img[alt="ADM"]{--lg:.84}
.bd-page .bd-logos img[alt="BENEO"]{--lg:1.12}
@media (max-width:1100px){.bd-page .bd-logos{grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 16px;max-width:none}}
@media (max-width:900px){
  .bd-page .bd-cols{grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:56px}
  .bd-page .bd-photo{aspect-ratio:16/10}
  .bd-page .form-card{max-width:none}
  .bd-page .form-card .form-row{grid-template-columns:minmax(0,1fr);gap:0}
}
@media (max-width:768px){
  .bd-page .bd-wrap{padding:0 20px}
  .bd-page .bd-intro{padding:40px 0 28px}
  .bd-page .bd-intro h1{font-size:30px}
  .bd-page .form-card{padding:28px 22px}
  .bd-page .bd-photo{aspect-ratio:16/10;max-height:260px}
  .bd-page .bd-trust{padding:32px 0 48px}
  .bd-page .bd-logos{gap:20px 10px}
  .bd-page .bd-logos li{height:auto}
  .bd-page .bd-logos img{height:100%}
}
/* ===== end BOOK A DEMO ===== */

/* ============================================================
   ABOUT PAGE — v3 sections (Rooban mockup, Oct 2026)
   Video hero (.fh-ab-hero + controls) and footer unchanged.
   Twig: <main id="main-content" class="ab-page">.
   Every rule starts with .ab-page, so nothing else changes.
   ============================================================ */
.ab-page .ab-in{max-width:1240px;margin:0 auto;padding:0 32px;box-sizing:border-box}
.ab-page .ab-who,.ab-page .ab-band,.ab-page .ab-fits,.ab-page .ab-cta{font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif}
.ab-page .ab-who h2,.ab-page .ab-band h2,.ab-page .ab-fits h2,.ab-page .ab-cta h2{margin:0 0 24px;font-size:30px;line-height:1.2;font-weight:600;color:#1B3A6B}
.ab-page .ab-who p,.ab-page .ab-band p,.ab-page .ab-fits p,.ab-page .ab-cta p{margin:0 0 18px;font-size:18px;line-height:1.55;color:#666}

/* Shared: photos behind text */
.ab-page .ab-band,.ab-page .ab-cta{position:relative;overflow:hidden;background:#0f1f3d}
.ab-page .ab-bg{position:absolute;inset:0;z-index:0;display:block;margin:0}
.ab-page .ab-bg img{display:block;width:100%;height:100%;object-fit:cover}
.ab-page .ab-band::before,.ab-page .ab-cta::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.ab-page .ab-band-in,.ab-page .ab-cta-in{position:relative;z-index:2}

/* 2. WHO WE ARE — text + photo */
.ab-page .ab-who{padding:100px 0 90px;background:#fff}
.ab-page .ab-who-grid{display:grid;grid-template-columns:minmax(0,1fr) 46%;gap:64px;align-items:stretch}
.ab-page .ab-who-txt{align-self:center}
.ab-page .ab-who .ab-big{color:#444}
/* "Our difference" statement: bold navy with a light-blue bar on the left */
.ab-page .ab-who .ab-diff{margin:26px 0 20px;padding:2px 0 2px 20px;border-left:3px solid #29A8E0;font-size:19px;line-height:1.5;color:#1B3A6B}
.ab-page .ab-who .ab-diff strong{font-weight:700}
.ab-page .ab-side{display:block;min-height:500px;border-radius:12px;overflow:hidden;background:#e9edf3}
.ab-page .ab-side img{display:block;width:100%;height:100%;object-fit:cover;object-position:12% 50%}

/* 3. BUILT FOR THE HARD PROBLEMS — earth photo band */
.ab-page .ab-band{min-height:640px;display:flex;align-items:flex-end;color:#fff}
.ab-page .ab-band .ab-bg img{object-position:50% 85%}
/* Photo at full brightness. Navy only behind the text on the left (fades out by ~60%),
   plus a very light gradient behind the three columns at the bottom. */
.ab-page .ab-band::before{
  background:
    linear-gradient(0deg,rgba(8,24,48,.18) 0%,rgba(8,24,48,0) 38%),
    linear-gradient(90deg,rgba(8,24,48,.72) 0%,rgba(8,24,48,.58) 32%,rgba(8,24,48,.28) 55%,rgba(8,24,48,.05) 75%,rgba(8,24,48,0) 100%);
}
.ab-page .ab-band-in{text-shadow:0 1px 10px rgba(0,0,0,.35)}
.ab-page .ab-band-in{width:100%;padding-top:200px;padding-bottom:80px}
.ab-page .ab-band h2{color:#fff;max-width:700px}
.ab-page .ab-band .ab-lead{color:rgba(255,255,255,.88);max-width:620px}
.ab-page .ab-band .ab-punch{margin-top:4px;color:#fff;font-weight:700}
.ab-page .ab-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:50px;padding-top:28px;border-top:1px solid rgba(255,255,255,.3)}
.ab-page .ab-list b{display:block;margin-bottom:8px;font-size:21px;color:#fff}
.ab-page .ab-list span{font-size:16px;line-height:1.55;color:rgba(255,255,255,.82)}

/* 4. INSIGHT TO DECISION + ECOSYSTEM */
.ab-page .ab-fits{padding:100px 0;background:#fff}
.ab-page .ab-fits-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:start}
.ab-page .ab-flow{margin:0;padding:0;list-style:none}
.ab-page .ab-flow li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:22px 0;border-bottom:1px solid #e3e7ec;font-size:22px;font-weight:700;line-height:1.3;color:#1B3A6B}
.ab-page .ab-flow li:first-child{padding-top:0}
.ab-page .ab-flow li:last-child{border-bottom:2px solid #29A8E0}
.ab-page .ab-flow em{font-style:normal;font-size:16px;font-weight:400;line-height:1.5;color:#666}
.ab-page .ab-eco{max-width:760px;margin:40px 0 24px}
.ab-page .ab-eco h3{margin:0 0 10px;font-size:22px;line-height:1.3;color:#1B3A6B}
.ab-page .ab-eco p{margin:0}
.ab-page .ab-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.ab-page .ab-tile{display:block;padding:16px 14px;border:1px solid #e3e7ec;border-top:3px solid #29A8E0;border-radius:10px;background:#fff;text-decoration:none;transition:box-shadow .15s,transform .15s}
.ab-page .ab-tile:hover{box-shadow:0 8px 20px rgba(27,58,107,.12);transform:translateY(-2px)}
.ab-page .ab-tile:focus-visible{outline:3px solid #29A8E0;outline-offset:2px}
.ab-page .ab-tile b{display:block;margin-bottom:6px;font-size:15px;line-height:1.25;color:#1B3A6B}
.ab-page .ab-tile span{font-size:14px;line-height:1.4;color:#666}
/* product colours on the top line */
.ab-page .ab-t-ci{border-top-color:#29A8E0}
.ab-page .ab-t-sn{border-top-color:#00CFC8}
.ab-page .ab-t-ce{border-top-color:#F0694E}
.ab-page .ab-t-dee{border-top-color:#F2B705}
.ab-page .ab-t-cr{border-top-color:#1B3A6B}

/* 5. CTA — crossing photo, light fade on the left */
.ab-page .ab-cta{min-height:700px;display:flex;align-items:center;padding:60px 0}
.ab-page .ab-cta .ab-bg img{object-position:40% 30%}
.ab-page .ab-cta::before{background:linear-gradient(90deg,rgba(10,22,45,.45) 0%,rgba(10,22,45,.2) 40%,rgba(10,22,45,0) 70%)}
.ab-page .ab-cta-in{width:100%}
.ab-page .ab-cta h2{margin:0 0 16px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.ab-page .ab-cta p{max-width:560px;margin:0 0 28px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.ab-page .ab-btn{display:inline-block;padding:16px 34px;border-radius:6px;background:#29A8E0;color:#fff;font-size:16px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background .15s}
.ab-page .ab-btn:hover{background:#1d94c9;color:#fff}
.ab-page .ab-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Tablet / phone */
@media (max-width:900px){
  .ab-page .ab-who{padding:56px 0}
  .ab-page .ab-who-grid,.ab-page .ab-fits-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .ab-page .ab-side{order:-1;min-height:0;aspect-ratio:4/3}
  .ab-page .ab-band-in{padding-top:120px;padding-bottom:56px}
  .ab-page .ab-band h2{font-size:28px}
  /* text runs full width on small screens, so use an even, light overlay there */
  .ab-page .ab-band::before{background:linear-gradient(0deg,rgba(8,24,48,.6) 0%,rgba(8,24,48,.45) 100%)}
  .ab-page .ab-list{grid-template-columns:minmax(0,1fr);gap:28px}
  .ab-page .ab-fits{padding:56px 0}
  .ab-page .ab-eco{margin-top:48px}
  .ab-page .ab-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .ab-page .ab-in{padding:0 20px}
  .ab-page .ab-who h2,.ab-page .ab-fits h2,.ab-page .ab-cta h2{font-size:26px}
  .ab-page .ab-who p,.ab-page .ab-band p,.ab-page .ab-fits p,.ab-page .ab-cta p{font-size:17px}
  .ab-page .ab-who .ab-diff{font-size:17px;padding-left:16px}
  .ab-page .ab-flow li{font-size:19px}
  /* CTA: busy aerial photo — show it above the text, text on navy */
  .ab-page .ab-cta{display:block;min-height:0;padding:0}
  .ab-page .ab-cta::before{display:none}
  .ab-page .ab-cta .ab-bg{position:relative;inset:auto;aspect-ratio:16/10}
  .ab-page .ab-cta-in{padding-top:36px;padding-bottom:48px}
  .ab-page .ab-cta h2,.ab-page .ab-cta p{text-shadow:none}
}
/* ===== end ABOUT PAGE v3 ===== */

/* ============================================================
   SOLUTIONS — Sensia panel uses the top half of the Sensia
   evidence card (.sx-ev-card, styled in the Sensia block).
   The panel frame is removed so the card's own frame shows.
   ============================================================ */
#sensia .sr-mock.sr-mock-ev{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.sx-ev-card{font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif;text-align:left}
#sensia .sr-mock-ev .sx-ev-card{box-shadow:0 14px 45px rgba(27,58,107,.12)}
#sensia .sr-mock-ev .sx-ev-q{border-bottom:3px solid #00CFC8}
#sensia .sr-mock-ev .sx-ev-body{grid-template-columns:minmax(0,1fr) 210px}
@media (max-width:980px){
  #sensia .sr-mock-ev .sx-ev-body{grid-template-columns:minmax(0,1fr)}
}
/* ===== end SOLUTIONS Sensia panel ===== */

/* ============================================================
   SOLUTIONS — team photo band (replaces the Analytics War Room image)
   Section has the extra class .sr-photo-band, so other banners are untouched.
   Height is capped and the photo cropped, keeping the group in view.
   ============================================================ */
.sr-photo-band .trends-banner picture{display:block}
.sr-photo-band .trends-banner-image{width:100%;height:clamp(300px,40vw,800px);object-fit:cover;object-position:68% 25%}
@media (max-width:600px){
  .sr-photo-band .trends-banner-image{height:260px;object-position:72% 45%}
}
/* ===== end SOLUTIONS team photo band ===== */

/* ============================================================
   CONSUMER INTELLIGENCE PAGE (Rooban mockup, Oct 2026)
   Twig: <main id="main-content" class="ci-page">. Every rule starts with .ci-page.
   Type matches the other new pages: eyebrow 14px, h1 44px, h2 32px/600, body 17px.
   ============================================================ */
.ci-page{--ci-navy:#1B3A6B;--ci-deep:#0f2347;--ci-teal:#29A8E0;--ci-body:#55657e;--ci-line:#e3e7ec;font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif;color:#1a1a2e}
.ci-page *,.ci-page *::before,.ci-page *::after{box-sizing:border-box}
.ci-page .ci-wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.ci-page .ci-eb{margin:0 0 12px;font-size:14px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;line-height:1.3;color:var(--ci-teal)}
.ci-page h2{margin:0 0 20px;font:600 32px/1.2 'Inter','Inter Fallback',Arial,Helvetica,sans-serif;letter-spacing:-.6px;color:var(--ci-navy)}
.ci-page .ci-p{margin:0 0 16px;font-size:17px;line-height:1.65;color:var(--ci-body)}

/* Buttons */
.ci-page .ci-ctas{display:flex;flex-wrap:wrap;gap:10px}
.ci-page .ci-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 26px;border:1px solid var(--ci-teal);border-radius:6px;background:var(--ci-teal);color:#fff;font:600 16px/1.2 'Inter','Inter Fallback',Arial,Helvetica,sans-serif;text-decoration:none;transition:background .15s}
.ci-page .ci-btn:hover{background:#1d94c9;border-color:#1d94c9;color:#fff}
.ci-page .ci-btn-ghost{background:transparent;border-color:rgba(255,255,255,.4)}
.ci-page .ci-btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.ci-page .ci-btn:focus-visible,.ci-page .ci-plat-cell:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Full-bleed photos (hero + CTA) */
.ci-page .ci-hero,.ci-page .ci-cta{position:relative;overflow:hidden;background:var(--ci-deep);color:#fff}
.ci-page .ci-bg{position:absolute;inset:0;z-index:0;display:block;margin:0}
.ci-page .ci-bg img{display:block;width:100%;height:100%;object-fit:cover}
.ci-page .ci-hero::before,.ci-page .ci-cta::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.ci-page .ci-hero .ci-wrap,.ci-page .ci-cta .ci-wrap{position:relative;z-index:2}

/* 1. HERO */
.ci-page .ci-hero{min-height:620px;display:flex;align-items:center}
.ci-page .ci-hero .ci-bg img{object-position:62% 35%}
.ci-page .ci-hero::before{background:linear-gradient(90deg,rgba(15,35,71,.94) 0%,rgba(15,35,71,.82) 42%,rgba(15,35,71,.2) 80%)}
.ci-page .ci-hero .ci-wrap{width:100%;padding-top:80px;padding-bottom:80px}
.ci-page .ci-hero-copy{max-width:560px}
.ci-page .ci-hero h1{margin:0 0 8px;font:700 44px/1.12 'Inter','Inter Fallback',Arial,Helvetica,sans-serif;letter-spacing:-.5px;color:#fff}
.ci-page .ci-sub{margin:0 0 22px;font-size:18px;font-style:italic;color:var(--ci-teal)}
.ci-page .ci-lead{max-width:520px;margin:0 0 28px;font-size:18px;line-height:1.55;color:#dbe4f3}

/* Shared split + rows */
.ci-page .ci-sec{padding:100px 0;background:#fff}
.ci-page .ci-grey{background:#f5f6f8}
.ci-page .ci-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:64px;align-items:center}
.ci-page .ci-split-rep{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.ci-page .ci-split-se{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.ci-page .ci-media{margin:0;min-width:0}
.ci-page .ci-rows{margin-top:26px;border-top:1px solid var(--ci-line)}
.ci-page .ci-rows>div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--ci-line)}
.ci-page .ci-rows b{font-size:16px;line-height:1.4;color:var(--ci-navy)}
.ci-page .ci-rows span{font-size:15px;line-height:1.5;color:var(--ci-body)}
.ci-page .ci-cap{margin-top:14px;font-size:14px;line-height:1.5;color:#8a96a8}

/* 2. Dashboard screenshot in a browser frame */
.ci-page .ci-frame{overflow:hidden;border:1px solid var(--ci-line);border-radius:12px;background:#fff;box-shadow:0 24px 60px rgba(15,35,71,.22)}
.ci-page .ci-frame-bar{display:flex;gap:6px;align-items:center;height:28px;padding:0 12px;background:#eef1f5}
.ci-page .ci-frame-bar i{width:9px;height:9px;border-radius:50%;background:#cfd6df}
.ci-page .ci-frame-img,.ci-page .ci-frame-img img{display:block;width:100%;height:auto}

/* 3. Reports band + fanned report pages */
.ci-page .ci-band{padding:120px 0;overflow:hidden;background:var(--ci-deep);color:#fff}
.ci-page .ci-band h2{color:#fff}
.ci-page .ci-band .ci-p{color:#c7d2e6}
.ci-page .ci-band .ci-rows,.ci-page .ci-band .ci-rows>div{border-color:rgba(255,255,255,.15)}
.ci-page .ci-band .ci-rows b{color:#fff}
.ci-page .ci-band .ci-rows span{color:#c7d2e6}
.ci-page .ci-band .ci-cap{color:#8fa3c4}
.ci-page .ci-fan{position:relative;height:560px}
.ci-page .ci-fan picture{position:absolute;display:block;width:64%}
.ci-page .ci-fan img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.ci-page .ci-fan .ci-f1{left:0;top:0;z-index:4}
.ci-page .ci-fan .ci-f2{left:26%;top:60px;z-index:3}
.ci-page .ci-fan .ci-f3{left:6%;top:250px;z-index:5}
.ci-page .ci-fan .ci-f4{left:36%;top:300px;z-index:6}
.ci-page .ci-tag{display:inline-block;margin-right:6px;padding:3px 8px;border-radius:4px;background:rgba(41,168,224,.15);color:var(--ci-teal);font-size:12px;font-weight:700}

/* 4. Survey Explorer band + stacked screenshots */
.ci-page .ci-seband{padding:120px 0;overflow:hidden;background:linear-gradient(180deg,#eef3f9 0%,#f7f9fc 100%)}
.ci-page .ci-stack{position:relative;height:600px}
.ci-page .ci-stack picture{position:absolute;display:block;width:68%}
.ci-page .ci-stack img{display:block;width:100%;height:auto;border:1px solid #dde3ea;border-radius:10px;background:#fff;box-shadow:0 22px 50px rgba(15,35,71,.2)}
.ci-page .ci-stack .ci-s1{left:0;top:0;z-index:1}
.ci-page .ci-stack .ci-s2{left:32%;top:46px;z-index:2}
.ci-page .ci-stack .ci-s3{left:3%;top:262px;z-index:3}
.ci-page .ci-stack .ci-s4{left:30%;top:300px;z-index:4}
.ci-page .ci-stack .ci-s4 img{box-shadow:0 28px 64px rgba(15,35,71,.3)}
.ci-page .ci-views{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ci-page .ci-views span{padding:5px 12px;border:1px solid var(--ci-line);border-radius:999px;background:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ci-navy)}

/* 5. Who it's for */
.ci-page .ci-who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:36px}
.ci-page .ci-who>div{padding-top:18px;border-top:3px solid var(--ci-teal)}
.ci-page .ci-who small{display:block;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#8a96a8}
.ci-page .ci-who h3{margin:8px 0;font:600 19px/1.3 'Inter','Inter Fallback',Arial,Helvetica,sans-serif;color:var(--ci-navy)}
.ci-page .ci-who p{margin:0;font-size:15px;line-height:1.55;color:var(--ci-body)}

/* 6. CTA + platform cards */
.ci-page .ci-cta .ci-bg img{object-position:50% 50%}
.ci-page .ci-cta::before{background:linear-gradient(90deg,rgba(15,35,71,.9) 0%,rgba(15,35,71,.7) 50%,rgba(15,35,71,.45) 100%)}
.ci-page .ci-cta-in{padding-top:110px;padding-bottom:60px}
.ci-page .ci-cta h2{max-width:560px;color:#fff}
.ci-page .ci-cta .ci-p{max-width:520px;margin-bottom:28px;color:#dbe4f3}
.ci-page .ci-cta .ci-eb{color:var(--ci-teal)}
.ci-page .ci-plat{margin-top:90px}
.ci-page .ci-plat-lbl{display:block;margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#c7d2e6}
.ci-page .ci-plat-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ci-page .ci-plat-cell{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;text-decoration:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .15s}
.ci-page .ci-plat-cell:hover{background:rgba(255,255,255,.16)}
.ci-page .ci-plat-cell b{font-size:15px;line-height:1.3;color:#fff}
.ci-page .ci-plat-cell span{font-size:13px;line-height:1.4;color:#c7d2e6}
.ci-page .ci-plat-cell em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ci-teal)}
.ci-page .ci-plat-cell.is-here{border-color:var(--ci-teal);background:rgba(41,168,224,.16)}

/* Tablet */
@media (max-width:900px){
  .ci-page .ci-wrap{padding:0 20px}
  .ci-page .ci-split,.ci-page .ci-split-rep,.ci-page .ci-split-se,.ci-page .ci-who{grid-template-columns:minmax(0,1fr);gap:40px}
  .ci-page .ci-sec,.ci-page .ci-band,.ci-page .ci-seband{padding:64px 0}
  .ci-page .ci-rows>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .ci-page .ci-hero h1{font-size:34px}
  .ci-page h2{font-size:26px}
  .ci-page .ci-fan{height:360px}
  .ci-page .ci-fan .ci-f2{top:34px}.ci-page .ci-fan .ci-f3{top:150px}.ci-page .ci-fan .ci-f4{top:180px}
  .ci-page .ci-stack{height:300px}
  .ci-page .ci-stack picture{width:72%}
  .ci-page .ci-stack .ci-s2{left:28%;top:24px}.ci-page .ci-stack .ci-s3{left:2%;top:120px}.ci-page .ci-stack .ci-s4{left:26%;top:146px}
  .ci-page .ci-plat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ci-page .ci-cta::before{background:rgba(15,35,71,.78)}
}
/* Phones: hero + CTA photos stack above the text */
@media (max-width:768px){
  .ci-page .ci-hero,.ci-page .ci-cta{display:block;min-height:0}
  .ci-page .ci-hero::before,.ci-page .ci-cta::before{display:none}
  .ci-page .ci-bg{position:relative;inset:auto;aspect-ratio:16/10}
  .ci-page .ci-hero .ci-wrap{padding-top:36px;padding-bottom:48px}
  .ci-page .ci-cta-in{padding-top:36px;padding-bottom:40px}
  .ci-page .ci-plat{margin-top:48px}
  .ci-page .ci-ctas .ci-btn{flex:1 1 100%}
  .ci-page .ci-fan{height:clamp(240px,62vw,300px)}
  .ci-page .ci-fan .ci-f2{top:24px}.ci-page .ci-fan .ci-f3{top:100px}.ci-page .ci-fan .ci-f4{top:120px}
  .ci-page .ci-stack{height:280px}
  .ci-page .ci-stack .ci-s3{top:96px}.ci-page .ci-stack .ci-s4{top:116px}
}
/* ---- Consumer Intelligence: mockup_15 updates (Rooban, Oct 2026) ---- */
/* section spacing 88px */
.ci-page .ci-sec,.ci-page .ci-band,.ci-page .ci-seband{padding:88px 0}
/* Survey Explorer band: plain white, columns top-aligned */
.ci-page .ci-seband{background:#fff}
.ci-page .ci-split-se{align-items:start}
/* report caption under the fanned pages */
.ci-page .ci-band .ci-cap{margin-top:14px}
/* Who it's for: three columns split by thin dividers */
.ci-page .ci-teams{background:#fff}
.ci-page .ci-thead{margin-bottom:36px}
.ci-page .ci-thead h2{margin:0}
.ci-page .ci-tcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ci-page .ci-tcols>div{padding:4px 32px;border-left:1px solid #d6dee8}
.ci-page .ci-tcols>div:first-child{padding-left:0;border-left:0}
.ci-page .ci-tcols small{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ci-teal)}
.ci-page .ci-tcols h3{margin:12px 0 10px;font:600 22px/1.3 'Inter','Inter Fallback',Arial,Helvetica,sans-serif;color:var(--ci-navy)}
.ci-page .ci-tcols p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ci-body)}
@media (max-width:900px){
  .ci-page .ci-sec,.ci-page .ci-band,.ci-page .ci-seband{padding:64px 0}
  .ci-page .ci-tcols{grid-template-columns:minmax(0,1fr)}
  .ci-page .ci-tcols>div{padding:22px 0;border-left:0;border-top:1px solid #d6dee8}
  .ci-page .ci-tcols>div:first-child{padding-top:0;border-top:0}
  .ci-page .ci-tcols h3{font-size:20px}
}
/* Stacked images scale with their box at every width (fixes screenshots overlapping the text
   on tablets/phones). Boxes keep the desktop proportions; positions are % of the box. */
.ci-page .ci-fan{height:auto;aspect-ratio:648/560}
.ci-page .ci-fan picture{width:64%}
.ci-page .ci-fan .ci-f1{left:0;top:0}
.ci-page .ci-fan .ci-f2{left:26%;top:10.7%}
.ci-page .ci-fan .ci-f3{left:6%;top:44.6%}
.ci-page .ci-fan .ci-f4{left:36%;top:53.6%}
.ci-page .ci-stack{height:auto;aspect-ratio:648/600}
.ci-page .ci-stack picture{width:68%}
.ci-page .ci-stack .ci-s1{left:0;top:0}
.ci-page .ci-stack .ci-s2{left:32%;top:7.7%}
.ci-page .ci-stack .ci-s3{left:3%;top:43.7%}
.ci-page .ci-stack .ci-s4{left:30%;top:50%}
/* ---------- Reports band: same photo background as the single report hero (Oct 2026) ----------
   Uses the report hero images already in /static/img/ (report_hero_bg-*). Text side stays dark. */
.ci-page .ci-band{position:relative;
  background:var(--ci-deep) url("/wp-content/themes/fmcg/static/img/report_hero_bg-1920.jpg") right center/cover no-repeat;
  background-image:image-set(url("/wp-content/themes/fmcg/static/img/report_hero_bg-1920.webp") type("image/webp"),url("/wp-content/themes/fmcg/static/img/report_hero_bg-1920.jpg") type("image/jpeg"))}
.ci-page .ci-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(15,35,71,.97) 0%,rgba(15,35,71,.9) 38%,rgba(15,35,71,.55) 62%,rgba(15,35,71,.25) 82%,rgba(15,35,71,.15) 100%)}
.ci-page .ci-band > .ci-wrap{position:relative;z-index:1}
.ci-page .ci-band .ci-cap{color:#dbe4f3;text-shadow:0 1px 3px rgba(15,35,71,.8)}
@media (max-width:900px){
  .ci-page .ci-band{background-image:image-set(url("/wp-content/themes/fmcg/static/img/report_hero_bg-960.webp") type("image/webp"),url("/wp-content/themes/fmcg/static/img/report_hero_bg-1920.jpg") type("image/jpeg"))}
  .ci-page .ci-band::before{background:linear-gradient(180deg,rgba(15,35,71,.93) 0%,rgba(15,35,71,.88) 100%)}
}
/* ===== end CONSUMER INTELLIGENCE PAGE ===== */

/* ============================================================
   SINGLE REPORT PAGE — v3 (Rooban, Oct 2026)
   One reusable template for every report:
   dark hero (title + buy card | stacked preview), "What this report covers"
   (five fixed sections), related research on a photo band.
   Wrapper: <div class="fg-rsp-page fg-rsp-v3">. New classes use fg-rsp3-;
   the cart pop-up (.fg-rsp-cart*) is unchanged and still styled above.
   ============================================================ */
.fg-rsp-v3{--fg-rsp-deep:#0f2347;--fg-rsp-body:#55657e;--fg-rsp-line3:#e3e7ec}
.fg-rsp-v3 .fg-rsp-wrap{max-width:1180px;padding-left:32px;padding-right:32px}

/* eyebrow + headings */
.fg-rsp-v3 .fg-rsp3-eb{margin:0 0 12px;font-size:14px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;line-height:1.3;color:var(--fg-rsp-teal)}
.fg-rsp-v3 .fg-rsp3-h2{margin:0 0 22px;font:600 30px/1.2 'Inter','Inter Fallback',Arial,Helvetica,sans-serif;letter-spacing:-.5px;color:var(--fg-rsp-navy)}

/* ---------- HERO ---------- */
.fg-rsp-v3 .fg-rsp3-hero{background:var(--fg-rsp-deep);color:#fff;padding:48px 0 88px;overflow:hidden}
.fg-rsp-v3 .fg-rsp3-crumb{margin:0 0 28px;font-size:13px;color:#8fa3c4}
.fg-rsp-v3 .fg-rsp3-crumb a{color:#c7d2e6;text-decoration:none}
.fg-rsp-v3 .fg-rsp3-crumb a:hover{color:#fff}
.fg-rsp-v3 .fg-rsp3-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:56px;align-items:start}
.fg-rsp-v3 .fg-rsp3-grid-solo{grid-template-columns:minmax(0,640px)}
.fg-rsp-v3 .fg-rsp3-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.fg-rsp-v3 .fg-rsp3-tags span{padding:4px 9px;border-radius:4px;background:rgba(41,168,224,.14);color:var(--fg-rsp-teal);font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1.5}
.fg-rsp-v3 .fg-rsp3-tags span:empty{display:none}
.fg-rsp-v3 .fg-rsp3-title{margin:0 0 16px;font:700 38px/1.15 'Inter','Inter Fallback',Arial,Helvetica,sans-serif;letter-spacing:-.5px;color:#fff;text-wrap:balance}
.fg-rsp-v3 .fg-rsp3-lead{margin:0;font-size:17px;line-height:1.65;color:#c7d2e6}

/* buy card */
.fg-rsp-v3 .fg-rsp3-buy{margin-top:28px;padding:24px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.06)}
.fg-rsp-v3 .fg-rsp3-buy-h{margin:0 0 14px;font-size:18px;font-weight:700;color:#fff}
.fg-rsp-v3 .fg-rsp3-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 14px}
.fg-rsp-v3 .fg-rsp3-price strong{font-size:34px;line-height:1.1;letter-spacing:-.5px;color:#fff;font-variant-numeric:tabular-nums}
.fg-rsp-v3 .fg-rsp3-price small{font-size:14px;color:#8fa3c4}
.fg-rsp-v3 .fg-rsp3-cur{display:inline-flex;margin-left:auto;border:1px solid rgba(255,255,255,.25);border-radius:6px;overflow:hidden}
.fg-rsp-v3 .fg-rsp3-cur button{padding:6px 10px;border:0;background:none;color:#c7d2e6;font:600 13px 'Inter','Inter Fallback',Arial,Helvetica,sans-serif;cursor:pointer}
.fg-rsp-v3 .fg-rsp3-cur button.active,
.fg-rsp-v3 .fg-rsp3-cur button[aria-pressed="true"]{background:var(--fg-rsp-teal);color:#fff}
.fg-rsp-v3 .fg-rsp3-acts{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 18px}
.fg-rsp-v3 .fg-rsp3-btn,
.fg-rsp-v3 .fg-rsp3-ghost{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:6px;font:600 16px/1.2 'Inter','Inter Fallback',Arial,Helvetica,sans-serif;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.fg-rsp-v3 .fg-rsp3-btn{border:0;background:var(--fg-rsp-teal);color:#fff}
.fg-rsp-v3 .fg-rsp3-btn:hover{background:#1d94c9;color:#fff}
.fg-rsp-v3 .fg-rsp3-btn.is-in-cart{background:#fff;color:var(--fg-rsp-navy)}
.fg-rsp-v3 .fg-rsp3-ghost{border:1px solid rgba(255,255,255,.4);color:#fff}
.fg-rsp-v3 .fg-rsp3-ghost:hover{border-color:#fff;color:#fff}
.fg-rsp-v3 .fg-rsp3-btn:focus-visible,
.fg-rsp-v3 .fg-rsp3-ghost:focus-visible,
.fg-rsp-v3 .fg-rsp3-cur button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.fg-rsp-v3 .fg-rsp3-files{display:flex;flex-wrap:wrap;gap:6px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);font-size:14px;color:#c7d2e6}
.fg-rsp-v3 .fg-rsp3-files b{margin-right:10px;color:#fff;font-weight:600}
.fg-rsp-v3 .fg-rsp3-files span{white-space:nowrap}
.fg-rsp-v3 .fg-rsp3-login{margin:12px 0 0;font-size:14px;color:#8fa3c4}
.fg-rsp-v3 .fg-rsp3-login a{color:var(--fg-rsp-teal);font-weight:600;text-decoration:none}

/* ---------- PREVIEW STACK (cover + up to 3 pages) ---------- */
.fg-rsp-v3 .fg-rsp3-preview{margin:0}
/* Scales as ONE picture (Rooban, Oct 2026): the box keeps its shape (aspect-ratio) and every
   page position is a % of the box, so the overlaps never change when the window is resized.
   Pages are 16:9, 62% of the box width. Rooban's numbers, with the box made a little
   shorter (1/0.8 instead of 1/0.9) so there is no empty gap above the caption. */
.fg-rsp-v3 .fg-rsp3-stack{position:relative;width:100%;max-width:600px;height:auto;aspect-ratio:1/0.8;-webkit-user-select:none;user-select:none}
.fg-rsp-v3 .fg-rsp3-stack picture{position:absolute;display:block;width:62%}
.fg-rsp-v3 .fg-rsp3-stack img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,.45);pointer-events:none;-webkit-user-drag:none}
.fg-rsp-v3 .fg-rsp3-stack .fg-rsp3-p0{left:0;top:0;z-index:4}
.fg-rsp-v3 .fg-rsp3-stack .fg-rsp3-p1{left:38%;top:10%;z-index:3}
.fg-rsp-v3 .fg-rsp3-stack .fg-rsp3-p2{left:6%;top:47%;z-index:5}
.fg-rsp-v3 .fg-rsp3-stack .fg-rsp3-p3{left:36%;top:56%;z-index:6}
/* fewer pages: shorter box, same page size */
.fg-rsp-v3 .fg-rsp3-stack.fg-rsp3-n3{aspect-ratio:1/0.73}
.fg-rsp-v3 .fg-rsp3-stack.fg-rsp3-n3 .fg-rsp3-p1{top:11%}
.fg-rsp-v3 .fg-rsp3-stack.fg-rsp3-n3 .fg-rsp3-p2{top:51.5%}
.fg-rsp-v3 .fg-rsp3-stack.fg-rsp3-n2{aspect-ratio:1/0.56}
.fg-rsp-v3 .fg-rsp3-stack.fg-rsp3-n2 .fg-rsp3-p1{top:36%}
.fg-rsp-v3 .fg-rsp3-stack.fg-rsp3-n1{aspect-ratio:auto}
.fg-rsp-v3 .fg-rsp3-stack.fg-rsp3-n1 picture{position:relative;width:100%;left:0;top:0}
.fg-rsp-v3 .fg-rsp3-pcap{margin-top:6px;font-size:14px;color:#8fa3c4}

/* ---------- ABOUT THIS REPORT ---------- */
.fg-rsp-v3 .fg-rsp3-about{padding:88px 0;background:#fff}
.fg-rsp-v3 .fg-rsp3-rows{border-top:1px solid var(--fg-rsp-line3)}
.fg-rsp-v3 .fg-rsp3-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;padding:18px 0;border-bottom:1px solid var(--fg-rsp-line3)}
.fg-rsp-v3 .fg-rsp3-row b{font-size:16px;line-height:1.5;color:var(--fg-rsp-navy)}
.fg-rsp-v3 .fg-rsp3-row > div{max-width:760px}
.fg-rsp-v3 .fg-rsp3-row p{margin:0 0 10px;font-size:15px;line-height:1.6;color:var(--fg-rsp-body)}
.fg-rsp-v3 .fg-rsp3-row p:last-child{margin-bottom:0}
.fg-rsp-v3 .fg-rsp3-basis{margin:18px 0 0;font-size:14px;color:#8a96a8}

/* ---------- RELATED RESEARCH (photo band) ---------- */
.fg-rsp-v3 .fg-rsp3-related{position:relative;padding:80px 0;color:#fff;
  background:var(--fg-rsp-deep) url("/wp-content/themes/fmcg/static/img/report-related-bg.jpg") right center/cover no-repeat;
  background-image:image-set(url("/wp-content/themes/fmcg/static/img/report-related-bg.webp") type("image/webp"),url("/wp-content/themes/fmcg/static/img/report-related-bg.jpg") type("image/jpeg"))}
.fg-rsp-v3 .fg-rsp3-related::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,35,71,.8) 0%,rgba(15,35,71,.6) 40%,rgba(15,35,71,0) 68%)}
.fg-rsp-v3 .fg-rsp3-related .fg-rsp-wrap{position:relative}
.fg-rsp-v3 .fg-rsp3-rel{max-width:780px}
.fg-rsp-v3 .fg-rsp3-rel-h{margin:0 0 6px;font:600 26px/1.25 'Inter','Inter Fallback',Arial,Helvetica,sans-serif;letter-spacing:-.4px;color:#fff}
.fg-rsp-v3 .fg-rsp3-relcols{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.fg-rsp-v3 .fg-rsp3-relcols .fg-rsp3-eb{margin-top:26px}
.fg-rsp-v3 .fg-rsp3-rlist a{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.16);color:#fff;font-size:16px;font-weight:600;line-height:1.4;text-decoration:none}
.fg-rsp-v3 .fg-rsp3-rlist a:first-child{border-top:1px solid rgba(255,255,255,.16)}
.fg-rsp-v3 .fg-rsp3-rlist small{display:block;margin-bottom:3px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-rsp-teal)}
.fg-rsp-v3 .fg-rsp3-rlist i{flex:none;font-style:normal;color:var(--fg-rsp-teal);transition:transform .15s}
.fg-rsp-v3 .fg-rsp3-rlist a:hover{color:#dbe9ff}
.fg-rsp-v3 .fg-rsp3-rlist a:hover i{transform:translateX(4px)}
/* related titles on two lines: cleaned title + "Type · Year" (Rooban, Oct 2026) */
.fg-rsp-v3 .fg-rsp3-rlist .fg-rsp3-rt{flex:1;min-width:0}
.fg-rsp-v3 .fg-rsp3-rlist em{display:block;margin-top:4px;font-style:normal;font-weight:400;font-size:13px;letter-spacing:.02em;color:#a9bad6}

/* ---------- Tablet / phone ---------- */
@media (max-width:900px){
  .fg-rsp-v3 .fg-rsp-wrap{padding-left:20px;padding-right:20px}
  .fg-rsp-v3 .fg-rsp3-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .fg-rsp-v3 .fg-rsp3-title{font-size:30px}
  .fg-rsp-v3 .fg-rsp3-cur{margin-left:0}
  /* preview goes under the text, centred, a little smaller */
  .fg-rsp-v3 .fg-rsp3-stack{max-width:520px;margin:32px auto 0}
  .fg-rsp-v3 .fg-rsp3-pcap{max-width:520px;margin-left:auto;margin-right:auto;text-align:center}
  .fg-rsp-v3 .fg-rsp3-about{padding:56px 0}
  .fg-rsp-v3 .fg-rsp3-h2{font-size:26px}
  .fg-rsp-v3 .fg-rsp3-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .fg-rsp-v3 .fg-rsp3-relcols{grid-template-columns:minmax(0,1fr);gap:0}
  .fg-rsp-v3 .fg-rsp3-related{padding:64px 0;background-position:75% center}
  .fg-rsp-v3 .fg-rsp3-related::before{background:rgba(15,35,71,.82)}
}
@media (max-width:480px){
  .fg-rsp-v3 .fg-rsp3-acts > *{flex:1 1 100%}
}
.fg-rsp-v3 .fg-rsp3-pcap{position:relative;z-index:7;margin-top:12px}
/* ---------- Photo backgrounds + single related list (Rooban "report-page-hero-options", option A, Oct 2026) ----------
   Hero: ingredients photo behind a navy fade (text side stays dark).
   Related research: fresh-produce photo, one list of up to 4 reports (recommended first).
   Images: /static/img/report_hero_bg-960.webp, -1920.webp, -1920.jpg and report_related_bg-(same). */
.fg-rsp-v3 .fg-rsp3-hero{position:relative;
  background:var(--fg-rsp-deep) url("/wp-content/themes/fmcg/static/img/report_hero_bg-1920.jpg") right center/cover no-repeat;
  background-image:image-set(url("/wp-content/themes/fmcg/static/img/report_hero_bg-1920.webp") type("image/webp"),url("/wp-content/themes/fmcg/static/img/report_hero_bg-1920.jpg") type("image/jpeg"))}
.fg-rsp-v3 .fg-rsp3-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(15,35,71,.97) 0%,rgba(15,35,71,.9) 38%,rgba(15,35,71,.55) 62%,rgba(15,35,71,.25) 82%,rgba(15,35,71,.15) 100%)}
.fg-rsp-v3 .fg-rsp3-hero .fg-rsp3-pcap{color:#dbe4f3;text-shadow:0 1px 3px rgba(15,35,71,.8)}
.fg-rsp-v3 .fg-rsp3-hero > .fg-rsp-wrap{position:relative;z-index:1}

.fg-rsp-v3 .fg-rsp3-related{background-color:var(--fg-rsp-deep);
  background-image:url("/wp-content/themes/fmcg/static/img/report_related_bg-1920.jpg");
  background-image:image-set(url("/wp-content/themes/fmcg/static/img/report_related_bg-1920.webp") type("image/webp"),url("/wp-content/themes/fmcg/static/img/report_related_bg-1920.jpg") type("image/jpeg"));
  background-position:right bottom}
/* this photo is light, so the fade is stronger than on the old dark photo */
.fg-rsp-v3 .fg-rsp3-related::before{background:linear-gradient(90deg,rgba(15,35,71,.95) 0%,rgba(15,35,71,.9) 45%,rgba(15,35,71,.35) 70%,rgba(15,35,71,0) 88%)}
.fg-rsp-v3 .fg-rsp3-rel .fg-rsp3-rlist{max-width:620px;margin-top:22px}
/* "About this report" label on white: darker blue so it passes the contrast check */
.fg-rsp-v3 .fg-rsp3-about .fg-rsp3-eb{color:#13719c}

@media (max-width:900px){
  /* text runs full width here, so the fade covers the whole photo */
  .fg-rsp-v3 .fg-rsp3-hero{background-image:image-set(url("/wp-content/themes/fmcg/static/img/report_hero_bg-960.webp") type("image/webp"),url("/wp-content/themes/fmcg/static/img/report_hero_bg-1920.jpg") type("image/jpeg"))}
  .fg-rsp-v3 .fg-rsp3-hero::before{background:linear-gradient(180deg,rgba(15,35,71,.93) 0%,rgba(15,35,71,.88) 100%)}
  .fg-rsp-v3 .fg-rsp3-related{background-image:image-set(url("/wp-content/themes/fmcg/static/img/report_related_bg-960.webp") type("image/webp"),url("/wp-content/themes/fmcg/static/img/report_related_bg-1920.jpg") type("image/jpeg"));background-position:75% bottom}
  .fg-rsp-v3 .fg-rsp3-related::before{background:rgba(15,35,71,.86)}
}
/* ===== end SINGLE REPORT PAGE v3 ===== */

/* ============================================================
   RESOURCES PAGE — new build (Rooban mockup "Resources 1", Oct 2026)
   Twig: <main id="main-content" class="rx-page">. Every rule starts with .rx-page.
   Sections: hero · jump bar · featured · trend resources · free reports · webinars ·
   articles · newsletter · "Go further" CTA. Images are placeholders (rx-*.webp/.jpg).
   ============================================================ */
.rx-page{--rx-navy:#1B3A6B;--rx-deep:#0f2347;--rx-teal:#29A8E0;--rx-body:#55657e;--rx-line:#e3e7ec;color:#1a1a2e;background:#fff}
.rx-page *,.rx-page *::before,.rx-page *::after{box-sizing:border-box}
.rx-page a{text-decoration:none;color:inherit}
.rx-page .rx-wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.rx-page .rx-eb{margin:0 0 12px;font-size:14px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;line-height:1.3;color:var(--rx-teal)}
.rx-page h2{margin:0 0 10px;font-size:30px;font-weight:600;letter-spacing:-.5px;line-height:1.2;color:var(--rx-navy)}
.rx-page p{margin:0 0 16px;font-size:17px;line-height:1.65;color:var(--rx-body)}

/* Buttons */
.rx-page .rx-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 26px;border:1px solid var(--rx-teal);border-radius:6px;background:var(--rx-teal);color:#fff;font-size:16px;font-weight:600;line-height:1.2;cursor:pointer;transition:background .15s}
.rx-page .rx-btn:hover{background:#1d94c9;border-color:#1d94c9;color:#fff}
.rx-page .rx-btn-ghost{background:transparent;border-color:rgba(255,255,255,.4)}
.rx-page .rx-btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.rx-page .rx-btn:focus-visible,.rx-page a:focus-visible{outline:2px solid var(--rx-teal);outline-offset:3px}

/* Sections + section heads */
.rx-page .rx-sec{padding:88px 0;background:#fff;scroll-margin-top:calc(var(--rx-head,60px) + var(--rx-jump-h,56px))}
.rx-page .rx-grey{background:#f5f6f8}
.rx-page .rx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:32px}
.rx-page .rx-head h2{margin:0}
.rx-page .rx-head>p{max-width:560px;margin:0}
.rx-page .rx-more{font-size:15px;font-weight:600;color:var(--rx-teal);white-space:nowrap}
.rx-page .rx-more:hover{color:#1d94c9}

/* Full-bleed photos (hero + CTA) */
.rx-page .rx-hero,.rx-page .rx-cta{position:relative;display:flex;align-items:center;overflow:hidden;background:var(--rx-deep);color:#fff}
.rx-page .rx-bg{position:absolute;inset:0;z-index:0;display:block;margin:0}
.rx-page .rx-bg img{display:block;width:100%;height:100%;object-fit:cover}
.rx-page .rx-hero .rx-wrap,.rx-page .rx-cta .rx-wrap{position:relative;z-index:2;width:100%}

/* 1. Hero */
.rx-page .rx-hero{min-height:560px}
.rx-page .rx-hero .rx-bg img{object-position:70% 30%}
.rx-page .rx-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,35,71,.94) 0%,rgba(15,35,71,.82) 42%,rgba(15,35,71,.2) 80%)}
.rx-page .rx-hero .rx-wrap{padding-top:80px;padding-bottom:80px}
.rx-page .rx-hero h1{max-width:600px;margin:0 0 18px;font-size:44px;font-weight:700;line-height:1.12;letter-spacing:-.5px;color:#fff}
.rx-page .rx-lead{max-width:520px;margin-bottom:28px;color:#dbe4f3}

/* Jump bar: sticks just under the site header (its height is measured by a small script in the twig) */
.rx-page .rx-jump{position:sticky;top:var(--rx-head,60px);z-index:20;background:#fff;border-bottom:1px solid var(--rx-line);box-shadow:0 6px 16px -12px rgba(15,35,71,.25)}
.rx-page .rx-jump .rx-wrap{display:flex;gap:30px;overflow-x:auto;scrollbar-width:none}
.rx-page .rx-jump .rx-wrap::-webkit-scrollbar{display:none}
.rx-page .rx-jump a{padding:18px 0;border-bottom:2px solid transparent;font-size:14px;font-weight:600;color:var(--rx-navy);white-space:nowrap}
.rx-page .rx-jump a:hover{border-color:var(--rx-teal)}

/* 2. Featured this month */
.rx-page .rx-feat{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);overflow:hidden;border:1px solid var(--rx-line);border-radius:14px;box-shadow:0 24px 60px rgba(15,35,71,.14)}
.rx-page .rx-feat-img{display:block;min-height:400px;margin:0}
.rx-page .rx-feat-img img{display:block;width:100%;height:100%;object-fit:cover}
.rx-page .rx-feat-txt{padding:48px}
/* Featured image that must not be cropped (e.g. the Top Ten Trends wheel): shown whole on white */
.rx-page .rx-feat-img-fit{display:flex;align-items:center;justify-content:center;padding:28px;background:#fff;border-right:1px solid var(--rx-line)}
.rx-page .rx-feat-img-fit img{width:100%;height:100%;max-height:460px;object-fit:contain}
.rx-page .rx-feat-txt small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rx-teal)}
.rx-page .rx-feat-txt :is(h3,h2.rx-feat-h){margin:10px 0 14px;font-size:30px;font-weight:600;line-height:1.2;color:var(--rx-navy)}
.rx-page .rx-feat-rel{margin-top:26px;border-top:1px solid var(--rx-line)}
.rx-page .rx-feat-rel a{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--rx-line);font-size:15px;font-weight:600;color:var(--rx-navy)}
.rx-page .rx-feat-rel a:hover{color:var(--rx-teal)}
.rx-page .rx-feat-rel i{font-style:normal;color:var(--rx-teal)}

/* 3. Trend resources: photo hubs */
.rx-page .rx-hubs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rx-page .rx-hub{position:relative;display:flex;align-items:flex-end;min-height:280px;overflow:hidden;border-radius:12px;background:var(--rx-deep);color:#fff;transition:transform .2s}
.rx-page .rx-hub-img{position:absolute;inset:0;display:block;margin:0}
.rx-page .rx-hub-img img{display:block;width:100%;height:100%;object-fit:cover}
.rx-page .rx-hub::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,35,71,.15) 0%,rgba(15,35,71,.88) 75%)}
.rx-page .rx-hub:hover{transform:translateY(-3px)}
.rx-page .rx-hub>div{position:relative;z-index:2;padding:24px}
.rx-page .rx-hub b{display:block;margin-bottom:8px;font-size:21px;font-weight:600;color:#fff}
.rx-page .rx-hub span{display:block;font-size:14px;line-height:1.5;color:#dbe4f3}
.rx-page .rx-hub i{display:block;margin-top:12px;font-style:normal;font-size:14px;font-weight:600;color:var(--rx-teal)}

/* 4. Free reports: report covers */
.rx-page .rx-reps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.rx-page .rx-rep{display:block}
.rx-page .rx-cover{display:flex;flex-direction:column;aspect-ratio:16/9;overflow:hidden;border-radius:6px;box-shadow:0 14px 34px rgba(15,35,71,.22);transition:transform .2s}
.rx-page .rx-rep:hover .rx-cover{transform:translateY(-3px)}
.rx-page .rx-cover-ph{flex:1.25;display:block;min-height:0;margin:0}
.rx-page .rx-cover-ph img{display:block;width:100%;height:100%;object-fit:cover}
.rx-page .rx-cover-band{flex:1;padding:12px 16px;background:var(--rx-navy);color:#fff}
.rx-page .rx-cover-band em{font-style:normal;font-size:13px;font-weight:700}
.rx-page .rx-cover-band em s{text-decoration:none;color:var(--rx-teal)}
.rx-page .rx-cover-band strong{display:block;margin-top:8px;font-size:13px;font-weight:600;line-height:1.35}
.rx-page .rx-rep small{display:block;margin-top:18px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rx-teal)}
.rx-page .rx-rep b{display:block;margin:6px 0;font-size:18px;font-weight:600;line-height:1.35;color:var(--rx-navy)}
.rx-page .rx-rep span{font-size:14px;color:#8a96a8}
.rx-page .rx-rep i{display:block;margin-top:10px;font-style:normal;font-size:15px;font-weight:600;color:var(--rx-teal)}

/* 5 + 6. Row lists (webinars, older articles) */
.rx-page .rx-list{border-top:1px solid var(--rx-line)}
.rx-page .rx-list a{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rx-line)}
.rx-page .rx-list time{font-size:14px;color:#8a96a8}
.rx-page .rx-list span{font-size:17px;font-weight:600;line-height:1.4;color:var(--rx-navy);transition:color .15s}
.rx-page .rx-list small{display:block;margin-bottom:3px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rx-teal)}
.rx-page .rx-list i{font-style:normal;font-size:14px;font-weight:600;color:var(--rx-teal)}
.rx-page .rx-list a:hover span{color:var(--rx-teal)}

/* 6. Article cards */
.rx-page .rx-arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:28px}
.rx-page .rx-art{display:block;padding:24px;border:1px solid var(--rx-line);border-top:3px solid var(--rx-teal);border-radius:10px;background:#fff;transition:box-shadow .15s}
.rx-page .rx-art:hover{box-shadow:0 12px 30px rgba(15,35,71,.1)}
.rx-page .rx-art small{font-size:12px;font-weight:700;letter-spacing:.04em;color:#8a96a8}
.rx-page .rx-art b{display:block;margin:10px 0 16px;font-size:19px;font-weight:600;line-height:1.35;color:var(--rx-navy)}
.rx-page .rx-art i{font-style:normal;font-size:14px;font-weight:600;color:var(--rx-teal)}

/* 7. Newsletter (Contact Form 7 form styled like the mockup) */
.rx-page .rx-news{max-width:640px;text-align:center}
.rx-page .rx-news-form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.rx-page .rx-news-form .wpcf7-form-control-wrap{flex:1;max-width:340px}
.rx-page .rx-news-form input[type=email]{width:100%;padding:14px 16px;border:1px solid var(--rx-line);border-radius:6px;background:#fff;font-size:16px;color:#1a1a2e}
.rx-page .rx-news-form input[type=email]:focus{outline:2px solid var(--rx-teal);outline-offset:1px;border-color:var(--rx-teal)}
.rx-page .rx-news-form .wpcf7-response-output{flex-basis:100%;margin:6px 0 0;font-size:14px}
.rx-page .rx-news-form .wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:13px;text-align:left}
.rx-page .rx-news-small{margin:12px 0 0;font-size:13px;color:#8a96a8}
.rx-page .rx-news-small a{color:var(--rx-teal)}

/* 8. Go further CTA */
.rx-page .rx-cta{min-height:620px}
.rx-page .rx-cta .rx-bg img{object-position:right center}
.rx-page .rx-cta h2{max-width:520px;font-size:38px;color:#fff}
.rx-page .rx-cta p:not(.rx-eb){max-width:460px;margin-bottom:28px;color:#dbe4f3}
.rx-page .rx-ctas{display:flex;flex-wrap:wrap;gap:10px}

/* Tablet */
@media (max-width:900px){
  .rx-page .rx-wrap{padding:0 20px}
  .rx-page .rx-sec{padding:64px 0}
  .rx-page .rx-hero h1{font-size:32px}
  .rx-page h2{font-size:26px}
  .rx-page .rx-feat,.rx-page .rx-hubs,.rx-page .rx-reps,.rx-page .rx-arts{grid-template-columns:minmax(0,1fr)}
  .rx-page .rx-feat-img{min-height:240px;aspect-ratio:16/10}
  .rx-page .rx-feat-txt{padding:28px}
  .rx-page .rx-feat-img-fit{aspect-ratio:auto;min-height:0;padding:20px;border-right:0;border-bottom:1px solid var(--rx-line)}
  .rx-page .rx-feat-img-fit img{height:auto;max-height:360px}
  .rx-page .rx-head{flex-direction:column;align-items:flex-start}
  .rx-page .rx-list a{grid-template-columns:minmax(0,1fr) auto;gap:6px 14px}
  .rx-page .rx-list time{grid-column:1/-1}
  .rx-page .rx-cta{min-height:520px}
  .rx-page .rx-cta .rx-bg img{object-position:80% center}
  .rx-page .rx-cta::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(15,35,71,.75)}
  .rx-page .rx-cta h2{font-size:30px}
}
/* Phones */
@media (max-width:600px){
  .rx-page .rx-hero{min-height:480px}
  .rx-page .rx-news-form{flex-direction:column;align-items:stretch}
  .rx-page .rx-news-form .wpcf7-form-control-wrap{max-width:none}
  .rx-page .rx-ctas .rx-btn{flex:1 1 100%}
  .rx-page .rx-jump .rx-wrap{gap:22px}
}
/* ---- Resources — mockup "Resources 5" (Oct 2026): theme pills, resource cards, image cards ---- */
/* Hero: new photo sits towards the right on desktop, edge fades into the navy */
@media (min-width:901px){
  .rx-page .rx-hero-pic{left:32%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
  .rx-page .rx-hero .rx-hero-pic img{object-position:center 30%}
}
/* Trend resources: theme pills */
.rx-page .rx-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.rx-page .rx-pill{padding:10px 18px;border:1px solid #cdd7e3;border-radius:999px;background:#fff;color:var(--rx-navy);font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.rx-page .rx-pill:hover{border-color:var(--rx-teal)}
.rx-page .rx-pill.is-on{background:var(--rx-navy);border-color:var(--rx-navy);color:#fff}
.rx-page .rx-pill:focus-visible{outline:2px solid var(--rx-teal);outline-offset:2px}
.rx-page .rx-tpanel{display:none}
.rx-page .rx-tpanel.is-on{display:block}
/* Resource cards: same look as the Free reports cards (.rx-rep) —
   16:9 cover (image + navy title band) with a shadow, then label, title and link below, no white box.
   Oct 2026: to hide the navy band again so the image fills the cover, un-comment the two lines marked BAND. */
.rx-page .rx-rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.rx-page .rx-rcard{display:block}
.rx-page .rx-cov{display:flex;flex-direction:column;aspect-ratio:16/9;overflow:hidden;border-radius:6px;box-shadow:0 14px 34px rgba(15,35,71,.22);transition:transform .2s}
.rx-page .rx-rcard:hover .rx-cov{transform:translateY(-3px)}
.rx-page .rx-cov-img{flex:1.25;display:block;min-height:0;margin:0}
.rx-page .rx-cov-img img{display:block;width:100%;height:100%;object-fit:cover}
.rx-page .rx-cov-band{flex:1;min-height:0;padding:12px 16px;background:var(--rx-navy);color:#fff}
/* BAND: .rx-page #hubs .rx-cov-band{display:none} */
/* BAND: .rx-page #hubs .rx-cov-img{flex:1 1 auto} */
.rx-page .rx-cov-band em{font-style:normal;font-size:13px;font-weight:700}
.rx-page .rx-cov-band em s{text-decoration:none;color:var(--rx-teal)}
.rx-page .rx-cov-band strong{display:-webkit-box;margin-top:8px;overflow:hidden;font-size:13px;font-weight:600;line-height:1.35;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rx-page .rx-rbody{display:flex;flex-direction:column}
.rx-page .rx-rbody small{order:-1;display:block;margin-top:18px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rx-teal)}
.rx-page .rx-rbody b{display:block;margin:6px 0;font-size:18px;font-weight:600;line-height:1.35;color:var(--rx-navy)}
.rx-page .rx-rbody i{display:block;margin-top:10px;font-style:normal;font-size:15px;font-weight:600;color:var(--rx-teal)}
.rx-page .rx-viewall{display:inline-block;margin-top:24px;font-size:15px;font-weight:600;color:var(--rx-teal)}
.rx-page .rx-viewall:hover{color:#1d94c9}
/* Articles + webinars: image cards */
.rx-page .rx-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.rx-page .rx-card{display:block;overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 14px 36px rgba(15,35,71,.08);transition:transform .2s,box-shadow .2s}
.rx-page .rx-card:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(15,35,71,.14)}
.rx-page .rx-card-img{position:relative;display:block;aspect-ratio:16/9;margin:0;overflow:hidden;background:#e9edf3}
.rx-page .rx-card-img img{display:block;width:100%;height:100%;object-fit:cover}
.rx-page .rx-card-img picture{display:block;width:100%;height:100%}
.rx-page .rx-card-play::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,35,71,.15),rgba(15,35,71,.75))}
.rx-page .rx-play{position:absolute;left:50%;top:50%;z-index:2;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.92);transition:transform .2s}
.rx-page .rx-play::after{content:"";position:absolute;left:22px;top:17px;border-left:16px solid var(--rx-navy);border-top:11px solid transparent;border-bottom:11px solid transparent}
.rx-page .rx-card-web:hover .rx-play{transform:scale(1.08)}
.rx-page .rx-card-play em{position:absolute;left:16px;bottom:14px;z-index:2;font-style:normal;font-size:13px;font-weight:700;letter-spacing:.04em;color:#fff}
.rx-page .rx-card-b{padding:22px 24px 24px}
.rx-page .rx-card-b small{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rx-teal)}
.rx-page .rx-card-b b{display:block;margin:10px 0;font-size:19px;font-weight:600;line-height:1.35;color:var(--rx-navy)}
.rx-page .rx-card-b span{display:block;font-size:14px;color:var(--rx-body)}
.rx-page .rx-card-b i{display:block;margin-top:14px;font-style:normal;font-size:15px;font-weight:600;color:var(--rx-teal)}
@media (max-width:900px){
  .rx-page .rx-rgrid,.rx-page .rx-cards{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .rx-page .rx-pills{flex-wrap:nowrap;overflow-x:auto;margin-left:-20px;margin-right:-20px;padding:0 20px 4px;scrollbar-width:none}
  .rx-page .rx-pills::-webkit-scrollbar{display:none}
  .rx-page .rx-pill{flex:none}
  .rx-page .rx-rbody b{font-size:16px}
}
/* ---------- Trend resources cards: back to the horizontal card (Oct 2026) ----------
   White card, report cover on the left (photo + navy band), title / type / "Download →" on
   the right. Two cards per row, one per row below 900px. */
.rx-page .rx-rgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.rx-page .rx-rcard{display:flex;align-items:center;gap:28px;padding:24px;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(15,35,71,.06);transition:box-shadow .2s}
.rx-page .rx-rcard:hover{box-shadow:0 16px 40px rgba(15,35,71,.12)}
.rx-page .rx-rcard .rx-cov{flex:none;width:clamp(130px,36%,200px);aspect-ratio:3/4;border-radius:6px;box-shadow:0 14px 30px rgba(15,35,71,.22)}
.rx-page .rx-rcard .rx-cov-img{flex:1.1}
.rx-page .rx-rcard .rx-cov-band{flex:1;padding:14px 12px}
.rx-page .rx-rcard .rx-cov-band strong{-webkit-line-clamp:4}
.rx-page .rx-rcard .rx-rbody{flex:1;min-width:0}
.rx-page .rx-rcard .rx-rbody b{order:1;margin:0;font-size:20px;font-weight:600;line-height:1.3;color:var(--rx-navy)}
.rx-page .rx-rcard .rx-rbody small{order:2;margin-top:12px;font-size:12px;letter-spacing:.12em;color:#136f9a}
.rx-page .rx-rcard .rx-rbody i{order:3;margin-top:14px;font-size:16px;color:#136f9a}
.rx-page .rx-rcard:hover .rx-rbody i{color:var(--rx-navy)}
.rx-page .rx-rcard .rx-cov-band em s{color:#5cc3f0}               /* "Gurus" on navy: passes contrast */
.rx-page .rx-sec .rx-eb{color:#136f9a}                            /* section labels on white/grey: passes contrast */
.rx-page .rx-viewall{color:#136f9a}
.rx-page .rx-viewall:hover{color:var(--rx-navy)}
@media(max-width:900px){
  .rx-page .rx-rgrid{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media(max-width:600px){
  .rx-page .rx-rcard{gap:16px;padding:16px}
  .rx-page .rx-rcard .rx-cov{width:116px}
  .rx-page .rx-rcard .rx-cov-band{padding:10px 8px}
  .rx-page .rx-rcard .rx-cov-band em,.rx-page .rx-rcard .rx-cov-band strong{font-size:10px}
  .rx-page .rx-rcard .rx-cov-band strong{margin-top:5px;-webkit-line-clamp:2}
  .rx-page .rx-rcard .rx-rbody b{font-size:16px}
  .rx-page .rx-rcard .rx-rbody small{margin-top:8px;font-size:11px}
  .rx-page .rx-rcard .rx-rbody i{margin-top:10px;font-size:15px}
}
/* ===== end RESOURCES PAGE ===== */

/* ============================================================
   SOLUTIONS — closing form (Rooban "solutions-closing-form", Oct 2026)
   Replaces the old .sr-cta-band (now commented out in the twig).
   Photo left, form right; on phones the photo sits above the form.
   ============================================================ */
.sr-close{background:#fff}
.sr-close-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:stretch;max-width:1180px;margin:0 auto;padding:88px 32px;box-sizing:border-box}
.sr-close-ph{display:block;min-height:640px;margin:0;border-radius:12px;overflow:hidden;background:#e9edf3}
.sr-close-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.sr-close-f{padding:24px 0}
.sr-close .sr-kicker{margin-bottom:12px;color:#29A8E0;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.sr-close h2{margin:0 0 14px;font-size:32px;font-weight:600;letter-spacing:-.5px;line-height:1.2;color:#1B3A6B}
.sr-close-lead{margin:0 0 26px;font-size:16px;line-height:1.6;color:#55657e}
.sr-close-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.sr-close-fld{margin-bottom:16px}
.sr-close-fld label{display:block;margin:0 0 7px;font-size:13px;font-weight:700;color:#1B3A6B}
.sr-close-fld input,.sr-close-fld select,.sr-close-fld textarea{display:block;width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #d9e0e8;border-radius:6px;background:#fff;color:#1a1a2e;font:inherit;font-size:15px;line-height:1.4}
.sr-close-fld textarea{min-height:96px;resize:vertical}
.sr-close-fld input:focus,.sr-close-fld select:focus,.sr-close-fld textarea:focus{outline:2px solid rgba(41,168,224,.35);border-color:#29A8E0}
.sr-close-fld [aria-invalid="true"]{border-color:#d64545}
.sr-close-btn{display:block;width:100%;margin-top:4px;padding:15px;border:0;border-radius:6px;background:#29A8E0;color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:background .15s}
.sr-close-btn:hover{background:#1d94c9}
.sr-close-btn:focus-visible{outline:3px solid rgba(41,168,224,.45);outline-offset:2px}
.sr-close-err{margin:12px 0 0;font-size:14px;color:#c03a3a}
@media (max-width:900px){
  .sr-close-in{grid-template-columns:minmax(0,1fr);gap:28px;padding:64px 20px}
  .sr-close-ph{min-height:280px;aspect-ratio:16/10}
  .sr-close h2{font-size:26px}
}
@media (max-width:600px){
  .sr-close-row{grid-template-columns:minmax(0,1fr);gap:0}
}
/* ===== end SOLUTIONS closing form ===== */

/* ============================================================
   NEWSLETTER PAGE (Rooban mockup "newsletter-page", Oct 2026)
   Twig: <main id="main-content" class="nl-page">. Every rule starts with .nl-page.
   Copy left (numbered "What you will receive"), form card right (520px).
   The Contact Form 7 fields inside the card are styled to match the mockup.
   ============================================================ */
.nl-page{background:#f5f6f8;color:#1a1a2e}
.nl-page *,.nl-page *::before,.nl-page *::after{box-sizing:border-box}
.nl-page .nl-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:72px;align-items:start;max-width:1180px;margin:0 auto;padding:72px 32px 88px}

/* Left: heading, lead, numbered list */
.nl-page h1{margin:0 0 18px;font-size:38px;font-weight:700;line-height:1.15;letter-spacing:-.5px;color:#1B3A6B}
.nl-page .nl-lead{max-width:430px;margin:0 0 40px;font-size:16px;line-height:1.7;color:#55657e}
.nl-page .nl-eb{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#29A8E0}
.nl-page .nl-rec{margin:0;padding:0;list-style:none}
.nl-page .nl-rec li{display:grid;grid-template-columns:34px minmax(0,1fr);margin:0 0 22px}
.nl-page .nl-n{display:flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:2px;border-radius:50%;background:#1B3A6B;color:#fff;font-size:11px;font-weight:700}
.nl-page .nl-rec b{display:block;margin-bottom:4px;font-size:17px;font-weight:600;color:#1a1a2e}
.nl-page .nl-rec span:not(.nl-n){font-size:16px;line-height:1.6;color:#55657e}

/* Right: form card */
.nl-page .nl-card{width:100%;max-width:520px;margin:0;padding:40px 36px 30px;border:1px solid #e3e7ec;border-radius:14px;background:#fff}
.nl-page .nl-card h2{margin:0 0 10px;font-size:22px;font-weight:600;color:#1B3A6B}
.nl-page .nl-card .form-sub{margin:0 0 26px;font-size:15px;line-height:1.6;color:#55657e}

/* Contact Form 7 fields inside the card */
.nl-page .nl-card .form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin:0}
.nl-page .nl-card .form-group{margin-bottom:16px}
.nl-page .nl-card label{display:block;margin-bottom:8px;font-size:15px;font-weight:400;color:#1a1a2e}
.nl-page .nl-card input[type=text],
.nl-page .nl-card input[type=email],
.nl-page .nl-card input[type=tel],
.nl-page .nl-card select,
.nl-page .nl-card textarea{width:100%;padding:10px 13px;border:1px solid #d9e0e8;border-radius:6px;background-color:#fff;color:#1a1a2e;font-family:inherit;font-size:15px;line-height:1.4;box-shadow:none}
.nl-page .nl-card input::placeholder,.nl-page .nl-card textarea::placeholder{color:#9aa6b8}
.nl-page .nl-card input:focus,.nl-page .nl-card select:focus,.nl-page .nl-card textarea:focus{outline:2px solid rgba(41,168,224,.35);border-color:#29A8E0;box-shadow:none}
.nl-page .nl-card textarea{min-height:90px;resize:vertical}
.nl-page .nl-card .submit-btn,
.nl-page .nl-card input[type=submit],
.nl-page .nl-card .wpcf7-submit{display:block;width:100%;margin-top:6px;padding:14px;border:0;border-radius:6px;background:#1B3A6B;color:#fff;font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:background .15s}
.nl-page .nl-card .submit-btn:hover,
.nl-page .nl-card input[type=submit]:hover,
.nl-page .nl-card .wpcf7-submit:hover{background:#29A8E0}
.nl-page .nl-card .form-legal{margin:14px 0 0;font-size:11.5px;line-height:1.6;color:#8a96a8;text-align:center}
.nl-page .nl-card .form-legal a{color:#8a96a8;text-decoration:underline}
.nl-page .nl-card .wpcf7-not-valid-tip{margin-top:6px;font-size:13px}
.nl-page .nl-card .wpcf7-response-output{margin:14px 0 0;padding:10px 12px;border-radius:6px;font-size:14px}
.nl-page .nl-card .ajax-loader,.nl-page .nl-card .wpcf7-spinner{display:block;margin:10px auto 0}

/* Success message (shown after a successful subscribe) */
.nl-page .success-msg{margin-top:0}

@media (max-width:900px){
  .nl-page .nl-wrap{grid-template-columns:minmax(0,1fr);gap:40px;padding:48px 20px 64px}
  .nl-page h1{font-size:30px}
  .nl-page .nl-lead{margin-bottom:28px}
  .nl-page .nl-card{max-width:none;padding:28px 22px}
  .nl-page .nl-card .form-row{grid-template-columns:minmax(0,1fr);gap:0}
}
/* ===== end NEWSLETTER PAGE ===== */

/* ---- Custom Research: hero + "When to use it" (Rooban "custom-research-hero-when", Oct 2026) ---- */
/* Hero: team photo full width behind a navy gradient, copy on the left */
.cr-page .cr-hero.cr-hero-bg{position:relative;display:flex;align-items:center;min-height:620px;padding:0;border-bottom:0;overflow:hidden;background:#0f2347;color:#fff}
.cr-page .cr-hero-pic{position:absolute;inset:0;z-index:0;display:block;margin:0}
.cr-page .cr-hero-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:70% 40%}
/* photo sits towards the right on desktop (left edge hidden under the navy shade) */
@media (min-width:901px){.cr-page .cr-hero-pic{left:32%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}.cr-page .cr-hero-pic img{object-position:center 40%}}
.cr-page .cr-hero-bg::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,35,71,.94) 0%,rgba(15,35,71,.82) 42%,rgba(15,35,71,.2) 80%)}
.cr-page .cr-hero-in{position:relative;z-index:2;padding-top:80px;padding-bottom:80px}
.cr-page .cr-hero-bg .cr-hero-copy{max-width:600px}
.cr-page .cr-hero-bg .cr-eyebrow{color:#29A8E0}
.cr-page .cr-hero-bg h1{max-width:600px;margin:0 0 20px;font-size:44px;line-height:1.15;letter-spacing:-.5px;color:#fff}
.cr-page .cr-hero-bg p{max-width:520px;margin:0 0 28px;font-size:17px;line-height:1.65;color:#dbe4f3}
.cr-page .cr-hero-bg .cr-actions{margin-top:0}
.cr-page .cr-btn-ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.cr-page .cr-btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

/* When to use it: white section, heading block, three light-grey cards */
.cr-page .cr-section.cr-when{background:#fff;color:#1a1a2e}
.cr-page .cr-when-head{max-width:720px;margin-bottom:40px}
.cr-page .cr-when-head .cr-kicker{color:#29A8E0}
.cr-page .cr-when-head h2{margin:0 0 20px;color:#1B3A6B}
.cr-page .cr-when-head .cr-lead{margin:0;font-size:17px;line-height:1.65;color:#55657e}
.cr-page .cr-when-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cr-page .cr-when-card{padding:28px;border-radius:12px;background:#f5f6f8}
.cr-page .cr-when-card h3{margin:0 0 10px;font-size:20px;line-height:1.3;font-weight:600;color:#1B3A6B}
.cr-page .cr-when-card p{margin:0;font-size:15.5px;line-height:1.6;color:#55657e}

@media (max-width:900px){
  .cr-page .cr-hero.cr-hero-bg{min-height:520px}
  .cr-page .cr-hero-bg::before{background:rgba(15,35,71,.78)}
  .cr-page .cr-hero-bg h1{font-size:34px}
  .cr-page .cr-when-grid{grid-template-columns:minmax(0,1fr);gap:16px}
}
/* Phones: photo above the copy (same as the other photo heroes) */
@media (max-width:768px){
  .cr-page .cr-hero.cr-hero-bg{display:block;min-height:0}
  .cr-page .cr-hero-bg::before{display:none}
  .cr-page .cr-hero-pic{position:relative;inset:auto;aspect-ratio:16/10}
  .cr-page .cr-hero-in{padding-top:36px;padding-bottom:48px}
  .cr-page .cr-hero-bg h1{font-size:30px}
  .cr-page .cr-when-card{padding:24px 22px}
}

/* ============================================================
   BLOG + WEBINARS (Oct 2026) — Blog, single blog post, Webinars Home, Webinars
   Same content as the old pages, restyled to match the new site:
   Inter, 1180px container with 32px padding, site type sizes
   (H1 42 / H2 32 / H3 20 / lead 18 / body 16 / labels 14).
   Every rule starts with .fx-page, so only these pages are affected.
   ============================================================ */
.fx-page{--fx-navy:#1B3A6B;--fx-deep:#0f2347;--fx-teal:#29A8E0;--fx-body:#55657e;--fx-line:#e3e7ec;--fx-soft:#f5f6f8;display:block;background:#fff;color:#1a1a2e;font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif}
.fx-page *,.fx-page *::before,.fx-page *::after{box-sizing:border-box}
.fx-page [hidden]{display:none!important}
.fx-page a{text-decoration:none}
.fx-page .fx-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 32px}
.fx-page .fx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fx-page .fx-eb{margin:0 0 12px;font-size:14px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;line-height:1.3;color:var(--fx-teal)}
.fx-page h2{margin:0;font-size:32px;font-weight:600;line-height:1.2;letter-spacing:-.6px;color:var(--fx-navy)}
.fx-page h3{margin:0;font-size:20px;font-weight:600;line-height:1.3;color:var(--fx-navy)}

/* Buttons */
.fx-page .fx-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 26px;border:1px solid var(--fx-teal);border-radius:6px;background:var(--fx-teal);color:#fff;font-family:inherit;font-size:16px;font-weight:600;line-height:1.2;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.fx-page .fx-btn:hover{background:#1d94c9;border-color:#1d94c9;color:#fff}
.fx-page .fx-btn-ghost{background:transparent;color:var(--fx-navy);border-color:#c9d3e0}
.fx-page .fx-btn-ghost:hover{background:transparent;border-color:var(--fx-teal);color:var(--fx-teal)}
.fx-page .fx-btn-sm{padding:10px 18px;font-size:15px}
.fx-page .fx-btn:focus-visible,.fx-page a:focus-visible,.fx-page button:focus-visible,.fx-page input:focus-visible{outline:2px solid var(--fx-teal);outline-offset:3px}

/* Hero: page image under a navy shade */
.fx-page .fx-hero{position:relative;display:flex;align-items:center;min-height:360px;overflow:hidden;background-color:var(--fx-deep);background-position:center;background-size:cover;background-repeat:no-repeat}
.fx-page .fx-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,35,71,.92) 0%,rgba(15,35,71,.72) 55%,rgba(15,35,71,.45) 100%)}
.fx-page .fx-hero .fx-wrap{position:relative;z-index:1;padding-top:72px;padding-bottom:72px}
.fx-page .fx-hero h1{max-width:780px;margin:0 0 18px;font-size:42px;font-weight:700;line-height:1.14;letter-spacing:-.5px;color:#fff}
.fx-page .fx-hero .fx-lead{max-width:640px;margin:0 0 24px;font-size:18px;line-height:1.6;color:#dbe4f3}
.fx-page .fx-hero-meta{margin:0;font-size:16px;color:#c9d6ea}
.fx-page .fx-hero-post{min-height:400px}
.fx-page .fx-back{display:inline-block;margin-bottom:18px;font-size:15px;font-weight:600;color:#cfe9f8}
.fx-page .fx-back:hover{color:#fff}

/* Sections */
.fx-page .fx-sec{padding:80px 0}
.fx-page .fx-grey{background:var(--fx-soft)}
.fx-page .fx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:32px}
.fx-page .fx-head-gap{margin-top:56px}
.fx-page .fx-more-link{font-size:15px;font-weight:600;color:var(--fx-teal);white-space:nowrap}
.fx-page .fx-more-link:hover{color:#1d94c9}
.fx-page .fx-center{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:44px}
.fx-page .fx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0;padding:0;list-style:none}

/* Webinar cards */
.fx-page .fx-wcard,.fx-page .fx-pcard{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--fx-line);border-radius:14px;background:#fff;box-shadow:0 14px 36px rgba(15,35,71,.08);transition:transform .2s,box-shadow .2s}
.fx-page .fx-wcard:hover,.fx-page .fx-pcard:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(15,35,71,.14)}
.fx-page .fx-wcard-img,.fx-page .fx-pcard-img{display:block;aspect-ratio:16/9;overflow:hidden;background:#e9edf3}
.fx-page .fx-wcard-img img,.fx-page .fx-pcard-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.fx-page .fx-wcard:hover .fx-wcard-img img,.fx-page .fx-pcard:hover .fx-pcard-img img{transform:scale(1.04)}
.fx-page .fx-wcard-b,.fx-page .fx-pcard-b{display:flex;flex:1;flex-direction:column;padding:22px 24px 24px}
.fx-page .fx-wcard-date,.fx-page .fx-pcard-date{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1a8bc0}
.fx-page .fx-tag{padding:3px 9px;border-radius:999px;background:#e3f4fc;color:#0A75A8;font-size:11px;letter-spacing:.06em}
.fx-page .fx-wcard h3,.fx-page .fx-pcard h3{margin:0 0 10px}
.fx-page .fx-wcard h3 a,.fx-page .fx-pcard h3 a{color:var(--fx-navy)}
.fx-page .fx-wcard h3 a:hover,.fx-page .fx-pcard h3 a:hover{color:var(--fx-teal)}
.fx-page .fx-wcard-txt,.fx-page .fx-pcard-txt{display:-webkit-box;margin:0 0 20px;overflow:hidden;font-size:16px;line-height:1.6;color:var(--fx-body);-webkit-line-clamp:4;-webkit-box-orient:vertical}
.fx-page .fx-wcard-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.fx-page .fx-read{margin-top:auto;font-size:15px;font-weight:600;color:var(--fx-teal)}
.fx-page .fx-read:hover{color:#1d94c9}

/* Blog: Trending Insights (first card wider, as before) */
.fx-page .fx-trend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.fx-page .fx-tcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:320px;padding:24px;overflow:hidden;border-radius:14px;background-color:var(--fx-navy);background-position:center;background-size:cover;color:#fff;transition:transform .2s,box-shadow .2s}
.fx-page .fx-tcard::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,35,71,.05) 0%,rgba(15,35,71,.35) 40%,rgba(15,35,71,.9) 100%)}
.fx-page .fx-tcard:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(15,35,71,.2)}
.fx-page .fx-tcard>*{position:relative;z-index:1}
.fx-page .fx-tcard-first{grid-column:span 2}
.fx-page .fx-tcard-date{margin-bottom:8px;font-size:13px;font-weight:600;color:#dbe4f3}
.fx-page .fx-tcard-title{font-size:20px;font-weight:600;line-height:1.3;color:#fff}
.fx-page .fx-tcard-first .fx-tcard-title{max-width:520px;font-size:28px;line-height:1.2}

/* Blog: trending searches + search box */
.fx-page .fx-terms{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.fx-page .fx-term{padding:10px 18px;border:1px solid #cdd7e3;border-radius:999px;background:#fff;color:var(--fx-navy);font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;cursor:pointer;transition:border-color .15s,color .15s}
.fx-page .fx-term:hover{border-color:var(--fx-teal);color:var(--fx-teal)}
.fx-page .fx-search{display:flex;gap:10px;max-width:720px;margin:28px 0 0}
.fx-page .fx-search input{flex:1;min-width:0;padding:13px 16px;border:1px solid #cdd7e3;border-radius:6px;background:#fff;font-family:inherit;font-size:16px;color:#1a1a2e}
.fx-page .fx-search input:focus{border-color:var(--fx-teal);outline:2px solid var(--fx-teal);outline-offset:1px}
.fx-page .fx-noresults{margin:20px 0 0;font-size:16px;color:var(--fx-body)}

/* Single post */
.fx-page .fx-post{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;padding:64px 0 88px}
.fx-page .fx-prose{min-width:0;font-size:17px;line-height:1.75;color:#2b3445}
.fx-page .fx-prose p{margin:0 0 18px}
.fx-page .fx-prose h1,.fx-page .fx-prose h2{margin:40px 0 14px;font-size:26px;font-weight:600;line-height:1.25;letter-spacing:-.3px;color:var(--fx-navy)}
.fx-page .fx-prose h3{margin:32px 0 12px;font-size:20px}
.fx-page .fx-prose h4,.fx-page .fx-prose h5,.fx-page .fx-prose h6{margin:28px 0 10px;font-size:17px;font-weight:600;color:var(--fx-navy)}
.fx-page .fx-prose>:first-child{margin-top:0}
.fx-page .fx-prose a{color:#0A75A8;text-decoration:underline;text-underline-offset:2px}
.fx-page .fx-prose ul,.fx-page .fx-prose ol{margin:0 0 18px;padding-left:22px}
.fx-page .fx-prose li{margin-bottom:8px}
.fx-page .fx-prose img{max-width:100%;height:auto;border-radius:8px}
.fx-page .fx-prose figure{margin:28px 0}
.fx-page .fx-prose figcaption{margin-top:8px;font-size:14px;color:var(--fx-body)}
.fx-page .fx-prose blockquote{margin:28px 0;padding:4px 0 4px 20px;border-left:3px solid var(--fx-teal);font-size:19px;color:var(--fx-navy)}
.fx-page .fx-prose table{width:100%;margin:0 0 20px;border-collapse:collapse;font-size:15px}
.fx-page .fx-prose th,.fx-page .fx-prose td{padding:10px 12px;border:1px solid var(--fx-line);text-align:left}
.fx-page .fx-prose iframe,.fx-page .fx-prose video{max-width:100%}
.fx-page .fx-share{margin-top:48px;padding-top:28px;border-top:1px solid var(--fx-line)}
.fx-page .fx-share-h{margin:0 0 14px;font-size:14px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--fx-teal)}
.fx-page .fx-share-row{display:flex;flex-wrap:wrap;gap:10px}
.fx-page .fx-share-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #cdd7e3;border-radius:50%;color:var(--fx-navy);text-decoration:none;transition:border-color .15s,color .15s,background .15s}
.fx-page .fx-share-btn:hover{border-color:var(--fx-navy);background:var(--fx-navy);color:#fff}
.fx-page .fx-share-btn svg{width:18px;height:18px;fill:currentColor}
.fx-page .fx-side{position:sticky;top:96px;align-self:start;min-width:0}
.fx-page .fx-search-side{margin:20px 0 28px}
.fx-page .fx-search-side input{padding:10px 12px;font-size:15px}
.fx-page .fx-side-h{margin:0 0 6px;padding-bottom:12px;border-bottom:2px solid var(--fx-navy);font-size:18px;letter-spacing:0}
.fx-page .fx-side-list{margin:0;padding:0;list-style:none}
.fx-page .fx-side-list a{display:block;padding:12px 0;border-bottom:1px solid var(--fx-line);font-size:15px;font-weight:500;line-height:1.45;color:var(--fx-navy)}
.fx-page .fx-side-list a:hover{color:var(--fx-teal)}

/* Tablet */
@media (max-width:1024px){
  .fx-page .fx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-page .fx-trend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-page .fx-post{grid-template-columns:minmax(0,1fr);gap:48px}
  .fx-page .fx-side{position:static}
}
@media (max-width:900px){
  .fx-page .fx-wrap{padding:0 20px}
  .fx-page .fx-sec{padding:64px 0}
  .fx-page .fx-hero{min-height:300px}
  .fx-page .fx-hero h1{font-size:34px}
  .fx-page .fx-hero .fx-lead{font-size:17px}
  .fx-page h2{font-size:26px}
  .fx-page h3{font-size:18px}
  .fx-page .fx-head{flex-direction:column;align-items:flex-start}
  .fx-page .fx-tcard-first .fx-tcard-title{font-size:24px}
}
/* Phone */
@media (max-width:640px){
  .fx-page .fx-grid,.fx-page .fx-trend{grid-template-columns:minmax(0,1fr)}
  .fx-page .fx-tcard-first{grid-column:auto}
  .fx-page .fx-tcard{min-height:240px}
  .fx-page .fx-hero .fx-wrap{padding-top:56px;padding-bottom:56px}
  .fx-page .fx-search{flex-direction:column}
  .fx-page .fx-search .fx-btn{width:100%}
  .fx-page .fx-post{padding:44px 0 64px}
  .fx-page .fx-prose{font-size:16px}
}
@media (max-width:480px){
  .fx-page .fx-hero h1{font-size:30px}
}
/* Free resources hubs (Health & Wellness, Sustainability, Indulgence, Convenience,
   Better For You, Top Trends): banner with a white fade + title in the hub colour (as before) */
.fx-page .fx-hero-light{min-height:340px}
.fx-page .fx-hero-light::before{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.94) 38%,rgba(255,255,255,.55) 62%,rgba(255,255,255,0) 82%)}
.fx-page .fx-hero-light .fx-eb{color:#1a8bc0}
.fx-page .fx-hero-light h1{max-width:560px;color:var(--fx-hub,var(--fx-navy))}
.fx-page .fx-head-center{justify-content:center;text-align:center}
.fx-page .fx-grid-center{display:flex;flex-wrap:wrap;justify-content:center}
.fx-page .fx-grid-center>*{flex:0 1 calc((100% - 56px) / 3)}
.fx-page .fx-rcard{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--fx-line);border-radius:14px;background:#fff;box-shadow:0 14px 36px rgba(15,35,71,.08);transition:transform .2s,box-shadow .2s}
.fx-page .fx-rcard:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(15,35,71,.14)}
.fx-page .fx-rcard-img{display:block;overflow:hidden;background:#e9edf3}
.fx-page .fx-rcard-img img{display:block;width:100%;height:auto;transition:transform .3s}
.fx-page .fx-rcard:hover .fx-rcard-img img{transform:scale(1.03)}
.fx-page .fx-rcard-b{display:flex;flex:1;flex-direction:column;align-items:center;gap:20px;padding:22px 24px 26px;text-align:center}
.fx-page .fx-rcard h3 a{color:var(--fx-navy)}
.fx-page .fx-rcard h3 a:hover{color:var(--fx-teal)}
.fx-page .fx-rcard .fx-btn{margin-top:auto}
/* Closing CTA band (photo + navy shade) */
.fx-page .fx-cta{position:relative;overflow:hidden;background-color:var(--fx-deep);background-position:center;background-size:cover}
.fx-page .fx-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,35,71,.88) 0%,rgba(15,35,71,.6) 60%,rgba(15,35,71,.35) 100%)}
.fx-page .fx-cta .fx-wrap{position:relative;z-index:1;padding-top:96px;padding-bottom:96px}
.fx-page .fx-cta h2{max-width:620px;margin:0 0 28px;color:#fff}
@media (max-width:1024px){.fx-page .fx-grid-center>*{flex-basis:calc((100% - 28px) / 2)}}
@media (max-width:900px){
  .fx-page .fx-hero-light::before{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.92) 60%,rgba(255,255,255,.6) 100%)}
  .fx-page .fx-cta .fx-wrap{padding-top:72px;padding-bottom:72px}
}
@media (max-width:640px){.fx-page .fx-grid-center>*{flex-basis:100%}}
/* Free download pages (trend digests): banner, cover + navy form box, meta pills, text, CTA */
.fx-page.fx-dl .fx-hero{min-height:380px}
.fx-page .fx-hero .fx-btn{margin-top:8px}
.fx-page .fx-title-center{max-width:900px;margin:0 auto 40px;text-align:center}
.fx-page .fx-sec-tight{padding:40px 0 0}
.fx-page .fx-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}
.fx-page .fx-split-even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fx-page .fx-split-cover{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.fx-page .fx-split-l,.fx-page .fx-split-r{min-width:0}
.fx-page .fx-cover{margin:0}
.fx-page .fx-cover img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 18px 44px rgba(15,35,71,.16)}
.fx-page .fx-h2-left{margin:0 0 14px}
.fx-page .fx-p{margin:0 0 24px;font-size:17px;line-height:1.7;color:var(--fx-body)}
.fx-page .fx-strong{font-weight:600;color:var(--fx-navy)}
.fx-page .fx-split-r .fx-form + .fx-h2-left{margin-top:36px}
.fx-page .fx-intro{max-width:900px;margin:0 auto 48px;text-align:center}
.fx-page .fx-intro h2{margin:0 0 18px}
.fx-page .fx-intro p{margin:0;font-size:18px;line-height:1.7;color:var(--fx-body)}
.fx-page .fx-sub{margin:0 0 18px;font-size:20px;font-weight:600;color:var(--fx-navy)}
/* Meta pills */
.fx-page .fx-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:48px 0 40px;padding:0;list-style:none}
.fx-page .fx-pills li{padding:8px 16px;border-radius:999px;background:#edf3f9;color:#1a1a2e;font-size:15px}
.fx-page .fx-pills b{font-weight:600;color:var(--fx-navy)}
/* Description text */
.fx-page .fx-body{max-width:900px;font-size:17px;line-height:1.7;color:#2b3445}
.fx-page .fx-body h2{margin:0 0 16px}
.fx-page .fx-body p{margin:0 0 18px}
.fx-page .fx-body ul{margin:0 0 24px;padding-left:22px}
.fx-page .fx-body li{margin-bottom:8px}
.fx-page .fx-body a{color:#0A75A8;text-decoration:underline}
.fx-page .fx-label{margin:28px 0 12px!important;font-size:18px;font-weight:600;color:var(--fx-navy)}
.fx-page .fx-body-tight .fx-label:first-child{margin-top:0!important}
.fx-page .fx-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 28px}
/* Navy form box (same idea as before) — the form itself comes from the page content (Contact Form 7) */
.fx-page .fx-form{padding:32px 30px;border-radius:14px;background:var(--fx-navy);color:#fff;box-shadow:0 18px 44px rgba(15,35,71,.18)}
.fx-page .fx-form-solo{max-width:620px;margin:0 auto}
.fx-page .fx-form .content,.fx-page .fx-form article{margin:0}
.fx-page .fx-form p{margin:0 0 14px;color:#fff;font-size:15px;line-height:1.55}
.fx-page .fx-form p:empty,.fx-page .fx-form br{display:none}
.fx-page .fx-form h1,.fx-page .fx-form h2,.fx-page .fx-form h3,.fx-page .fx-form h4,.fx-page .fx-form h5,.fx-page .fx-form .title-resource{margin:0 0 18px;color:#fff;font-size:20px;font-weight:600;line-height:1.3}
.fx-page .fx-form label{display:block;margin-bottom:6px;color:#fff;font-size:14px;font-weight:500}
.fx-page .fx-form a{color:#9fdcf7;text-decoration:underline}
.fx-page .fx-form .row{display:flex;flex-wrap:wrap;margin:0 -6px}
.fx-page .fx-form .row>[class*="col"]{flex:1 1 100%;max-width:100%;padding:0 6px}
.fx-page .fx-form .form-group,.fx-page .fx-form .field,.fx-page .fx-form .option-margin{margin-bottom:14px}
.fx-page .fx-form input[type=text],.fx-page .fx-form input[type=email],.fx-page .fx-form input[type=tel],.fx-page .fx-form input[type=number],.fx-page .fx-form select,.fx-page .fx-form textarea,.fx-page .fx-form .wpcf7-text,.fx-page .fx-form .wpcf7-select{display:block;width:100%!important;height:auto!important;min-height:44px;padding:10px 13px!important;border:1px solid #d9e0e8!important;border-radius:6px!important;background-color:#fff!important;color:#1a1a2e!important;font-family:inherit!important;font-size:15px!important;line-height:1.4;box-shadow:none}
.fx-page .fx-form textarea{min-height:96px}
.fx-page .fx-form input:focus,.fx-page .fx-form select:focus,.fx-page .fx-form textarea:focus{outline:2px solid #29A8E0;outline-offset:1px}
.fx-page .fx-form .intl-tel-input{display:block;width:100%}
.fx-page .fx-form .intl-tel-input input{padding-left:52px!important}
.fx-page .fx-form .control.has-icon .icon{display:none}
.fx-page .fx-form .control.has-icon:not(.has-icon-right) .input{padding-left:13px!important}
.fx-page .fx-form .wpcf7-list-item{display:block;margin:0 0 10px}
.fx-page .fx-form .wpcf7-list-item label{display:flex;align-items:flex-start;gap:8px;font-weight:400;line-height:1.5}
.fx-page .fx-form input[type=checkbox],.fx-page .fx-form input[type=radio]{flex:none;width:16px;height:16px;margin:3px 0 0;accent-color:#29A8E0;-webkit-appearance:auto;appearance:auto}
.fx-page .fx-form .wpcf7-list-item-label{color:#fff}
.fx-page .fx-form input[type=submit],.fx-page .fx-form button[type=submit],.fx-page .fx-form .wpcf7-submit,.fx-page .fx-form .but-demo{display:block;width:100%!important;height:auto!important;margin:8px 0 0;padding:14px!important;border:0!important;border-radius:6px!important;background:#29A8E0!important;color:#fff!important;font-family:inherit;font-size:16px!important;font-weight:600!important;line-height:1.2!important;cursor:pointer;transition:background .15s}
.fx-page .fx-form input[type=submit]:hover,.fx-page .fx-form button[type=submit]:hover,.fx-page .fx-form .wpcf7-submit:hover,.fx-page .fx-form .but-demo:hover{background:#1d94c9!important;color:#fff!important}
.fx-page .fx-form .wpcf7-not-valid-tip{display:block;margin-top:6px;color:#ffd2d2;font-size:13px}
.fx-page .fx-form .wpcf7-response-output{margin:16px 0 0!important;padding:10px 12px!important;border-radius:6px;color:#fff!important;font-size:14px}
.fx-page .fx-form .ajax-loader,.fx-page .fx-form .wpcf7-spinner{display:block;margin:10px auto 0}
@media (min-width:640px){.fx-page .fx-form .row>.col-md-6,.fx-page .fx-form .row>.col-sm-6,.fx-page .fx-form .row>.col-6{flex:0 0 50%;max-width:50%}}
/* Child page links (Top Ten Trends 2024 download) */
.fx-page .fx-children{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none}
.fx-page .fx-children a{display:inline-block;padding:10px 18px;border:1px solid #cdd7e3;border-radius:999px;color:var(--fx-navy);font-size:15px;font-weight:600}
.fx-page .fx-children a:hover{border-color:var(--fx-teal);color:var(--fx-teal)}
/* Tabs */
.fx-page .fx-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 40px;padding:6px;max-width:720px;border-radius:999px;background:#edf3f9}
.fx-page .fx-tabs [role=tab]{flex:1 1 0;padding:12px 18px;border:0;border-radius:999px;background:transparent;color:var(--fx-navy);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap}
.fx-page .fx-tabs [role=tab][aria-selected=true]{background:var(--fx-navy);color:#fff}
/* Page slider */
.fx-page .fx-slider{position:relative;max-width:760px;margin:0 auto}
.fx-page .fx-slides{border-radius:10px;overflow:hidden;background:#f5f6f8;box-shadow:0 18px 44px rgba(15,35,71,.14)}
.fx-page .fx-slides img{display:block;width:100%;height:auto}
.fx-page .fx-sl-prev,.fx-page .fx-sl-next{position:absolute;top:calc(50% - 32px);width:44px;height:44px;border:0;border-radius:50%;background:rgba(27,58,107,.85);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.fx-page .fx-sl-prev{left:-14px}.fx-page .fx-sl-next{right:-14px}
.fx-page .fx-sl-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
.fx-page .fx-sl-dots button{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:#c9d3e0;cursor:pointer}
.fx-page .fx-sl-dots button.is-on{background:var(--fx-navy)}
.fx-page .fx-split-l .fx-slider{margin-top:8px}
/* Agenda accordion */
.fx-page .fx-acc{max-width:900px;margin:0 auto 12px;border-radius:10px;background:#f5f8fb;overflow:hidden}
.fx-page .fx-acc summary{padding:14px 18px;background:#ebf2f8;color:var(--fx-navy);font-size:16px;font-weight:600;cursor:pointer}
.fx-page .fx-acc ul{margin:0;padding:16px 18px 16px 40px;font-size:16px;line-height:1.6;color:#2b3445}
.fx-page .fx-acc li{margin-bottom:6px}
.fx-page #p-agenda .fx-sub{max-width:900px;margin:0 auto 18px}
/* Pop-up (Read more) */
.fx-page ~ .fx-dialog,.fx-dialog{width:min(920px,calc(100% - 32px));max-height:calc(100vh - 48px);padding:0;border:0;border-radius:14px;box-shadow:0 30px 80px rgba(15,35,71,.35)}
.fx-dialog::backdrop{background:rgba(15,35,71,.6)}
.fx-dialog .fx-dialog-in{padding:24px 28px 20px}
.fx-dialog .fx-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.fx-dialog .fx-dialog-head h2{margin:0;font-size:22px}
.fx-dialog .fx-dialog-x{width:40px;height:40px;border:0;border-radius:50%;background:#edf3f9;color:var(--fx-navy);font-size:24px;cursor:pointer}
.fx-dialog .fx-dialog-foot{display:flex;justify-content:flex-end;margin-top:18px}
.fx-dialog .fx-slider{max-width:620px}
/* Spinner while the form sends */
.fx-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(15,35,71,.55)}
.fx-overlay[hidden]{display:none}
.fx-spinner{width:64px;height:64px;border:4px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:fx-spin .8s linear infinite}
@keyframes fx-spin{to{transform:rotate(360deg)}}
/* Thank-you (receipt) view */
.fx-page .fx-fade-out{opacity:0;transition:opacity .5s ease-out}
.fx-page .fx-receipt{max-width:560px;margin:0 auto 48px;padding:36px 36px 28px;border:1px solid var(--fx-line);border-radius:14px;background:#f5f8fb;text-align:center}
.fx-page .fx-receipt h2{margin:0 0 14px}
.fx-page .fx-receipt p{margin:0 0 12px;font-size:17px;line-height:1.6;color:#2b3445}
.fx-page .fx-receipt a{color:#0A75A8}
.fx-page .fx-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fx-page .fx-rcard-fixed{aspect-ratio:16/10}
.fx-page .fx-rcard-fixed img{height:100%;object-fit:cover}
@media (max-width:1024px){
  .fx-page .fx-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-page .fx-split,.fx-page .fx-split-even,.fx-page .fx-split-cover{grid-template-columns:minmax(0,1fr);gap:40px}
  .fx-page .fx-split-l .fx-cover,.fx-page .fx-split-l .fx-slider{max-width:620px;margin-left:auto;margin-right:auto}
}
@media (max-width:640px){
  .fx-page .fx-grid-4{grid-template-columns:minmax(0,1fr)}
  .fx-page .fx-form{padding:26px 20px}
  .fx-page .fx-tabs{border-radius:14px}
  .fx-page .fx-tabs [role=tab]{flex:1 1 100%}
  .fx-page .fx-sl-prev{left:6px}.fx-page .fx-sl-next{right:6px}
  .fx-page .fx-title-center{margin-bottom:28px}
  .fx-dialog .fx-dialog-in{padding:18px 16px}
}
/* Webinar registration pages (partner webinars, Oct 2026) */
.fx-page.fx-web .fx-hero{min-height:380px}
.fx-page .fx-hero-row{display:flex;align-items:center;justify-content:space-between;gap:48px}
.fx-page .fx-hero-row>div:first-child{min-width:0}
.fx-page .fx-hero-logo{flex:0 0 auto;max-width:340px;margin:0}
.fx-page .fx-hero-logo img{display:block;width:auto;max-width:100%;max-height:120px;height:auto}
.fx-page .fx-wmeta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 36px;padding:0;border:1px solid var(--fx-line);border-radius:12px;background:#f5f8fb;overflow:hidden}
.fx-page .fx-wmeta div{padding:16px 20px;border-left:1px solid var(--fx-line)}
.fx-page .fx-wmeta div:first-child{border-left:0}
.fx-page .fx-wmeta dt{margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#1a8bc0}
.fx-page .fx-wmeta dd{margin:0;font-size:16px;font-weight:600;line-height:1.45;color:var(--fx-navy)}
.fx-page .fx-web .fx-body{max-width:none}
.fx-page .fx-web .fx-body .fx-label:first-child{margin-top:0!important}
.fx-page .fx-checks{margin:0 0 24px!important;padding:0!important;list-style:none}
.fx-page .fx-checks li{position:relative;margin-bottom:10px;padding-left:30px;color:#2b3445}
.fx-page .fx-checks li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:50%;background:var(--fx-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l2.6 2.5L12 5.5'/%3E%3C/svg%3E") center/12px no-repeat}
.fx-page .fx-note{font-style:italic;color:var(--fx-body)}
.fx-page .fx-speakers{display:grid;gap:16px;margin:0 0 8px}
.fx-page .fx-speaker{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:start;padding:20px;border:1px solid var(--fx-line);border-radius:12px;background:#fff}
.fx-page .fx-speaker img{display:block;width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:center top;background:#edf3f9}
.fx-page .fx-speaker h3{margin:0 0 2px;font-size:18px;font-weight:600;line-height:1.35;color:var(--fx-navy)}
.fx-page .fx-speaker .fx-role{margin:0 0 10px!important;font-size:15px;font-weight:500;line-height:1.45;color:#1a8bc0}
.fx-page .fx-speaker p{margin:0 0 10px;font-size:15px;line-height:1.65;color:var(--fx-body)}
.fx-page .fx-speaker p:last-child{margin-bottom:0}
.fx-page .fx-web-aside{display:grid;gap:24px}
.fx-page .fx-web-aside .fx-cover img{border-radius:12px}
.fx-page #register{scroll-margin-top:96px}
@media (max-width:1024px){
  .fx-page .fx-web-aside{max-width:620px;width:100%;margin:0 auto}
}
@media (max-width:900px){
  .fx-page .fx-hero-row{flex-direction:column;align-items:flex-start;gap:28px}
  .fx-page .fx-hero-logo img{max-height:84px}
}
@media (max-width:640px){
  .fx-page .fx-wmeta{grid-template-columns:minmax(0,1fr)}
  .fx-page .fx-wmeta div{border-left:0;border-top:1px solid var(--fx-line)}
  .fx-page .fx-wmeta div:first-child{border-top:0}
  .fx-page .fx-speaker{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:16px}
  .fx-page .fx-speaker img{width:64px;height:64px}
}
.fx-page .fx-wmeta-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.fx-page .fx-wmeta-4 div:nth-child(odd){border-left:0}
.fx-page .fx-wmeta-4 div:nth-child(n+3){border-top:1px solid var(--fx-line)}
.fx-page .fx-video{max-width:880px;margin:0 auto}
.fx-page .fx-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:12px;background:#0f2347;box-shadow:0 18px 44px rgba(15,35,71,.18)}
.fx-page.fx-wvid .fx-hero{min-height:300px}
.fx-page .fx-price{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:20px;align-items:center;padding:20px;border:1px solid var(--fx-line);border-radius:12px;background:#f5f8fb}
.fx-page .fx-price-tag{text-align:center}
.fx-page .fx-price-tag span{display:block;margin-bottom:4px;font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#1a8bc0}
.fx-page .fx-price-tag b{font-size:24px;font-weight:700;color:var(--fx-navy)}
.fx-page .fx-price .fx-checks{margin:0!important}
.fx-page .fx-web-buy{margin-top:48px;text-align:center}
.fx-page .fx-web-buy p{margin:0 0 16px;font-size:18px;font-weight:600;color:var(--fx-navy)}
.fx-page .fx-web .fx-split-even .fx-split-r .fx-label:first-child{margin-top:0!important}
@media (max-width:640px){
  .fx-page .fx-wmeta-4{grid-template-columns:minmax(0,1fr)}
  .fx-page .fx-wmeta-4 div:nth-child(n+2){border-top:1px solid var(--fx-line)}
  .fx-page .fx-price{grid-template-columns:minmax(0,1fr)}
}
/* ------------------------------------------------------------
   APP PAGES (checkout, cart, pricing, account, portfolios, regions…)
   These pages keep their original markup and scripts (cart, Stripe,
   pricing engine, AJAX), so the old Bootstrap/Bulma helper classes are
   re-created here, scoped to .fx-app only. Oct 2026.
   ------------------------------------------------------------ */
.fx-page.fx-app{background:#fff;font-size:16px;line-height:1.6}
.fx-app .fx-hero{min-height:260px}
.fx-app .fx-hero h1{margin-bottom:0}
.fx-app .fx-hero-plain{background-image:none}
.fx-app img{max-width:100%;height:auto}
.fx-app .container{width:100%;max-width:1180px;margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px}
.fx-app .section{padding:64px 0}
.fx-app .row{display:flex;flex-wrap:wrap;margin-left:-12px;margin-right:-12px}
.fx-app .row>*{min-width:0}
.fx-app .col,.fx-app .column{flex:1 0 0%;padding-left:12px;padding-right:12px;max-width:100%}
.fx-app [class*="col-"]{position:relative;width:100%;padding-left:12px;padding-right:12px}
.fx-app .col-12{flex:0 0 100%;max-width:100%}
@media (min-width:576px){
.fx-app .col-sm-1{flex:0 0 8.3333%;max-width:8.3333%}
.fx-app .col-sm-2{flex:0 0 16.6667%;max-width:16.6667%}
.fx-app .col-sm-3{flex:0 0 25.0%;max-width:25.0%}
.fx-app .col-sm-4{flex:0 0 33.3333%;max-width:33.3333%}
.fx-app .col-sm-5{flex:0 0 41.6667%;max-width:41.6667%}
.fx-app .col-sm-6{flex:0 0 50.0%;max-width:50.0%}
.fx-app .col-sm-7{flex:0 0 58.3333%;max-width:58.3333%}
.fx-app .col-sm-8{flex:0 0 66.6667%;max-width:66.6667%}
.fx-app .col-sm-9{flex:0 0 75.0%;max-width:75.0%}
.fx-app .col-sm-10{flex:0 0 83.3333%;max-width:83.3333%}
.fx-app .col-sm-11{flex:0 0 91.6667%;max-width:91.6667%}
.fx-app .col-sm-12{flex:0 0 100.0%;max-width:100.0%}
}
@media (min-width:768px){
.fx-app .col-md-1{flex:0 0 8.3333%;max-width:8.3333%}
.fx-app .col-md-2{flex:0 0 16.6667%;max-width:16.6667%}
.fx-app .col-md-3{flex:0 0 25.0%;max-width:25.0%}
.fx-app .col-md-4{flex:0 0 33.3333%;max-width:33.3333%}
.fx-app .col-md-5{flex:0 0 41.6667%;max-width:41.6667%}
.fx-app .col-md-6{flex:0 0 50.0%;max-width:50.0%}
.fx-app .col-md-7{flex:0 0 58.3333%;max-width:58.3333%}
.fx-app .col-md-8{flex:0 0 66.6667%;max-width:66.6667%}
.fx-app .col-md-9{flex:0 0 75.0%;max-width:75.0%}
.fx-app .col-md-10{flex:0 0 83.3333%;max-width:83.3333%}
.fx-app .col-md-11{flex:0 0 91.6667%;max-width:91.6667%}
.fx-app .col-md-12{flex:0 0 100.0%;max-width:100.0%}
}
@media (min-width:992px){
.fx-app .col-lg-1{flex:0 0 8.3333%;max-width:8.3333%}
.fx-app .col-lg-2{flex:0 0 16.6667%;max-width:16.6667%}
.fx-app .col-lg-3{flex:0 0 25.0%;max-width:25.0%}
.fx-app .col-lg-4{flex:0 0 33.3333%;max-width:33.3333%}
.fx-app .col-lg-5{flex:0 0 41.6667%;max-width:41.6667%}
.fx-app .col-lg-6{flex:0 0 50.0%;max-width:50.0%}
.fx-app .col-lg-7{flex:0 0 58.3333%;max-width:58.3333%}
.fx-app .col-lg-8{flex:0 0 66.6667%;max-width:66.6667%}
.fx-app .col-lg-9{flex:0 0 75.0%;max-width:75.0%}
.fx-app .col-lg-10{flex:0 0 83.3333%;max-width:83.3333%}
.fx-app .col-lg-11{flex:0 0 91.6667%;max-width:91.6667%}
.fx-app .col-lg-12{flex:0 0 100.0%;max-width:100.0%}
}
@media (min-width:1200px){
.fx-app .col-xl-1{flex:0 0 8.3333%;max-width:8.3333%}
.fx-app .col-xl-2{flex:0 0 16.6667%;max-width:16.6667%}
.fx-app .col-xl-3{flex:0 0 25.0%;max-width:25.0%}
.fx-app .col-xl-4{flex:0 0 33.3333%;max-width:33.3333%}
.fx-app .col-xl-5{flex:0 0 41.6667%;max-width:41.6667%}
.fx-app .col-xl-6{flex:0 0 50.0%;max-width:50.0%}
.fx-app .col-xl-7{flex:0 0 58.3333%;max-width:58.3333%}
.fx-app .col-xl-8{flex:0 0 66.6667%;max-width:66.6667%}
.fx-app .col-xl-9{flex:0 0 75.0%;max-width:75.0%}
.fx-app .col-xl-10{flex:0 0 83.3333%;max-width:83.3333%}
.fx-app .col-xl-11{flex:0 0 91.6667%;max-width:91.6667%}
.fx-app .col-xl-12{flex:0 0 100.0%;max-width:100.0%}
}
.fx-app .m-0{margin:0!important}
.fx-app .mt-0,.fx-app .my-0{margin-top:0!important}
.fx-app .mb-0,.fx-app .my-0{margin-bottom:0!important}
.fx-app .ml-0,.fx-app .mx-0{margin-left:0!important}
.fx-app .mr-0,.fx-app .mx-0{margin-right:0!important}
.fx-app .p-0{padding:0!important}
.fx-app .pt-0,.fx-app .py-0{padding-top:0!important}
.fx-app .pb-0,.fx-app .py-0{padding-bottom:0!important}
.fx-app .pl-0,.fx-app .px-0{padding-left:0!important}
.fx-app .pr-0,.fx-app .px-0{padding-right:0!important}
.fx-app .m-1{margin:.25rem!important}
.fx-app .mt-1,.fx-app .my-1{margin-top:.25rem!important}
.fx-app .mb-1,.fx-app .my-1{margin-bottom:.25rem!important}
.fx-app .ml-1,.fx-app .mx-1{margin-left:.25rem!important}
.fx-app .mr-1,.fx-app .mx-1{margin-right:.25rem!important}
.fx-app .p-1{padding:.25rem!important}
.fx-app .pt-1,.fx-app .py-1{padding-top:.25rem!important}
.fx-app .pb-1,.fx-app .py-1{padding-bottom:.25rem!important}
.fx-app .pl-1,.fx-app .px-1{padding-left:.25rem!important}
.fx-app .pr-1,.fx-app .px-1{padding-right:.25rem!important}
.fx-app .m-2{margin:.5rem!important}
.fx-app .mt-2,.fx-app .my-2{margin-top:.5rem!important}
.fx-app .mb-2,.fx-app .my-2{margin-bottom:.5rem!important}
.fx-app .ml-2,.fx-app .mx-2{margin-left:.5rem!important}
.fx-app .mr-2,.fx-app .mx-2{margin-right:.5rem!important}
.fx-app .p-2{padding:.5rem!important}
.fx-app .pt-2,.fx-app .py-2{padding-top:.5rem!important}
.fx-app .pb-2,.fx-app .py-2{padding-bottom:.5rem!important}
.fx-app .pl-2,.fx-app .px-2{padding-left:.5rem!important}
.fx-app .pr-2,.fx-app .px-2{padding-right:.5rem!important}
.fx-app .m-3{margin:1rem!important}
.fx-app .mt-3,.fx-app .my-3{margin-top:1rem!important}
.fx-app .mb-3,.fx-app .my-3{margin-bottom:1rem!important}
.fx-app .ml-3,.fx-app .mx-3{margin-left:1rem!important}
.fx-app .mr-3,.fx-app .mx-3{margin-right:1rem!important}
.fx-app .p-3{padding:1rem!important}
.fx-app .pt-3,.fx-app .py-3{padding-top:1rem!important}
.fx-app .pb-3,.fx-app .py-3{padding-bottom:1rem!important}
.fx-app .pl-3,.fx-app .px-3{padding-left:1rem!important}
.fx-app .pr-3,.fx-app .px-3{padding-right:1rem!important}
.fx-app .m-4{margin:1.5rem!important}
.fx-app .mt-4,.fx-app .my-4{margin-top:1.5rem!important}
.fx-app .mb-4,.fx-app .my-4{margin-bottom:1.5rem!important}
.fx-app .ml-4,.fx-app .mx-4{margin-left:1.5rem!important}
.fx-app .mr-4,.fx-app .mx-4{margin-right:1.5rem!important}
.fx-app .p-4{padding:1.5rem!important}
.fx-app .pt-4,.fx-app .py-4{padding-top:1.5rem!important}
.fx-app .pb-4,.fx-app .py-4{padding-bottom:1.5rem!important}
.fx-app .pl-4,.fx-app .px-4{padding-left:1.5rem!important}
.fx-app .pr-4,.fx-app .px-4{padding-right:1.5rem!important}
.fx-app .m-5{margin:3rem!important}
.fx-app .mt-5,.fx-app .my-5{margin-top:3rem!important}
.fx-app .mb-5,.fx-app .my-5{margin-bottom:3rem!important}
.fx-app .ml-5,.fx-app .mx-5{margin-left:3rem!important}
.fx-app .mr-5,.fx-app .mx-5{margin-right:3rem!important}
.fx-app .p-5{padding:3rem!important}
.fx-app .pt-5,.fx-app .py-5{padding-top:3rem!important}
.fx-app .pb-5,.fx-app .py-5{padding-bottom:3rem!important}
.fx-app .pl-5,.fx-app .px-5{padding-left:3rem!important}
.fx-app .pr-5,.fx-app .px-5{padding-right:3rem!important}
.fx-app .m-6{margin:3rem!important}
.fx-app .mt-6,.fx-app .my-6{margin-top:3rem!important}
.fx-app .mb-6,.fx-app .my-6{margin-bottom:3rem!important}
.fx-app .ml-6,.fx-app .mx-6{margin-left:3rem!important}
.fx-app .mr-6,.fx-app .mx-6{margin-right:3rem!important}
.fx-app .p-6{padding:3rem!important}
.fx-app .pt-6,.fx-app .py-6{padding-top:3rem!important}
.fx-app .pb-6,.fx-app .py-6{padding-bottom:3rem!important}
.fx-app .pl-6,.fx-app .px-6{padding-left:3rem!important}
.fx-app .pr-6,.fx-app .px-6{padding-right:3rem!important}
.fx-app .mx-auto{margin-left:auto!important;margin-right:auto!important}
.fx-app .my-auto{margin-top:auto!important;margin-bottom:auto!important}
.fx-app .mt-auto{margin-top:auto!important}
@media (min-width:768px){.fx-app .px-md-1{padding-left:.25rem!important;padding-right:.25rem!important}}
@media (min-width:576px) and (max-width:767px){.fx-app .px-sm-5{padding-left:3rem!important;padding-right:3rem!important}}
.fx-app .d-none{display:none!important}
.fx-app .d-block{display:block!important}
.fx-app .d-flex{display:flex!important}
@media (min-width:768px){.fx-app .d-md-block{display:block!important}}
@media (min-width:992px){.fx-app .d-lg-flex{display:flex!important}.fx-app .text-lg-left{text-align:left!important}}
.fx-app .flex-column{flex-direction:column!important}
.fx-app .flex-wrap{flex-wrap:wrap!important}
.fx-app .justify-content-center{justify-content:center!important}
.fx-app .text-center{text-align:center!important}
.fx-app .text-right{text-align:right!important}
.fx-app .text-white{color:#fff!important}
.fx-app .text-dark{color:#1a1a2e!important}
.fx-app .font-weight-bold{font-weight:600!important}
.fx-app .is-pulled-right{float:right}
.fx-app .bg-white{background:#fff}
.fx-app hr{border:0;border-top:1px solid var(--fx-line);margin:16px 0}
.fx-app h1,.fx-app h2,.fx-app h3{color:var(--fx-navy);font-weight:600;line-height:1.25}
.fx-app .title{margin:0 0 16px;font-size:22px;font-weight:600;color:var(--fx-navy)}
.fx-app .title.is-4{font-size:22px}
.fx-app .card{position:relative;display:block;padding:32px;border:1px solid var(--fx-line);border-radius:14px;background:#fff;box-shadow:0 10px 30px rgba(15,35,71,.06)}
.fx-app .card-body{padding:16px 18px}
.fx-app input[type=text],.fx-app input[type=email],.fx-app input[type=number],.fx-app input[type=password],.fx-app input.input,.fx-app .form-control,.fx-app select{width:100%;min-height:44px;padding:10px 13px;border:1px solid #d9e0e8;border-radius:6px;background:#fff;color:#1a1a2e;font-family:inherit;font-size:15px;line-height:1.4}
.fx-app input:focus,.fx-app select:focus{outline:2px solid var(--fx-teal);outline-offset:1px}
.fx-app input[type=checkbox]{width:16px;height:16px;min-height:0;margin:0 6px 0 0;vertical-align:-2px;accent-color:var(--fx-teal)}
.fx-app .button,.fx-app .btn,.fx-app .but-demo,.fx-app .btn-subscribe,.fx-app .login-button,.fx-app .report-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 22px;border:1px solid var(--fx-teal);border-radius:6px;background:var(--fx-teal);color:#fff;font-family:inherit;font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .15s}
.fx-app .button:hover,.fx-app .btn:hover,.fx-app .but-demo:hover,.fx-app .btn-subscribe:hover,.fx-app .login-button:hover{background:#1d94c9;border-color:#1d94c9;color:#fff}
.fx-app .btn-sm{min-height:34px;padding:6px 14px;font-size:14px}
.fx-app .btn-subscribe,.fx-app .login-button{background:var(--fx-navy);border-color:var(--fx-navy)}
.fx-app .collapse:not(.show){display:none}
/* Pop-ups (old Bootstrap modals, opened by the small script on each page) */
.fx-app .modal{position:fixed;inset:0;z-index:1050;display:none;overflow-x:hidden;overflow-y:auto;padding:24px 16px;background:rgba(15,35,71,.6)}
.fx-app .modal.show{display:block}
.fx-app .modal-dialog{max-width:640px;margin:32px auto}
.fx-app .modal-lg{max-width:860px}
.fx-app .modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - 64px)}
.fx-app .modal-content{width:100%;border:0!important;border-radius:14px;background:#fff;color:#1a1a2e;box-shadow:0 30px 80px rgba(15,35,71,.35);overflow:hidden}
.fx-app .modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid var(--fx-line)}
.fx-app .modal-header h2{margin:0;font-size:20px!important;text-align:left!important}
.fx-app .modal-body{padding:20px 24px 24px;font-size:15px;line-height:1.65;color:#2b3445}
.fx-app .close{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:#edf3f9;color:var(--fx-navy);font-size:24px;line-height:1;cursor:pointer}
.fx-app .modal-content.fx-form{padding:28px 30px;background:var(--fx-navy)}
.fx-app .modal-content.fx-form .modal-body{padding:0;color:#fff}
.fx-app .modal-content.fx-form .but-demo{min-height:34px;padding:4px 12px;border-color:rgba(255,255,255,.35);background:transparent}
body.fx-modal-open{overflow:hidden}
.fx-app .tooltiptext{display:none}
.fx-app .fa-info-circle{position:relative;display:inline-block;cursor:pointer;color:var(--fx-navy)}
.fx-app .fa-info-circle:hover .tooltiptext,.fx-app .fa-info-circle:focus .tooltiptext{position:absolute;bottom:130%;left:50%;z-index:5;display:block;width:200px;margin-left:-100px;padding:10px;border-radius:6px;background:#1a1a2e;color:#fff;font-family:'Inter','Inter Fallback',Arial,sans-serif;font-size:13px;font-weight:400;line-height:1.45;text-align:center}
@media (max-width:900px){.fx-app .container{padding-left:20px;padding-right:20px}.fx-app .section{padding:48px 0}}
@media (max-width:767px){.fx-app .row{margin-left:-8px;margin-right:-8px}.fx-app .col,.fx-app .column,.fx-app [class*="col-"]{padding-left:8px;padding-right:8px}}
/* Old Bulma helpers used by the clip, dashboard and alerts pages */
.fx-app .columns{display:flex;flex-wrap:wrap;gap:32px}
.fx-app .columns>.column{padding:0}
.fx-app .column.is-3{flex:0 0 calc(25% - 12px);max-width:calc(25% - 12px)}
.fx-app .columns>.column.is-4{flex:0 0 calc(33.333% - 22px);max-width:calc(33.333% - 22px)}
.fx-app .columns>.column.is-8{flex:1 1 0%}
.fx-app .columns>.column.is-12{flex:0 0 100%}
.fx-app .field{margin-bottom:14px}
.fx-app .field.is-grouped,.fx-app .field.has-addons{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.fx-app .control{margin:0}
.fx-app .control.is-expanded{flex:1 1 220px}
.fx-app .select.is-fullwidth,.fx-app .select.is-fullwidth select{width:100%}
.fx-app .box{padding:20px;border:1px solid var(--fx-line);border-radius:14px;background:#fff;box-shadow:0 10px 30px rgba(15,35,71,.06)}
.fx-app .table{width:100%;border-collapse:collapse;font-size:15px}
.fx-app .table td,.fx-app .table th{padding:10px 8px;border-bottom:1px solid var(--fx-line);vertical-align:middle}
.fx-app .button.is-danger{background:#c62828;border-color:#c62828}
.fx-app .button.is-danger:hover{background:#a51f1f;border-color:#a51f1f}
.fx-app .button.is-success{background:#1f9d6b;border-color:#1f9d6b}
.fx-app .button.is-success:hover{background:#178357;border-color:#178357}
.fx-app .button.is-primary,.fx-app .button.is-info{background:var(--fx-navy);border-color:var(--fx-navy)}
.fx-app .button.is-primary:hover,.fx-app .button.is-info:hover{background:#244b88;border-color:#244b88}
.fx-app .button.is-small{min-height:34px;padding:6px 12px;font-size:14px}
.fx-app .button.is-medium{min-height:48px;padding:12px 28px;font-size:16px}
.fx-app .button .icon{display:inline-flex}
.fx-app .modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--fx-line)}
.fx-app .fx-hero-slim{min-height:200px}
.fx-page .fx-btn-ghost{margin-top:18px;border-color:rgba(255,255,255,.6);background:transparent}
.fx-page .fx-btn-ghost:hover{background:rgba(255,255,255,.12)}
@media (max-width:900px){.fx-app .columns>.column.is-4,.fx-app .columns>.column.is-8{flex:0 0 100%;max-width:100%}.fx-app .column.is-3{flex:0 0 calc(50% - 8px);max-width:calc(50% - 8px)}}
@media (max-width:560px){.fx-app .column.is-3{flex:0 0 100%;max-width:100%}}
/* --- Regions & portfolios (dark band, same as before) --- */
.fx-app-regions .regions-background{padding:72px 0 88px;background:#0f2347 url('/wp-content/themes/fmcg/static/img/Access%20Background.png') center/cover no-repeat;color:#fff}
.fx-app-regions .regions-background h1{margin:0 0 8px;font-size:42px;font-weight:700;color:#fff}
.fx-app-regions .regions-background hr{height:3px!important;margin:16px 0 32px;border:0;background:rgba(255,255,255,.85)!important}
.fx-app-regions .regions-background>.container>.row>.column{flex:1 1 0%}
.fx-app-regions .regionsButtonStyle{display:block;width:100%;min-height:44px;margin:0 0 14px;padding:10px 16px;border:0!important;border-radius:8px;color:#fff!important;font-family:inherit;font-size:15px;font-weight:600;text-align:left;opacity:1!important;cursor:default;box-shadow:none!important}
.fx-app-regions .regionsButtonStyle:not(:first-child){margin-top:28px}
.fx-app-regions .regions-background p{display:block!important;margin:0 0 8px!important;font-size:15px;font-weight:500;line-height:1.45}
.fx-app-regions .regions-background br{display:none}
.fx-app-regions .regions-background .column .column{padding-left:4px!important;padding-right:4px}
.fx-app-regions .regions-background strong{color:#fff;font-weight:500}
.fx-app-regions .fa-play{margin-right:8px!important;font-size:9px;color:var(--fx-teal);vertical-align:2px}
.fx-app-regions .fa-plus-circle{margin-left:6px!important;font-size:12px;opacity:.75}
.fx-app-regions span[onclick]{cursor:pointer}
.fx-app-regions span[onclick]:hover,.fx-app-regions span[onclick]:focus{text-decoration:underline;outline:0}
.fx-app-portfolios .fa-unlock{visibility:hidden}
.fx-app-portfolios .fa-lock{margin-right:4px;font-size:12px}
.fx-app-portfolios #toggleButton{align-items:center;cursor:pointer;margin:6px 0 8px}
.fx-app-portfolios #toggleButton .fa-2x{font-size:20px;color:var(--fx-teal)}
.fx-app-portfolios .modal-body strong{color:var(--fx-navy)}
.fx-app-portfolios .line-between-header-text,.fx-app-portfolios .line-between-header-text-description{height:1px;margin:14px 0;border:0;background:var(--fx-line)}
.fx-app-portfolios .modal .btn{min-height:38px}
@media (max-width:991px){.fx-app-regions .regions-background>.container>.row>.column{flex:0 0 50%;max-width:50%;margin-bottom:24px}}
@media (max-width:600px){.fx-app-regions .regions-background>.container>.row>.column{flex:0 0 100%;max-width:100%}.fx-app-regions .regions-background h1{font-size:30px}}
/* --- Checkout & cart --- */
.fx-app-checkout .section,.fx-app-cart .section{padding-top:48px}
.fx-app-checkout #currencySelector,.fx-app-cart #currencySelector{display:inline-block;width:auto;min-width:150px}
.fx-app-checkout .container.mb-3,.fx-app-cart .container.mb-3{text-align:right!important}
.fx-app .report-titles-and-cart{border:1px solid var(--fx-line);border-radius:14px;background:#fff;box-shadow:0 10px 30px rgba(15,35,71,.06)}
.fx-app .cart-report-title{color:var(--fx-navy)}
.fx-app .delete-item.btn{min-height:32px;padding:4px 8px;border:0;background:transparent;color:#c62828!important;font-size:18px}
.fx-app .delete-item.btn:hover{background:#fdecea}
.fx-app-checkout .title,.fx-app-cart .title{text-align:center}
.fx-app-checkout .row>.col>div>p.font-weight-bold,.fx-app-checkout p.font-weight-bold.mb-2{font-size:14px}
.fx-app-checkout .row{margin-bottom:6px}
.fx-app-checkout small{display:block;min-height:18px;margin-top:4px;color:#c62828;font-size:13px;font-weight:500;visibility:hidden}
.fx-app-checkout .form-inputs.error small{visibility:visible}
.fx-app-checkout .form-inputs.error input,.fx-app-checkout .form-inputs.error select{border-color:#e75c3c}
.fx-app-checkout .form-inputs.success input,.fx-app-checkout .form-inputs.success select{border-color:#2ecc71}
.fx-app-checkout .req{margin-left:2px}
.fx-app-checkout .but-demo,.fx-app-cart .but-demo{min-width:220px}
.fx-app-cart .fx-cart-h{margin:0 0 6px;font-size:17px;font-weight:600;color:var(--fx-navy)}
.fx-app-cart .show-cart .report-titles-and-cart{padding:24px!important;margin-bottom:16px!important}
/* --- Account & preferences --- */
.fx-app-account .title-password{margin:0 0 16px;font-size:24px;font-weight:600;color:var(--fx-navy);text-align:center}
.fx-app-account .card{padding:40px!important}
.fx-app-account .card label{font-weight:600;color:#1a1a2e}
.fx-app-account .login-username,.fx-app-account .login-password{margin:0 0 8px}
.fx-app-account .login-username label[for],.fx-app-account .login-password label[for]{display:block;margin-bottom:6px}
.fx-app-account .login-username label[for=show-password]{display:inline;font-weight:400}
.fx-app-account #show-password{margin-top:12px}
.fx-app-account .important-note-text{gap:6px;align-items:flex-start;color:var(--fx-body);font-size:14px}
.fx-app-account .important-note-text p{margin:0;font-weight:600}
.fx-app-account .login-submit{margin-top:8px}
.fx-app-account .success-alert-message,.fx-app-account .unsuccess-alert-message{margin:0;padding:14px;border-radius:8px;background:var(--fx-teal);color:#fff;font-weight:600;text-align:center}
.fx-app-account .unsuccess-alert-message{background:var(--fx-navy)}
.fx-app-account .results-locks-checkbox-container{margin:10px 0}
.fx-app-account .results-locks-checkbox-container label{font-weight:500}
.fx-app-account #result-output{margin-top:8px;color:var(--fx-navy);font-weight:600;text-align:center}
.fx-app-account .login-button{margin-top:24px!important}
@media (max-width:640px){.fx-app-account .card{padding:24px!important}}
/* --- Pricing --- */
.fx-app-pricing #toggles{margin-top:48px!important}
.fx-app-pricing .tabs_wrap_4{margin:0}
.fx-app-pricing .tabs_4,.fx-app-pricing .tabs_5,.fx-app-pricing .tabs_months{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:0 0 20px;padding:4px;list-style:none;border:1px solid #cdd7e3;border-radius:999px;background:#fff}
.fx-app-pricing .pricingtab{padding:8px 20px;border-radius:999px;color:var(--fx-navy);font-size:14px;font-weight:600;line-height:1.3;cursor:pointer}
.fx-app-pricing .pricingtab:hover{background:#edf3f9}
.fx-app-pricing .activeToggle,.fx-app-pricing .activeToggle:hover{background:var(--fx-navy);color:#fff!important}
.fx-app-pricing .col-md-11.text-right{max-width:1180px;margin:0 auto 32px!important;padding:0 32px}
.fx-app-pricing div.select{display:inline-block}
.fx-app-pricing #currency-type{width:auto;min-width:150px}
.fx-app-pricing .plan-box{margin-bottom:28px}
.fx-app-pricing .top-package-header::before,.fx-app-pricing .not-popular::before{content:'';display:block;width:max-content;height:26px;margin:0 auto;padding:4px 14px;border-radius:8px 8px 0 0;font-size:13px;font-weight:600;line-height:18px}
.fx-app-pricing .top-package-header::before{content:'Most Popular';background:#1381c5;color:#fff}
.fx-app-pricing .package-style{padding:24px 22px 26px;border:1px solid var(--fx-line);border-bottom:0;border-radius:14px 14px 0 0;background:#fff}
.fx-app-pricing .top-package-header .package-style,.fx-app-pricing .top-package-header .package-details{border-color:#1381c5}
.fx-app-pricing .package-header{margin:0 0 4px;font-size:24px;font-weight:700}
.fx-app-pricing .package-subheading small{color:var(--fx-body);font-size:13px;font-weight:500}
.fx-app-pricing .price{margin:0;font-size:15px}
.fx-app-pricing .package-pricing-heading [type=small]{font-size:14px;color:var(--fx-body)}
.fx-app-pricing .starter-standard-advanced-button,.fx-app-pricing .premium-enterprise-button{width:100%;border-color:transparent!important;border-radius:8px;color:#fff!important}
.fx-app-pricing .package-details{padding:8px 16px 18px!important;border:1px solid var(--fx-line);border-top:1px solid #edf1f5;border-radius:0 0 14px 14px;background:#fff}
.fx-app-pricing .package-details ul{margin:0;padding:0;list-style:none}
.fx-app-pricing .package-details li.p-3{padding:8px 2px!important;border-bottom:1px solid #f0f3f6}
.fx-app-pricing .package-details li:last-child{border-bottom:0}
.fx-app-pricing .package-details p{margin:0;font-size:15px;align-items:center;gap:4px}
.fx-app-pricing .package-details select{width:auto;min-height:34px;padding:4px 8px;font-size:14px}
.fx-app-pricing .fa-eye{margin-left:6px;color:var(--fx-navy)}
.fx-app-pricing .section.bg-white{max-width:1180px;margin:0 auto;padding:64px 32px}
.fx-app-pricing .flex-wrap{gap:12px}
.fx-app-pricing .flex-wrap img{width:150px;height:56px;object-fit:contain}
.fx-app-pricing .faqHeading{margin:0;font-size:32px;font-weight:700;line-height:1.2;color:var(--fx-navy);border:0}
.fx-app-pricing .heading-style{display:block;padding:16px 18px!important;border-radius:10px;background:#f5f8fb;color:#1a1a2e;font-weight:600;cursor:pointer}
.fx-app-pricing .heading-style p{margin:0}
.fx-app-pricing .heading-style .fa-angle-down{margin-left:12px;color:var(--fx-navy);transition:transform .2s}
.fx-app-pricing .heading-style:not(.collapsed) .fa-angle-down{transform:rotate(180deg)}
.fx-app-pricing .collapse-box{margin-top:-6px;border-radius:0 0 10px 10px;background:#f5f8fb;color:var(--fx-body)}
@media (max-width:640px){.fx-app-pricing .pricingtab{padding:8px 12px;font-size:13px}.fx-app-pricing .section.bg-white,.fx-app-pricing .col-md-11.text-right{padding-left:20px;padding-right:20px}.fx-app-pricing .faqHeading{font-size:26px;margin-bottom:16px}}
/* --- Tutorials & events --- */
.fx-page .fx-tuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.fx-page .fx-tut{display:flex;flex-direction:column;align-items:center;gap:18px;padding:28px;border:1px solid var(--fx-line);border-radius:14px;background:#fff;text-align:center;text-decoration:none;box-shadow:0 10px 30px rgba(15,35,71,.06);transition:transform .15s,box-shadow .15s}
.fx-page .fx-tut:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(15,35,71,.12)}
.fx-page .fx-tut h2{margin:0;font-size:22px;color:var(--fx-navy)}
.fx-page .fx-tut-img img{display:block;width:100%;height:auto;border-radius:8px}
.fx-page .fx-tut:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 16px)}
.fx-page .fx-login-box{max-width:620px;margin:0 auto;padding:48px 32px;border:1px solid var(--fx-line);border-radius:14px;background:#fff;text-align:center;box-shadow:0 10px 30px rgba(15,35,71,.06)}
.fx-page .fx-login-box p{margin:0 0 24px;font-size:20px;color:#1a1a2e}
.fx-page .fx-events{display:grid;gap:24px;max-width:960px;margin:0 auto}
.fx-page .fx-event{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden;border:1px solid var(--fx-line);border-radius:14px;background:#fff;box-shadow:0 10px 30px rgba(15,35,71,.06)}
.fx-page .fx-event-img img{display:block;width:100%;height:100%;min-height:220px;object-fit:cover}
.fx-page .fx-event-body{display:flex;flex-direction:column;justify-content:center;padding:28px 32px}
.fx-page .fx-event-date{margin:0 0 8px;color:#1a8bc0;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.fx-page .fx-event h3{margin:0;font-size:20px;line-height:1.35}
.fx-page .fx-event h3 a{color:var(--fx-navy);text-decoration:none}
.fx-page .fx-event h3 a:hover{color:#0A75A8;text-decoration:underline}
@media (max-width:767px){.fx-page .fx-tuts{grid-template-columns:minmax(0,1fr)}.fx-page .fx-tut:last-child:nth-child(odd){width:100%}.fx-page .fx-event{grid-template-columns:minmax(0,1fr)}.fx-page .fx-event-img img{min-height:0;aspect-ratio:16/9}}
.fx-app-regions .asia-pacific-button{background:rgb(137,165,78)!important}
.fx-app-regions .europe-middle-button{background:rgb(170,70,68)!important}
.fx-app-regions .north-america-button{background:rgb(113,88,143)!important}
.fx-app-regions .south-america-button{background:rgb(66,152,176)!important}
.fx-app-regions .regions-background p:has(+ .fa-asterisk){display:inline-block!important}
.fx-app-regions .regions-background .fa-asterisk{margin-left:4px;font-size:8px;vertical-align:super}
.fx-app-pricing .package-details p{flex-wrap:wrap}
.fx-app-pricing .package-details select{max-width:150px}
/* --- Dashboard tiles --- */
.fx-app-dash .sec-trend{padding:40px 0 24px}
.fx-app-dash .tile.is-ancestor{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px}
.fx-app-dash .tile.is-parent{flex:1 1 200px;min-width:0}
.fx-app-dash .tile.is-parent.column.is-3{flex:0 0 calc(25% - 12px);max-width:calc(25% - 12px)}
.fx-app-dash .tile.is-child.box{display:flex;align-items:center;justify-content:center;height:100%;min-height:110px;padding:22px 18px;border:0;border-radius:14px;background:var(--fx-navy);box-shadow:0 10px 26px rgba(15,35,71,.14);text-align:center;text-decoration:none;transition:transform .15s,background .15s}
.fx-app-dash a.tile.is-child.box:hover{transform:translateY(-3px);background:#244b88}
.fx-app-dash .dashboard-tile-title{margin:0!important;color:#fff;font-size:18px!important;font-weight:600;line-height:1.3}
.fx-app-dash .dashboard-category-insight,.fx-app-dash .dashboard-report-builder{background:#1381c5}
.fx-app-dash .dashboard-packaging-insight,.fx-app-dash .dashboard-consumer-data{background:#0f6e8c}
.fx-app-dash .dashboard-healthy-ageing,.fx-app-dash .dashboard-taste-and-nutrition{background:#1B3A6B}
.fx-app-dash .dashboard-medical-nutrition,.fx-app-dash .dashboard-pet-care,.fx-app-dash .dashboard-shopper-insight{background:#244b88}
.fx-app-dash .dashboard-locked{background:#eef1f5!important;box-shadow:none}
.fx-app-dash .dashboard-locked .dashboard-tile-title{color:#7a8699}
.fx-app-dash .dashboard-locked .icon{margin-right:6px}
@media (max-width:900px){.fx-app-dash .tile.is-parent.column.is-3{flex:0 0 calc(50% - 8px);max-width:calc(50% - 8px)}}
@media (max-width:560px){.fx-app-dash .tile.is-parent,.fx-app-dash .tile.is-parent.column.is-3{flex:0 0 100%;max-width:100%}}
/* --- Alerts (5-step form) --- */
.fx-app-alerts #group article{display:none}
.fx-app-alerts #group article.current{display:block;padding:40px 32px!important;border:1px solid var(--fx-line);border-top:4px solid var(--fx-teal);border-radius:14px;background:#fff;box-shadow:0 10px 30px rgba(15,35,71,.06)}
.fx-app-alerts .alert-page-questions{margin:0 auto 24px;max-width:820px;font-size:20px!important;font-weight:600;line-height:1.45;color:var(--fx-navy)}
.fx-app-alerts p.button.is-info,.fx-app-alerts button.button.is-info{margin:6px;min-height:42px;padding:8px 16px;border:1px solid #cdd7e3;background:#f5f8fb;color:var(--fx-navy);font-weight:600;cursor:pointer}
.fx-app-alerts p.button.is-info:hover,.fx-app-alerts button.button.is-info:hover{border-color:var(--fx-teal);background:#eaf6fc}
.fx-app-alerts .label-for-checkboxes{margin:0 0 0 4px;cursor:pointer}
.fx-app-alerts input[type=checkbox]{margin:0 6px 0 0}
.fx-app-alerts .modal-body{text-align:left}
.fx-app-alerts .modal-body .checkbox-grid,.fx-app-alerts .modal-body p{margin-bottom:6px}
.fx-app-alerts #next,.fx-app-alerts #prev,.fx-app-alerts #submitalerts{margin:24px 0!important;background:var(--fx-teal);border-color:var(--fx-teal);color:#fff}
.fx-app-alerts #submitalerts{background:var(--fx-navy)!important;border-color:var(--fx-navy)}
.fx-app-alerts #group+.container::after,.fx-app-alerts #alertsform .container:last-child::after{content:"";display:table;clear:both}
.fx-app-alerts textarea{width:100%;min-height:160px;padding:12px;border:1px solid #d9e0e8;border-radius:8px;font-family:inherit;font-size:15px}
.fx-app-alerts .alert-page-previous-results{margin:0 0 12px;font-size:18px;color:var(--fx-navy)}
.fx-app-alerts .btn-unsubscribe{margin:6px 8px 6px 0}
.fx-app-alerts .success-alert-message{margin:0 auto 20px;max-width:640px;font-size:17px;line-height:1.6;color:#2b3445}
@media (max-width:640px){.fx-app-alerts #group article.current{padding:28px 16px!important}.fx-app-alerts .alert-page-questions{font-size:17px!important}}
/* --- Clip libraries --- */
.fx-app-clip .section{padding-top:48px}
.fx-app-clip .title.is-4{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:22px}
.fx-app-clip #clip_pdf_preview_wrapper>.field{display:flex;flex-wrap:wrap;gap:8px}
.fx-app-clip #clip_pdf_preview_wrapper>.field .is-pulled-right{float:none;margin-left:auto}
.fx-app-clip canvas{display:block;border-radius:8px}
.fx-app-clip #clip_pdf_preview_wrapper>div[style*="whitesmoke"]{padding:20px!important;border:1px solid var(--fx-line)!important;border-radius:14px!important;background:#f5f8fb!important}
.fx-app-clip #clip_pdf_preview_wrapper ul{margin:12px 0;padding:0;list-style:none}
.fx-app-clip #selection-theme-options{align-items:center;gap:10px;flex-wrap:wrap}
.fx-app-clip #selection-theme-options select{width:auto;min-width:200px}
.fx-app-clip #upload-theme-file input[type=submit]{min-height:40px;padding:8px 18px;border:0;border-radius:6px;background:var(--fx-navy);color:#fff;font-weight:600;cursor:pointer}
.fx-app-clip .fa-plus-circle{font-size:22px;color:var(--fx-teal)}
.fx-app-clip-xls #clip_xls_clip_button{display:none}
.fx-app-clip-xls #clip_xls_clip_delete_all{float:none;margin:0 0 16px auto!important;display:flex}
.fx-app-clip-xls form{margin:24px 0}
.fx-page .fx-hero .fx-btn-ghost{color:#fff;border-color:rgba(255,255,255,.6);background:transparent}
.fx-app-dash .dashboard-locked{box-shadow:none!important}
/* ===== end BLOG + WEBINARS ===== */

/* ============================================================
   SITE TYPE SCALE v2 — one size per element on every new page
   (Oct 2026; reference = new home page + Rooban's Inter weights)
   ------------------------------------------------------------
                         desktop   tablet(<=900)  phone(<=480)
   H1  (page title) ..... 42/1.14/700   34            30
   H2  (section title) .. 32/1.20/600   26            26
   H3  (sub / card) ..... 20/1.30/600   18            18
   Lead p (under H1/H2) . 18/1.60/400   17            17
   Body p (cards) ....... 16/1.60/400   16            16
   Eyebrow label ........ 14 / 700 / 1.8px / uppercase
   Buttons .............. 16 / 600
   Kept on purpose: form-card titles (22px), small card tags,
   mock-UI text inside product screenshots, product colours.
   To undo: delete this whole block. Backup: style-backup-before-type-scale-v2.css
   ============================================================ */

/* ---------- H1 ---------- */
html body .fh-hero .fh-hero-title,
html body .fh-ab-hero .fh-ab-hero-title,
html body .sr-hero h1,
html body .snx h1,
html body .rx-page h1,
html body .ci-page h1,
html body .fg-ce-page h1,
html body .cr-page h1,
html body .bd-page h1,
html body .nl-page h1,
html body .dx h1,
html body .ct-page h1,
html body .me-hero-title,
html body .lg-hero-title{font-size:42px!important;line-height:1.14!important;font-weight:700!important;letter-spacing:-.5px!important}

/* ---------- H2 ---------- */
html body .fh-home .fh-insights-title,
html body .fh-home .fh-trusted-title,
html body .fh-home .fh-ai-title,
html body .fh-home .fh-help-title,
html body .ab-page h2,
html body .sr-container > h2, html body .sr-intro h2, html body .sr-together h2, html body .sr-close h2,
html body .snx h2, html body .snx .sn-h2-ex, html body .snx .stc-x10.stc-x10.stc-x10,
html body .rx-page h2,
html body .ci-page h2,
html body .fg-ce-page h2,
html body .cr-page h2,
html body .dx h2,
html body .ct-page h2,
html body .me-intro-title, html body .me-intro-h2, html body .me-cta-h2{font-size:32px!important;line-height:1.2!important;font-weight:600!important;letter-spacing:-.6px!important}
/* form-card titles stay smaller */
html body :is(.bd-page,.nl-page,.ct-page) :is(.form-card,.nl-card) h2,
html body .sr-close-f h2,
html body .lg-login-card h2{font-size:22px!important;line-height:1.25!important;font-weight:600!important;letter-spacing:-.3px!important}
/* home featured card title is an H2 tag: keep card size, Inter 600 */
html body .fh-home .rs-feat-h2{font-size:24px!important;font-weight:600!important}

/* ---------- H3 ---------- */
html body .fh-home .fh-ai-card-title,
html body .ab-page h3,
html body .sr-journey-card h3,
html body .snx h3,
html body .ci-page h3,
html body .fg-ce-page h3,
html body .cr-page h3,
html body .dx h3{font-size:20px!important;line-height:1.3!important;font-weight:600!important;letter-spacing:0!important}
/* small card titles inside the home AI cards and DEE mock card stay 16–18 */
html body .fh-home .fh-dee-compact-header-title{font-weight:600!important}

/* ---------- Lead paragraph (directly under H1 / H2) ---------- */
html body .fh-home .fh-insights-lead,
html body .fh-home .fh-trusted-sub,
html body .fh-home .fh-ai-intro,
html body .fh-home .fh-help-sub,
html body .fh-ab-hero .fh-ab-hero-sub,
html body .ab-page .ab-lead, html body .ab-page .ab-big,
html body .sr-hero p, html body .sr-lead, html body .sr-close-lead,
html body .snx .sx-hero-copy > p, html body .snx .sx-lead, html body .snx .sn-examples-lead, html body .snx .stc-x11.stc-x11.stc-x11, html body .snx .sx-cta-copy p,
html body .rx-page .rx-lead, html body .rx-page .rx-wrap > p, html body .rx-page .rx-feat-txt p,
html body .ci-page .ci-sub, html body .ci-page .ci-p,
html body .fg-ce-page .fg-ce-sub, html body .fg-ce-page .fg-ce-band-in p, html body .fg-ce-page .fg-ce-demo-intro,
html body .cr-page .cr-hero-copy p, html body .cr-page .cr-lead,
html body .bd-page .bd-lead,
html body .nl-page .nl-lead,
html body .dx .dx-lead, html body .dx .dx-cta-copy p,
html body .ct-page .ct-intro p,
html body .me-intro-text,
html body .lg-hero-sub{font-size:18px!important;line-height:1.6!important;font-weight:400!important}

/* ---------- Body paragraph (cards, under H3) ---------- */
html body .fh-home .fh-ai-card-sub,
html body .sr-journey-card p,
html body .snx h3 ~ p,
html body .ci-page h3 ~ p,
html body .fg-ce-page h3 ~ p,
html body .cr-page .cr-when-card p, html body .cr-page .cr-pv-body p,
html body .dx .dx-for-grid p,
html body .me-nc-desc, html body .me-ev-desc{font-size:16px!important;line-height:1.6!important}

/* ---------- Eyebrow labels (colour unchanged) ---------- */
html body .fh-home .fh-hero-eyebrow, html body .fh-home .fh-insights-eyebrow, html body .fh-home .fh-trusted-label, html body .fh-home .fh-ai-eyebrow, html body .fh-home .fh-help-eyebrow,
html body .fh-ab-hero .fh-ab-hero-eyebrow,
html body .sr-hero .sr-eyebrow, html body .sr-kicker,
html body .snx .sx-eb,
html body .rx-page .rx-eb,
html body .ci-page .ci-eb,
html body .fg-ce-eyebrow,
html body .cr-page .cr-eyebrow, html body .cr-page .cr-kicker,
html body .bd-page .bd-eyebrow, html body .bd-page .bd-label,
html body .nl-page .nl-eb,
html body .dx .dx-eb,
html body .ct-page .ct-eyebrow,
html body .me-hero-eyebrow, html body .me-eyebrow, html body .me-label, html body .me-sec-label,
html body .lg-hero-eyebrow{font-size:14px!important;font-weight:700!important;letter-spacing:1.8px!important;text-transform:uppercase!important;line-height:1.3!important}

/* ---------- Buttons: Inter 600 (Rooban) ---------- */
html body .sr-btn, html body .cr-page .cr-btn, html body .cr-btn, html body .lg-login-btn{font-weight:600!important}

/* ---------- Tablet + phone ---------- */
@media (max-width:900px){
  html body .fh-hero .fh-hero-title, html body .fh-ab-hero .fh-ab-hero-title, html body .sr-hero h1, html body .snx h1,
  html body .rx-page h1, html body .ci-page h1, html body .fg-ce-page h1, html body .cr-page h1, html body .bd-page h1,
  html body .nl-page h1, html body .dx h1, html body .ct-page h1, html body .me-hero-title, html body .lg-hero-title{font-size:34px!important}
  html body .fh-home .fh-insights-title, html body .fh-home .fh-trusted-title, html body .fh-home .fh-ai-title, html body .fh-home .fh-help-title,
  html body .ab-page h2, html body .sr-container > h2, html body .sr-intro h2, html body .sr-together h2, html body .sr-close h2,
  html body .snx h2, html body .snx .sn-h2-ex, html body .snx .stc-x10.stc-x10.stc-x10, html body .rx-page h2, html body .ci-page h2,
  html body .fg-ce-page h2, html body .cr-page h2, html body .dx h2, html body .ct-page h2,
  html body .me-intro-title, html body .me-intro-h2, html body .me-cta-h2{font-size:26px!important}
  html body :is(.bd-page,.nl-page,.ct-page) :is(.form-card,.nl-card) h2, html body .sr-close-f h2, html body .lg-login-card h2{font-size:22px!important}
  html body .fh-home .fh-ai-card-title, html body .ab-page h3, html body .sr-journey-card h3, html body .snx h3, html body .ci-page h3,
  html body .fg-ce-page h3, html body .cr-page h3, html body .dx h3{font-size:18px!important}
  html body .fh-home .fh-insights-lead, html body .fh-home .fh-trusted-sub, html body .fh-home .fh-ai-intro, html body .fh-home .fh-help-sub,
  html body .fh-ab-hero .fh-ab-hero-sub, html body .ab-page .ab-lead, html body .ab-page .ab-big,
  html body .sr-hero p, html body .sr-lead, html body .sr-close-lead,
  html body .snx .sx-hero-copy > p, html body .snx .sx-lead, html body .snx .sn-examples-lead, html body .snx .stc-x11.stc-x11.stc-x11, html body .snx .sx-cta-copy p,
  html body .rx-page .rx-lead, html body .ci-page .ci-sub, html body .ci-page .ci-p,
  html body .fg-ce-page .fg-ce-sub, html body .fg-ce-page .fg-ce-band-in p, html body .fg-ce-page .fg-ce-demo-intro,
  html body .cr-page .cr-hero-copy p, html body .cr-page .cr-lead, html body .bd-page .bd-lead, html body .nl-page .nl-lead,
  html body .dx .dx-lead, html body .dx .dx-cta-copy p, html body .ct-page .ct-intro p, html body .me-intro-text, html body .lg-hero-sub{font-size:17px!important}
}
@media (max-width:480px){
  html body .fh-hero .fh-hero-title, html body .fh-ab-hero .fh-ab-hero-title, html body .sr-hero h1, html body .snx h1,
  html body .rx-page h1, html body .ci-page h1, html body .fg-ce-page h1, html body .cr-page h1, html body .bd-page h1,
  html body .nl-page h1, html body .dx h1, html body .ct-page h1, html body .me-hero-title, html body .lg-hero-title{font-size:30px!important}
}
/* ===== end SITE TYPE SCALE v2 ===== */

/* ============================================================
   SITE WIDTH + INTER  (Rooban, Oct 2026) — keep this block LAST
   ------------------------------------------------------------
   1) One content width on every new page:
        max-width 1180px, centred, 32px side padding
        (text edge = 32px inside the 1180px box).
      Backgrounds, photos and colour bands stay full width;
      only the content inside them is held in the centre.
      Applied from 1025px wide, so tablet and phone layouts are unchanged.
   2) Inter everywhere (loaded by base_fmcg.twig; see the top of this file).
   Backup of the file before this change: style-backup-before-width-inter.css
   ============================================================ */

:root{
  --fg-max:1180px;   /* content box, padding included */
  --fg-gut:32px;     /* side padding inside the box   */
}

/* ---------- 2) INTER: body, controls and headings ---------- */
html body{font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif}
html body :is(button,input,select,textarea,optgroup){font-family:inherit}
html body :is(h1,h2,h3,h4,h5,h6,p,a,li,label,blockquote,figcaption,td,th,small,strong,b,em){font-family:inherit}
html body :is(h2,h3){font-weight:600}                    /* H2 / H3: Inter 600 */
html body .nav-links a{font-weight:500}                  /* navigation: Inter 500 */
html body .nav-cta{font-weight:600}                      /* nav button: Inter 600 */
html body .nav-logo{font-weight:600}

@media (min-width:1025px){

  /* ---------- Page containers: one rule for all new pages ---------- */
  html body .fg-ce-wrap,                       /* Commercial Engine      */
  html body .cr-container,                     /* Custom Research        */
  html body .cr-page .cr-container,
  html body .sr-container,                     /* Solutions              */
  html body .de-container,
  html body .dx .dx-wrap,                      /* DEE                    */
  html body .snx .sx-wrap,                     /* Sensia                 */
  html body .ab-page .ab-in,                   /* About                  */
  html body .ci-page .ci-wrap,                 /* Consumer Intelligence  */
  html body .ct-page .ct-wrap,                 /* Contact                */
  html body .bd-page .bd-wrap,                 /* Book a Demo            */
  html body .fg-rsp-wrap,                      /* Single report pages    */
  html body .fg-rsp-v3 .fg-rsp-wrap,
  html body .fgtb-container{                   /* Homepage logos band    */
    width:100%;
    max-width:var(--fg-max);
    margin-left:auto;
    margin-right:auto;
    padding-left:var(--fg-gut);
    padding-right:var(--fg-gut);
    box-sizing:border-box;
  }

  /* Content-only boxes that sit inside an already padded section:
     1180 minus the two 32px gutters = 1116px, so their text lines up too */
  html body .snx .sn-container,
  html body .snx .stc-x08.stc-x08.stc-x08{max-width:calc(var(--fg-max) - 2 * var(--fg-gut)) !important}
  html body .rs-container,
  html body .rs-tabs-inner,
  html body .rs-cta-grid,
  html body .rs-cta-inner,
  html body .rs-upsell-inner,
  html body .me-container,
  html body .me-hero-inner,
  html body .me-proof-inner,
  html body .me-section-inner,
  html body .me-cta-inner{max-width:calc(var(--fg-max) - 2 * var(--fg-gut))}

  /* ---------- Homepage ---------- */
  /* Shared text edge for the homepage sections (was based on 1192px / 44px) */
  :is(.fh-home, main:has(> .fh-hero)){
    --fh-edge:max(56px, calc((100% - var(--fg-max)) / 2 + var(--fg-gut)));
    --fh-box-out:var(--fg-gut);
  }
  /* Hero: black band stays full width, text + image sit in the 1180px box */
  html body .fh-hero{
    padding-left:max(24px, calc((100% - var(--fg-max)) / 2));
    padding-right:max(24px, calc((100% - var(--fg-max)) / 2));
  }
  html body .fh-hero .fh-hero-content{padding-left:var(--fg-gut);padding-right:var(--fg-gut)}
  /* Stats strip */
  html body .fh-cred{
    padding-left:var(--fh-edge, max(var(--fg-gut), calc((100% - var(--fg-max)) / 2 + var(--fg-gut)))) !important;
    padding-right:var(--fh-edge, max(var(--fg-gut), calc((100% - var(--fg-max)) / 2 + var(--fg-gut)))) !important;
  }
  /* Trends card + client quotes box: the 1180px box itself */
  html body .fh-trends-card .trends-banner{max-width:var(--fg-max)}

  /* ---------- About: video hero ---------- */
  html body .fh-ab-hero .fh-ab-hero-content{
    margin-left:max(0px, calc((100% - var(--fg-max)) / 2));
    padding-left:var(--fg-gut);
    padding-right:var(--fg-gut);
    max-width:616px;
  }
  html body .fh-ab-vctrl{right:max(24px, calc((100% - var(--fg-max)) / 2 + var(--fg-gut)))}

  /* ---------- Solutions: hero text starts on the same edge ---------- */
  html body .sr-hero .sr-container.sr-hero-inner{max-width:var(--fg-max)}
  html body .sr-hero .sr-hero-inner > *{max-width:786px}

  /* ---------- Commercial Engine: demo form beside the photo ---------- */
  /* photo stays full bleed on the left; the form's right edge stops at the 1180px box */
  html body .fg-ce-demo .fg-ce-demo-form{
    padding-right:max(64px, calc(100% - var(--fg-max) / 2 + var(--fg-gut)));
  }
}
/* ===== end SITE WIDTH + INTER ===== */

/* ============================================================
   CLIENTS PAGE — v2 (Rooban, clients-page-v2, Oct 2026)
   Template: clients twig. Every class starts with cl- and sits inside .cl-page,
   so nothing here touches other pages. Container 1180px / 32px, Inter.
   ============================================================ */
.cl-page{--cl-navy:#1B3A6B;--cl-deep:#0f2347;--cl-teal:#29A8E0;--cl-teal-dk:#13719c;--cl-body:#55657e;--cl-line:#e3e7ec;display:block;background:#fff;color:#1a1a2e;font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif}
.cl-page *,.cl-page *:before,.cl-page *:after{box-sizing:border-box}
.cl-page .cl-in{position:relative;width:100%;max-width:1180px;margin:0 auto;padding:0 32px}
.cl-page .cl-eb{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.14em;line-height:1.4;text-transform:uppercase;color:var(--cl-teal)}
.cl-page .cl-eb-dark{color:var(--cl-teal-dk)}
.cl-page h1{max-width:620px;margin:0 0 18px;font-size:44px;font-weight:700;line-height:1.15;letter-spacing:-.5px;color:#fff}
.cl-page h2{margin:0 0 14px;font-size:32px;font-weight:600;line-height:1.2;letter-spacing:-.6px;color:var(--cl-navy)}
.cl-page p{margin:0;font-size:17px;line-height:1.65;color:var(--cl-body)}

/* photo bands (banner + demo): real <img> behind a navy fade */
.cl-page .cl-hero,.cl-page .cl-demo{position:relative;display:flex;align-items:center;overflow:hidden;background:var(--cl-deep);color:#fff}
.cl-page .cl-hero{min-height:560px}
.cl-page .cl-demo{min-height:520px}
.cl-page .cl-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.cl-page .cl-bg-hero{object-position:70% 35%}
.cl-page .cl-bg-demo{object-position:right center}
.cl-page .cl-hero:before,.cl-page .cl-demo:before{content:"";position:absolute;inset:0;z-index:1}
.cl-page .cl-hero:before{background:linear-gradient(90deg,rgba(15,35,71,.94) 0%,rgba(15,35,71,.82) 42%,rgba(15,35,71,.2) 80%)}
.cl-page .cl-demo:before{background:linear-gradient(90deg,rgba(15,35,71,.95) 0%,rgba(15,35,71,.85) 40%,rgba(15,35,71,.15) 78%)}
.cl-page .cl-hero .cl-in,.cl-page .cl-demo .cl-in{z-index:2}
.cl-page .cl-lead{max-width:540px;color:#dbe4f3}
.cl-page .cl-demo h2{max-width:520px;font-size:36px;color:#fff}
.cl-page .cl-demo .cl-lead{max-width:480px;margin-bottom:28px}
.cl-page .cl-btn{display:inline-block;padding:14px 26px;border-radius:6px;background:var(--cl-teal);color:#fff;font-size:16px;font-weight:600;line-height:1.2;text-decoration:none;transition:background .15s}
.cl-page .cl-btn:hover,.cl-page .cl-btn:focus{background:#1f93c7;color:#fff;text-decoration:none}

/* client quotes: 3 staggered columns */
.cl-page .cl-sec{padding:88px 0;background:#f5f6f8}
.cl-page .cl-head{max-width:680px;margin-bottom:40px}
.cl-page .cl-stag{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.cl-page .cl-col{display:flex;flex-direction:column;gap:24px}
.cl-page .cl-col-2{margin-top:64px}
.cl-page .cl-col-3{margin-top:28px}
.cl-page .cl-q{margin:0;padding:28px;border-radius:14px;background:#fff;box-shadow:0 14px 36px rgba(15,35,71,.08)}
.cl-page .cl-co{display:block;margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--cl-line);font-size:17px;font-weight:700;line-height:1.3;color:var(--cl-navy)}
.cl-page .cl-q blockquote{margin:0;padding:0;border:0;font-size:16px;line-height:1.6;font-style:normal;color:var(--cl-body)}

/* tablet + phone */
@media(max-width:900px){
  .cl-page h1{font-size:32px}
  .cl-page h2{font-size:28px}
  .cl-page .cl-demo h2{font-size:28px}
  .cl-page .cl-stag{grid-template-columns:1fr}
  .cl-page .cl-col-2,.cl-page .cl-col-3{margin-top:0}
  .cl-page .cl-hero,.cl-page .cl-demo{min-height:440px}
  .cl-page .cl-sec{padding:64px 0}
  /* text runs full width on small screens, so the fade covers the whole photo */
  .cl-page .cl-hero:before{background:linear-gradient(90deg,rgba(15,35,71,.92) 0%,rgba(15,35,71,.78) 100%)}
  .cl-page .cl-demo:before{background:linear-gradient(90deg,rgba(15,35,71,.94) 0%,rgba(15,35,71,.8) 100%)}
}
@media(max-width:600px){
  .cl-page .cl-in{padding:0 20px}
  .cl-page h1{font-size:30px}
  .cl-page .cl-hero,.cl-page .cl-demo{min-height:0;padding:72px 0}
  .cl-page .cl-q{padding:24px}
}
@media(min-width:601px) and (max-width:900px){
  /* tablet: two columns of quotes instead of one long list */
  .cl-page .cl-stag{grid-template-columns:repeat(2,1fr);align-items:stretch}
  .cl-page .cl-col{display:contents}
}
/* ===== end CLIENTS PAGE — v2 ===== */

/* ============================================================
   ACCESSIBILITY CONTRAST (PageSpeed, Oct 2026)
   Text that failed the 4.5:1 contrast check. Cyan buttons keep their cyan
   background and get dark navy text; light-blue labels/links are one shade darker.
   ============================================================ */
body .btn-primary,body .btn-primary:hover,body .btn-primary:focus,
body .fh-btn-cyan,body .fh-btn-cyan:hover,body .fh-btn-cyan:focus,
body .fh-btn-cyan-lg,body .fh-btn-cyan-lg:hover,body .fh-btn-cyan-lg:focus{color:#0b1f3a}
body .fh-insights .fh-insights-eyebrow,body .fh-insights-eyebrow,
body .fh-ai-eyebrow,
body .fh-insights .rs-tag-light,body .rs-tag-light,
body .fh-insights .fh-mini-tag-1,body .fh-insights .fh-mini-tag-2,
body .fh-insights .fh-mini-tag-3,body .fh-insights .fh-mini-tag-4{color:#13719c}
body .rs-feat-card .rs-link,body .rs-link{color:#13719c}
/* nav "Book a Demo" button (every page): dark text on the same cyan */
html body .nav-links a.nav-cta,html body .nav-cta,html body .nav-links a.nav-cta:hover,html body .nav-cta:hover{color:#0b1f3a !important}
/* ===== end ACCESSIBILITY CONTRAST ===== */

/* ============================================================
   FORMS — one look for every Contact Form 7 form (Oct 2026)
   Contact, Book a Demo, Newsletter, Solutions ("Find out more") and Commercial Engine
   ("Book a Demo") forms. Same fields, spacing, button, error and success styles everywhere.
   Fields only turn red AFTER a submit attempt (CF7 adds .wpcf7-not-valid), never on load.
   Page accent for the button: --fm-btn / --fm-btn-h (navy by default).
   ============================================================ */
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form){--fm-btn:#1B3A6B;--fm-btn-h:#136f9a;--fm-line:#cfd7e2;--fm-ink:#1a1a2e;--fm-label:#1B3A6B;--fm-err:#b42318}
html body .fg-ce-demo .fg-ce-demo-form.fg-ce-demo-form{--fm-btn:#c4432a;--fm-btn-h:#a8381f}
html body .sr-close .sr-close-f.sr-close-f{--fm-btn:#1778a8;--fm-btn-h:#136f9a}

html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) .wpcf7{max-width:none}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) .wpcf7-form p:empty,
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) .wpcf7-form br{display:none}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) .wpcf7-form > p{margin:0}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) .form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 14px;margin:0}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) .form-group{display:flex;flex-direction:column;min-width:0;margin:0 0 16px}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) .form-group label{display:block;margin:0 0 7px;font-size:14px;font-weight:600;line-height:1.35;color:var(--fm-label)}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) .wpcf7-form-control-wrap{position:relative;display:block}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) :is(input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],select,textarea){
  display:block;width:100%!important;margin:0;padding:12px 14px;border:1px solid var(--fm-line);border-radius:6px;background-color:#fff;
  color:var(--fm-ink);font-family:inherit;font-size:16px;line-height:1.4;box-shadow:none;transition:border-color .15s,box-shadow .15s}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) select{padding-right:40px;-webkit-appearance:none;appearance:none;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231B3A6B' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) :is(input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],select){height:auto}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) :is(textarea,textarea.wpcf7-textarea){min-height:104px;height:104px;resize:vertical}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) :is(input,select,textarea)::placeholder{color:#7b8698;opacity:1}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) :is(input,select,textarea):focus{outline:none;border-color:#1778a8;box-shadow:0 0 0 3px rgba(23,120,168,.18)}
/* no red borders before the visitor has tried to submit (browser :invalid styling switched off) */
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) :is(input,select,textarea):invalid{box-shadow:none}
/* errors, after a submit attempt */
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) .wpcf7-not-valid{border-color:var(--fm-err)!important}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) .wpcf7-not-valid-tip{display:block;margin:6px 0 0;font-size:13px;line-height:1.4;color:var(--fm-err)}
/* button */
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) :is(.submit-btn,.wpcf7-submit,button[type=submit],input[type=submit]){
  display:block;width:100%!important;height:auto!important;margin:8px 0 0;padding:15px 18px;border:0;border-radius:6px;background:var(--fm-btn);color:#fff!important;
  font-family:inherit;font-size:16px;font-weight:600;line-height:1.2;text-align:center;cursor:pointer;transition:background .15s}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) :is(.submit-btn,.wpcf7-submit,button[type=submit],input[type=submit]):hover{background:var(--fm-btn-h)}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) :is(.submit-btn,.wpcf7-submit,button[type=submit]):focus-visible{outline:3px solid rgba(23,120,168,.45);outline-offset:2px}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) :is(.ajax-loader,.wpcf7-spinner){display:block;margin:10px auto 0}
/* legal line under the button */
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) .form-legal{margin:14px 0 0;font-size:13px;line-height:1.6;color:#5f6b7c;text-align:center}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) .form-legal a{color:#1B3A6B;text-decoration:underline}
/* message under the form (CF7 5.1: .wpcf7-validation-errors / .wpcf7-mail-sent-ok; newer CF7: form.invalid / form.sent) */
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) .wpcf7-response-output{margin:16px 0 0!important;padding:12px 14px!important;border:1px solid #d0d5dd!important;border-radius:6px;background:#f8fafc;font-size:14px;line-height:1.5;color:#1a1a2e}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) :is(.wpcf7-validation-errors,.wpcf7-acceptance-missing,.wpcf7-mail-sent-ng,.wpcf7-aborted,.wpcf7-spam-blocked),
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) form:is(.invalid,.failed,.aborted,.spam,.unaccepted) .wpcf7-response-output{border-color:#f4b8b2!important;background:#fef3f2;color:var(--fm-err)}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) .wpcf7-mail-sent-ok,
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) form.sent .wpcf7-response-output{border-color:#a6dcc3!important;background:#ecfdf3;color:#05603a}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) .wpcf7-display-none,
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) form.init .wpcf7-response-output:empty{display:none}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) .screen-reader-response{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* phone field with country flags (Book a Demo) */
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) .intl-tel-input{display:block;width:100%!important}
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) .intl-tel-input input[type=tel]{padding-left:52px}
/* success box (shown by the page script after a successful send) */
html body :is(.ct-page,.bd-page,.nl-page,.sr-close,.fg-ce-demo) .success-msg{display:none;margin:16px 0 0;padding:20px;border:1px solid #a6dcc3;border-radius:8px;background:#ecfdf3;text-align:center}
html body :is(.ct-page,.bd-page,.nl-page,.sr-close,.fg-ce-demo) .success-msg h3{margin:0 0 6px;font-size:17px;font-weight:600;color:#05603a}
html body :is(.ct-page,.bd-page,.nl-page,.sr-close,.fg-ce-demo) .success-msg p{margin:0;font-size:15px;line-height:1.5;color:#05603a}
@media(max-width:600px){
  html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) .form-row{grid-template-columns:minmax(0,1fr)}
}
/* ===== end FORMS ===== */

/* ============================================================
   ACCESSIBILITY CONTRAST v2 (Oct 2026, PageSpeed on all pages)
   Same colours, one or two shades darker where the text failed the 4.5:1 check.
   Light-blue text on white/grey -> #136f9a; light-blue buttons -> #1778a8 (white text);
   grey small text -> #5f6d82; orange labels -> #bf3f26; yellow label -> #8a5f00.
   ============================================================ */
/* light-blue labels, small headings and text links on white / light grey */
html body :is(.ci-page .ci-sec,.ci-page .ci-seband,.ci-page .ci-teams) :is(.ci-eb,small),
html body .ci-page .ci-thead .ci-eb,
html body .cr-page :is(.cr-when,.cr-soft,.cr-flow) .cr-kicker,
html body .rx-page .rx-sec :is(.rx-more,.rx-feat-txt small,.rx-rep small,.rx-rep i,.rx-card-b small,.rx-card-b i),
html body .rx-page .rx-news-small a,
html body .sr-close .sr-kicker,html body .sr-intro .sr-kicker,html body .sr-together .sr-kicker,
html body .bd-page :is(.bd-eyebrow,.bd-label),html body .nl-page .nl-eb,html body .ct-page .ct-eyebrow,
html body .sn-examples .sx-ev-all,html body .snx .sx-ev-all,
html body .me-card-date,html body :is(.me-card-read,.me-card-read-sm){color:#136f9a!important}
html body .rx-page .rx-news-small a{text-decoration:underline}
html body .sr-bundle-note b{color:#136f9a}
/* light-blue buttons with white text */
html body :is(a.ab-btn,a.ci-btn:not(.ci-btn-ghost),.rx-page .rx-btn:not(.rx-btn-ghost),.rx-page button.rx-btn,a.cr-btn.cr-btn-blue,a.me-cta-btn,a.sr-btn.sr-btn-secondary,a.sr-btn.sr-btn-primary){background:#1778a8!important;border-color:#1778a8!important;color:#fff!important}
html body :is(a.ab-btn,a.ci-btn:not(.ci-btn-ghost),.rx-page .rx-btn:not(.rx-btn-ghost),.rx-page button.rx-btn,a.cr-btn.cr-btn-blue,a.me-cta-btn,a.sr-btn.sr-btn-secondary,a.sr-btn.sr-btn-primary):hover{background:#136f9a!important;border-color:#136f9a!important}
/* light-blue on navy (cover bands, "You are here") */
html body .rx-page .rx-cover-band em s,html body .ci-page .ci-plat-cell em,html body .snx .sx-ev-rp small,html body .snx small.sx-ev-ref{color:#5cc3f0}
/* grey small / meta text */
html body .rx-page .rx-rep span,html body .rx-page .rx-news-small{color:#5f6b7c}
html body .snx :is(.sx-ev-lock,.sx-ev-rp em,.sx-ev-foot),html body .snx figcaption{color:#5f6b7c}
html body .snx .sx-sup{color:#5f6b7c}
html body .dx .dee-mc-metric-lbl{color:#5f6b7c}
html body .dx .dee-mc-metric-sub,html body .dx .dee-mc-proof-src{color:#6b7280}
html body .dx .dx-role,html body .dx .dx-cap{color:#5f6d82}
html body .dx .dee-mc-head-sub{color:#9aa8bf}
html body .fg-ce-page .fg-ce-cap{color:#5f6d82}
html body .sr-mock-status{color:#aab7cb}
/* teal (Sensia) labels on white / grey */
html body .snx .sx-eb:not(.sx-hero .sx-eb):not(.sx-cta .sx-eb),html body .sn-examples .sn-eyb-muted,html body .sn-examples .sn-ex-tlabel{color:#007069!important}
/* yellow (DEE) labels on white / grey */
html body .dx :is(.dx-helps,.dx-for) .dx-eb{color:#8a5f00}
/* orange (Commercial Engine) labels on white / light grey, and the tabs */
html body .fg-ce-page :is(.fg-ce-tools,.fg-ce-intro,.fg-ce-demo) .fg-ce-eyebrow{color:#bf3f26}
html body .fg-ce-page .fg-ce-tab small{color:#b8431f}
html body .fg-ce-page .fg-ce-tab[aria-selected="false"]{color:#5f6d82}
html body .fg-ce-page .fg-ce-btn-o{background:#c4432a}
html body .fg-ce-page .fg-ce-btn-o:hover{background:#a8381f}
/* form legal text (all form pages) */
html body .form-legal{color:#5f6b7c}
html body .form-legal a{color:#1B3A6B}
/* ===== end ACCESSIBILITY CONTRAST v2 ===== */

/* ============================================================
   SITE FIXES (Oct 2026, PageSpeed on all pages)
   ============================================================ */
/* Footer logo: keep the logo's own shape (it is 2082x2149, not square) - fixes
   "Displays images with incorrect aspect ratio" on every page */
html body .fh-footer-logo-img{width:110px;height:auto;aspect-ratio:2082/2149;object-fit:contain}
/* Solutions: closing photo was wider than the phone screen (page scrolled sideways) */
@media(max-width:900px){
  html body .sr-close-ph{width:100%;height:280px;min-height:0;aspect-ratio:auto}
}
/* Solutions: "How the solutions work together" labels are now <p> (were <h5>) - same look */
html body .sr-journey-card p.sr-journey-no{display:block;margin:0 0 12px;font-size:15px;font-weight:700;line-height:1.6;color:#29A8E0}
html body .sr-together p.sr-need{margin:0 0 4px;font-size:15px;font-weight:700;line-height:1.6;color:#136f9a}
/* Sensia evidence card: sources column is a <div> now (was <aside>) - same look */
/* Sensia evidence card labels: were <h4>/<h5> (skipped a heading level), now <p> - same look */
html body .snx .sx-ev-ans p.sx-ev-h{margin:14px 0 6px!important;font-size:14.5px!important;font-weight:700!important;line-height:1.3!important;color:#1B3A6B!important}
html body .snx .sx-ev-glp p.sx-ev-h{margin:4px 0 6px!important;font-size:15px!important;color:#fff!important}
html body .snx .sx-ev-src p.sx-ev-sh{margin:0 0 12px!important;font-size:11px!important;font-weight:700!important;line-height:1.65!important;letter-spacing:.14em!important;text-transform:uppercase;color:#666!important}
html body .snx .sx-ev-src p.sx-ev-h5-2{margin-top:22px!important}
html body .snx .sx-sup,html body .snx .sx-steps .sx-sup{color:#5f6b7c!important}
html body .snx .sx-ev-q small{color:#5cc3f0!important}
html body .dx .dx-cap,html body .dx p.dx-cap{color:#5f6d82!important}
/* ===== end SITE FIXES ===== */

/* ============================================================
   SMALLER IMAGES (Oct 2026): background photos now load a resized WebP
   (with a JPG for older browsers). Files are in /static/img/.
   ============================================================ */
/* Solutions top banner (was solutions-top-banner.jpeg, 6000px / 1.3 MB) */
html body .sr-hero{
  background-image:linear-gradient(105deg,rgba(12,26,54,.96) 0%,rgba(12,26,54,.72) 55%,rgba(12,26,54,.55) 100%),url('/wp-content/themes/fmcg/static/img/solutions-top-banner-1600.jpg');
  background-image:linear-gradient(105deg,rgba(12,26,54,.96) 0%,rgba(12,26,54,.72) 55%,rgba(12,26,54,.55) 100%),image-set(url('/wp-content/themes/fmcg/static/img/solutions-top-banner-1600.webp') type('image/webp'),url('/wp-content/themes/fmcg/static/img/solutions-top-banner-1600.jpg') type('image/jpeg'))}
@media(max-width:700px){html body .sr-hero{
  background-image:linear-gradient(105deg,rgba(12,26,54,.96) 0%,rgba(12,26,54,.72) 55%,rgba(12,26,54,.55) 100%),url('/wp-content/themes/fmcg/static/img/solutions-top-banner-800.jpg');
  background-image:linear-gradient(105deg,rgba(12,26,54,.96) 0%,rgba(12,26,54,.72) 55%,rgba(12,26,54,.55) 100%),image-set(url('/wp-content/themes/fmcg/static/img/solutions-top-banner-800.webp') type('image/webp'),url('/wp-content/themes/fmcg/static/img/solutions-top-banner-800.jpg') type('image/jpeg'))}}
/* Commercial Engine hero */
html body .fg-ce-hero{background-image:image-set(url('/wp-content/themes/fmcg/static/img/commercial-engine-hero-1800.webp') type('image/webp'),url('/wp-content/themes/fmcg/static/img/commercial-engine-hero.jpg') type('image/jpeg'))}
@media(max-width:700px){html body .fg-ce-hero{background-image:url('/wp-content/themes/fmcg/static/img/commercial-engine-hero-800.jpg');background-image:image-set(url('/wp-content/themes/fmcg/static/img/commercial-engine-hero-800.webp') type('image/webp'),url('/wp-content/themes/fmcg/static/img/commercial-engine-hero-800.jpg') type('image/jpeg'))}}
/* Commercial Engine "Analytics War Room" band (was a 263 KB PNG) */
html body .fg-ce-band{background-image:url('/wp-content/themes/fmcg/static/img/analytics-war-room-2048.jpg');background-image:image-set(url('/wp-content/themes/fmcg/static/img/analytics-war-room-2048.webp') type('image/webp'),url('/wp-content/themes/fmcg/static/img/analytics-war-room-2048.jpg') type('image/jpeg'))}
/* Commercial Engine demo photo */
html body .fg-ce-demo-img{background-image:image-set(url('/wp-content/themes/fmcg/static/img/commercial-engine-demo-816.webp') type('image/webp'),url('/wp-content/themes/fmcg/static/img/commercial-engine-demo.jpg') type('image/jpeg'))}
/* <picture> wrappers added around logos: let the <img> keep its old layout */
html body .bd-page .bd-logos picture{display:contents}
/* form sending in the background: button shows "Sending..." */
html body :is(.ct-page .form-card,.bd-page .form-card,.nl-page .nl-card,.sr-close-f,.fg-ce-demo-form) [type=submit][aria-busy=true]{opacity:.75;cursor:progress}
/* Resources newsletter: field is now inside .form-group with a "Work email" label (read by screen
   readers, hidden on screen) - keeps the old one-line look; button keeps the teal .rx-btn look */
html body .rx-page .rx-news-form .form-group{display:block;flex:1;max-width:340px;margin:0;text-align:left}
html body .rx-page .rx-news-form .form-group>label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html body .rx-page .rx-news-form .form-group .wpcf7-form-control-wrap{display:block;max-width:none}
html body .rx-page .rx-news-form .rx-btn.submit-btn{width:auto;margin-top:0}
@media(max-width:600px){html body .rx-page .rx-news-form .form-group{max-width:none}}
/* same box as before (the old look came from #form-email; the field id is now "email") */
html body .rx-page .rx-news-form #email{padding:12px 16px;border:1px solid #d8dae0;border-radius:7px;font-size:16px;color:#1a1a2e}
html body .rx-page .rx-news-form #email:focus{border-color:#1778a8;outline:2px solid #1778a8;outline-offset:1px}
/* messages: red under the field / message line under the form (CF7's own CSS is not loaded here) */
html body .rx-page .rx-news-form #email.wpcf7-not-valid{border-color:#b42318}
html body .rx-page .rx-news-form .wpcf7-not-valid-tip{color:#b42318}
html body .rx-page .rx-news-form .wpcf7-display-none{display:none}
html body .rx-page .rx-news-form .wpcf7-response-output{padding:10px 14px;border:1px solid #d0d5dd;border-radius:6px;background:#f8fafc;text-align:left}
html body .rx-page .rx-news-form .wpcf7-response-output:empty{display:none}
html body .rx-page .rx-news-form :is(.wpcf7-validation-errors,.wpcf7-acceptance-missing,.wpcf7-mail-sent-ng,.wpcf7-aborted,.wpcf7-spam-blocked){border-color:#f4b8b2;background:#fef3f2;color:#b42318}
/* keep the old spacing under the form (16px) and stop the button stretching when an error shows */
html body .rx-page .rx-news-form{padding-bottom:16px;align-items:flex-start}
@media(max-width:600px){html body .rx-page .rx-news-form{align-items:stretch}}
/* Solutions > Survey Explorer: 4 stacked screenshots (same layout as Consumer Intelligence .ci-stack) */
html body .sr-product-stage .sr-mock.sr-mock-stack{overflow:visible!important}
html body .sr-se-stack{position:relative;width:100%;aspect-ratio:648/600}
html body .sr-se-stack picture{position:absolute;display:block;width:68%;margin:0}
html body .sr-se-stack img{display:block;width:100%;height:auto;border:1px solid #dde3ea;border-radius:10px;background:#fff;box-shadow:0 22px 50px rgba(15,35,71,.2)}
html body .sr-se-stack .sr-se-s1{left:0;top:0;z-index:1}
html body .sr-se-stack .sr-se-s2{left:32%;top:7.7%;z-index:2}
html body .sr-se-stack .sr-se-s3{left:3%;top:43.7%;z-index:3}
html body .sr-se-stack .sr-se-s4{left:30%;top:50%;z-index:4}
html body .sr-se-stack .sr-se-s4 img{box-shadow:0 28px 64px rgba(15,35,71,.3)}
/* Resources (mockup 11): All tab shows 4 cards, "View all trend resources (38)" opens the rest */
html body .rx-page #t-all:not(.rx-all-open) .rx-more-card{display:none}
html body .rx-page .rx-viewall-btn{padding:0;border:0;background:none;font:inherit;font-weight:600;font-size:15px;color:#136f9a;cursor:pointer;text-align:left}
html body .rx-page .rx-viewall-btn:hover{text-decoration:underline}
html body .rx-page .rx-viewall-btn:focus-visible{outline:2px solid #136f9a;outline-offset:3px;border-radius:2px}
/* Free reports now sit inside the Trend Resources section */
html body .rx-page .rx-reps-block{margin-top:56px}
html body .rx-page .rx-head-reps{margin-bottom:24px}
/* Resources webinar + article cards: same height in a row, "Register / Watch / Read article" lined up at the bottom */
html body .rx-page .rx-cards .rx-card{display:flex;flex-direction:column;height:100%}
html body .rx-page .rx-cards .rx-card-b{display:flex;flex-direction:column;flex:1 1 auto}
html body .rx-page .rx-cards .rx-card-b i{margin-top:auto;padding-top:14px}
/* Media & Events (Oct 2026): every card the same height, "Find out more" / "Read article" lined up
   at the bottom, with the event or publication logo on the right */
html body .me-card-grid > .me-event-card,html body .me-card-grid > .me-event-card-feat{display:flex;flex-direction:column;height:100%}
html body .me-card-grid .me-event-body{display:flex;flex-direction:column;flex:1 1 auto}
html body .me-card-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;height:48px;flex:none}
html body .me-card-foot .me-card-read,html body .me-card-foot .me-card-read-sm,html body .me-card-foot .me-event-link{margin:0}
html body .me-logo{display:block;flex:none;margin:0}
html body .me-logo img{display:block;width:auto;height:auto;max-width:130px;max-height:44px;object-fit:contain}
/* Resource hubs (Oct 2026): card photo (Rooban's, no text) in a 16:10 frame, inside <picture> */
html body .fx-page .fx-rcard-img.fx-rcard-fixed picture{display:block;height:100%}
html body .fx-page .fx-rcard-img.fx-rcard-fixed img{width:100%;height:100%;object-fit:cover}
/* ============================================================
   CONTRAST (Oct 2026) for the download / webinar / hub / blog / app pages (.fx-page):
   same darker teal as the main pages (#1778a8 buttons, #136f9a small text)
   ============================================================ */
html body .fx-page{--fx-teal:#1778a8}
html body .fx-page :is(.fx-sec,.fx-hero-light,.fx-grey) .fx-eb,
html body .fx-page :is(.fx-share-h,.fx-more-link,.fx-wcard-date,.fx-pcard-date,.fx-role,.fx-event-date),
html body .fx-page .fx-wmeta dt,html body .fx-page .fx-price-tag span{color:#136f9a}
html body .fx-page .fx-hero:not(.fx-hero-light) .fx-eb,html body .fx-page .fx-cta .fx-eb{color:#7fd0f5}
html body .fx-page .fx-form :is(input[type=submit],button[type=submit],.wpcf7-submit,.but-demo,.submit-btn){background:#1778a8!important}
html body .fx-page .fx-form :is(input[type=submit],button[type=submit],.wpcf7-submit,.but-demo,.submit-btn):hover{background:#1b3a6b!important}
html body .fx-page .fx-speaker .fx-role{color:#136f9a}
html body .fx-app .button.is-success{background:#157a52;border-color:#157a52}
html body .fx-app-pricing .top-package-header::before{background:#1778a8}
html body .fx-app-pricing .top-package-header :is(.package-style,.package-details){border-color:#1778a8}
html body .fx-app-pricing .package-header span{color:#136f9a}
html body .fx-app-pricing .starter-standard-advanced-button.button{background:#1778a8!important;border-color:#1778a8!important;color:#fff}
html body .fx-app-dash .dashboard-locked .dashboard-tile-title{color:#5f6b7c}
html body .fx-app :is(.fmcg-button,#text-by-payment-method){background-color:#1778a8}

/* ============================================================
   TOP TEN TRENDS 2027 - free magazine download page (Rooban mockup, Oct 2026)
   Twig: <main id="main-content" class="tt27-page">. Every rule starts with .tt27-page.
   Dark banner (same colour as the banner image), intro, then "What can you expect?"
   beside the light-blue download form card. Container 1180px / 32px, Inter.
   ============================================================ */
.tt27-page{--tt-navy:#1B3A6B;--tt-deep:#0c1f2d;--tt-teal:#29A8E0;--tt-body:#3f4d63;--tt-card:#eaf5fc;--tt-line:#a9d3ee;--tt-err:#b42318;display:block;background:#fff;color:#1a1a2e;font-family:'Inter','Inter Fallback',Arial,Helvetica,sans-serif}
.tt27-page *,.tt27-page *::before,.tt27-page *::after{box-sizing:border-box}
.tt27-page .tt27-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 32px}
.tt27-page h2{margin:0 0 16px;font-size:32px;font-weight:600;line-height:1.2;letter-spacing:-.6px;color:var(--tt-navy)}
.tt27-page p{margin:0 0 18px;font-size:17px;line-height:1.7;color:var(--tt-body)}

/* 1. Banner (Kate, Oct 19): navy on the left with the text, photo on the right half */
.tt27-page .tt27-hero{position:relative;display:flex;align-items:center;min-height:clamp(400px,30vw,560px);background:var(--tt-deep);color:#fff;overflow:hidden}
.tt27-page .tt27-hero-photo{position:absolute;top:0;right:0;bottom:0;width:50%;display:block;margin:0}
.tt27-page .tt27-hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:35% center}
.tt27-page .tt27-hero>.tt27-wrap{position:relative;z-index:1}
.tt27-page .tt27-hero-copy{max-width:calc(50% - 24px);padding:64px 0}
.tt27-page .tt27-hero h1{margin:0 0 32px;font-size:40px;font-weight:700;line-height:1.18;letter-spacing:-.5px;color:#fff}
.tt27-page .tt27-hero h1 span{display:block;font-weight:300}
.tt27-page .tt27-hero-btn{display:inline-block;padding:13px 22px;border:2px solid var(--tt-teal);border-radius:10px;color:#fff;font-size:16px;font-weight:600;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;text-decoration:none;transition:background .15s}
.tt27-page .tt27-hero-btn:hover{background:rgba(41,168,224,.18);color:#fff}
.tt27-page .tt27-hero-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* "Your free magazine awaits" jump: stops a little higher, so the form sits lower under the
   menu with the "What can you expect?" heading beside it; smooth scroll */
@media (prefers-reduced-motion:no-preference){html:has(.tt27-page){scroll-behavior:smooth}}

/* 2. Intro */
.tt27-page .tt27-intro{padding:72px 0 8px}
.tt27-page .tt27-lead{max-width:none;margin:0;font-size:18px;line-height:1.6}

/* 3. Copy + form card */
.tt27-page .tt27-main{padding:56px 0 88px}
.tt27-page .tt27-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
.tt27-page .tt27-copy h2{font-size:28px;letter-spacing:-.4px}
.tt27-page .tt27-copy h2:not(:first-child){margin-top:40px}
.tt27-page .tt27-list{margin:0;padding:0 0 0 22px}
.tt27-page .tt27-list li{margin:0 0 12px;padding-left:6px;font-size:17px;line-height:1.65;color:var(--tt-body)}
.tt27-page .tt27-list li::marker{color:var(--tt-navy)}

.tt27-page .tt27-card{padding:40px 36px 32px;border-radius:20px;background:var(--tt-card);scroll-margin-top:136px}
.tt27-page .tt27-card h2{margin:0 0 24px;font-size:30px;font-weight:700;line-height:1.2}
.tt27-page .tt27-card article{margin:0}
/* Contact Form 7 fields */
.tt27-page .tt27-card .wpcf7-form br,.tt27-page .tt27-card .wpcf7-form p:empty{display:none}
.tt27-page .tt27-card .wpcf7-form>p{margin:0}
.tt27-page .tt27-card .form-row{display:block;margin:0}
.tt27-page .tt27-card .form-group{display:block;margin:0 0 14px}
/* labels are read by screen readers; the placeholders show on screen (as in the mockup) */
.tt27-page .tt27-card .form-group>label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tt27-page .tt27-card .wpcf7-form-control-wrap{position:relative;display:block}
.tt27-page .tt27-card :is(input[type=text],input[type=email],input[type=tel],select,textarea){display:block;width:100%!important;height:auto;margin:0;padding:13px 15px;border:1.5px solid var(--tt-line);border-radius:7px;background:#fff;color:#1a1a2e;font-family:inherit;font-size:16px;line-height:1.4;box-shadow:none;transition:border-color .15s,box-shadow .15s}
.tt27-page .tt27-card :is(input,select,textarea)::placeholder{color:#6b7789;opacity:1}
.tt27-page .tt27-card :is(input,select,textarea):focus{outline:none;border-color:#1778a8;box-shadow:0 0 0 3px rgba(23,120,168,.2)}
.tt27-page .tt27-card .intl-tel-input{display:block;width:100%!important}
.tt27-page .tt27-card .intl-tel-input input[type=tel]{padding-left:64px!important}
/* phone field: country flag + arrow on a grey patch, dropdown list the width of the field */
.tt27-page .tt27-card .intl-tel-input .flag-container{left:0;right:0;padding:1.5px;pointer-events:none}
.tt27-page .tt27-card .intl-tel-input .flag-container>*{pointer-events:auto}
.tt27-page .tt27-card .intl-tel-input .selected-flag{width:54px;padding:0 0 0 12px;border-radius:6px 0 0 6px;background:#f1f4f8;outline:none}
.tt27-page .tt27-card .intl-tel-input .selected-flag:hover,.tt27-page .tt27-card .intl-tel-input .selected-flag:focus{background:#e6ebf2}
.tt27-page .tt27-card .intl-tel-input .selected-flag:focus-visible{box-shadow:inset 0 0 0 2px #1778a8}
.tt27-page .tt27-card .intl-tel-input .country-list{left:0;right:0;width:auto;max-width:none;max-height:280px;margin:6px 0 0;padding:4px 0;border:1px solid #cfd7e2;border-radius:8px;background:#fff;box-shadow:0 14px 34px rgba(15,35,71,.16);white-space:normal;font-size:15px;line-height:1.35;z-index:20}
.tt27-page .tt27-card .intl-tel-input .country-list .country{display:flex;align-items:center;gap:2px;padding:9px 14px}
.tt27-page .tt27-card .intl-tel-input .country-list .country.highlight{background:#eaf5fc}
.tt27-page .tt27-card .intl-tel-input .country-list .divider{margin:4px 0;border-bottom:1px solid #dfe5ec}
.tt27-page .tt27-card .intl-tel-input .country-list .dial-code{color:#5f6b7c}
.tt27-page .tt27-card .wpcf7-not-valid{border-color:var(--tt-err)!important}
.tt27-page .tt27-card .wpcf7-not-valid-tip{display:block;margin:6px 0 0;font-size:13px;line-height:1.4;color:var(--tt-err)}
.tt27-page .tt27-card :is(.submit-btn,.wpcf7-submit,button[type=submit]){display:inline-block;width:auto;margin:10px 0 0;padding:16px 34px;border:0;border-radius:10px;background:var(--tt-navy);color:#fff;font-family:inherit;font-size:18px;font-weight:600;line-height:1.2;cursor:pointer;transition:background .15s}
.tt27-page .tt27-card :is(.submit-btn,.wpcf7-submit,button[type=submit]):hover{background:#136f9a}
.tt27-page .tt27-card :is(.submit-btn,.wpcf7-submit,button[type=submit]):focus-visible{outline:3px solid rgba(23,120,168,.5);outline-offset:2px}
.tt27-page .tt27-card [type=submit][aria-busy=true]{opacity:.75;cursor:progress}
.tt27-page .tt27-card :is(.ajax-loader,.wpcf7-spinner){display:none}
.tt27-page .tt27-card .wpcf7-form .form-legal,.tt27-page .tt27-card .form-legal{margin:28px 0 0;text-align:left;font-size:13px;line-height:1.6;color:#4f5d72}
.tt27-page .tt27-card .form-legal a{color:var(--tt-navy);text-decoration:underline}
.tt27-page .tt27-card .wpcf7-response-output{margin:16px 0 0!important;padding:12px 14px!important;border:1px solid #d0d5dd!important;border-radius:6px;background:#fff;font-size:14px;line-height:1.5;color:#1a1a2e}
.tt27-page .tt27-card .wpcf7-response-output:empty,.tt27-page .tt27-card .wpcf7-display-none{display:none}
.tt27-page .tt27-card :is(.wpcf7-validation-errors,.wpcf7-acceptance-missing,.wpcf7-mail-sent-ng,.wpcf7-aborted,.wpcf7-spam-blocked){border-color:#f4b8b2!important;background:#fef3f2;color:var(--tt-err)}
.tt27-page .tt27-card .wpcf7-mail-sent-ok{border-color:#a6dcc3!important;background:#ecfdf3;color:#05603a}
.tt27-page .tt27-card .screen-reader-response{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* thank-you box (shown after a successful send) */
.tt27-page .tt27-success{display:none;padding:20px;border:1px solid #a6dcc3;border-radius:10px;background:#ecfdf3}
.tt27-page .tt27-success h3{margin:0 0 6px;font-size:18px;font-weight:600;color:#05603a}
.tt27-page .tt27-success p{margin:0;font-size:15px;line-height:1.55;color:#05603a}
.tt27-page .tt27-success a{color:#05603a;font-weight:600;text-decoration:underline}

/* Tablet */
@media (max-width:900px){
  .tt27-page .tt27-wrap{padding:0 20px}
  .tt27-page .tt27-hero{display:flex;flex-direction:column-reverse;align-items:stretch;min-height:0}
  .tt27-page .tt27-hero-photo{position:static;width:100%;aspect-ratio:1181/709}
  .tt27-page .tt27-hero-copy{max-width:none;padding:40px 0 44px}
  .tt27-page .tt27-hero h1{margin-bottom:24px;font-size:34px}
  .tt27-page .tt27-intro{padding-top:56px}
  .tt27-page h2{font-size:26px}
  .tt27-page .tt27-lead{font-size:17px}
  .tt27-page .tt27-main{padding:40px 0 64px}
  .tt27-page .tt27-cols{grid-template-columns:minmax(0,1fr);gap:40px}
  .tt27-page .tt27-copy h2{font-size:24px}
  .tt27-page .tt27-card{padding:32px 24px 26px;scroll-margin-top:104px}
  .tt27-page .tt27-card h2{font-size:26px}
}
/* Phone */
@media (max-width:480px){
  .tt27-page .tt27-hero h1{font-size:30px}
  .tt27-page .tt27-card{padding:28px 18px 22px;border-radius:16px}
  .tt27-page .tt27-card :is(.submit-btn,.wpcf7-submit,button[type=submit]){display:block;width:100%}
}
/* Same look for the country picker this page loads itself (intl-tel-input v17, classes .iti__*) */
.tt27-page .tt27-card .iti{display:block;width:100%}
.tt27-page .tt27-card .iti input[type=tel]{padding-left:64px!important}
.tt27-page .tt27-card .iti__flag-container{left:0;right:0;padding:1.5px;pointer-events:none}
.tt27-page .tt27-card .iti__flag-container>*{pointer-events:auto}
.tt27-page .tt27-card .iti--allow-dropdown .iti__flag-container .iti__selected-flag{width:54px;padding:0 0 0 12px;border-radius:6px 0 0 6px;background:#f1f4f8;outline:none}
.tt27-page .tt27-card .iti--allow-dropdown .iti__flag-container .iti__selected-flag:hover,.tt27-page .tt27-card .iti--allow-dropdown .iti__flag-container .iti__selected-flag:focus{background:#e6ebf2}
.tt27-page .tt27-card .iti__selected-flag:focus-visible{box-shadow:inset 0 0 0 2px #1778a8}
.tt27-page .tt27-card .iti__country-list{left:0;right:0;width:auto;max-width:none;max-height:280px;margin:6px 0 0;padding:4px 0;border:1px solid #cfd7e2;border-radius:8px;background:#fff;box-shadow:0 14px 34px rgba(15,35,71,.16);white-space:normal;font-size:15px;line-height:1.35;z-index:20}
.tt27-page .tt27-card .iti__country{display:flex;align-items:center;gap:2px;padding:9px 14px}
.tt27-page .tt27-card .iti__country.iti__highlight{background:#eaf5fc}
.tt27-page .tt27-card .iti__divider{margin:4px 0;border-bottom:1px solid #dfe5ec}
.tt27-page .tt27-card .iti__dial-code{color:#5f6b7c}
/* ===== end TOP TEN TRENDS 2027 ===== */