/* Roles / Audience Pages — v5 (original color scheme preserved) */
:root{
  --ink:#0f172a;
  --muted:#475569;
  --line:#e2e8f0;
  --bg:#ffffff;
  --brand:#231466 ;   /* original brand */
  --brand-2:#3320a3; /* original accent */
  --brand-3:#4624a2; /* original gradient stop */
  --accent: var(--brand-2);
  --radius:16px;
  --shadow-lg:0 22px 60px rgba(16,24,40,.12);
  --shadow-md:0 12px 30px rgba(16,24,40,.10);
}
#content{
  border:none !important;
}
body.role-landing{background:var(--bg);overflow:auto;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}
.container{width:min(1120px,92vw);margin:0 auto;margin-bottom:2rem}
.sr-only{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap}

/* Buttons */
.btn{appearance:none;border:0;border-radius:14px;font-weight:700;cursor:pointer;padding:.9rem 1.1rem;line-height:1;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:transform .06s ease,box-shadow .2s ease,background-position .35s ease,color .2s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{color:#fff;width:45%;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 50%,var(--brand-3) 100%);background-size:200% 100%;box-shadow:0 8px 22px rgba(63,110,191,.25)}
.btn-primary:hover{background-position:100% 0}
.btn-outline{color:var(--brand);background:#fff;border:1px solid #bfd0ff;box-shadow:0 4px 16px rgba(16,24,40,.06);width:45%;}
.btn-outline:hover{color:#0b1b48;border-color:#9ab5ff;background:#f7fbff}
.btn:focus-visible{outline:3px solid rgba(63,110,191,.45);outline-offset:2px}

/* HERO */
.role-landing .hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(20px,3vw,36px);padding:clamp(20px,4vw,56px) 0 clamp(10px,2vw,12px);margin-bottom:6rem;}
.role-landing .hero h1{font-size:clamp(2rem,3.6vw,3.2rem);line-height:1.12;letter-spacing:.2px;margin:0 0 .5rem;color:#333;text-align:left;font-weight:500}
.role-landing .hero__sub{color:var(--muted);font-size:clamp(1rem,1.3vw,1.1rem);margin:.4rem 0 1.1rem;text-align:left;}
.role-landing .hero__actions{display:flex;gap:12px;margin:1rem 0 1.1rem;}
.role-landing .hero__highlights{display:grid;gap:8px;margin:.8rem 0 0;padding:0;list-style:none;font-size:.98rem;color:#0f1b3a}
.role-landing .hero__highlights li{display:flex;align-items:center;gap:10px}
.role-landing .hero__highlights i{font-size:1rem;min-width:1.25em;text-align:center;color:var(--brand-2)}
.hero__visual{margin:0}
.hero__img{width:100%;height:auto;display:block;border-radius:18px;border:1px solid #e7ecff;box-shadow:var(--shadow-lg);background:#fff}

/* MINI BENEFITS */
.benefits{padding:6px 0 4px}
.benefits-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.benefit-card{background:linear-gradient(180deg,#ffffff,#f9fbff);border:1px solid #e7ecff;border-radius:16px;padding:14px 14px 12px;box-shadow:var(--shadow-md)}
.benefit-card h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:1.02rem;color:#0f1b48}
.benefit-card p{margin:0;color:var(--muted);font-size:.96rem}
.benefit-card .fa-check-circle{color:var(--brand-2)}

/* FEATURES */
.role-landing .features{padding-bottom:6px}
#content h2{font-size:clamp(1.3rem,2.4vw,2rem);color:#0b1b48;margin:0 0 12px;font-family:"Inter", sans-serif;}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:3rem;}
.role-card{background:#fff;border:1px solid #e7ecff;border-radius:16px;padding:16px 16px 14px;box-shadow:var(--shadow-md);transition:transform .08s ease,box-shadow .15s ease,border-color .18s ease}
.role-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(2,6,23,.10);border-color:#d7e4ff}
.role-card h3{margin:6px 0 6px;color:#0f1b48;font-size:1.05rem}
.role-card p{color:var(--muted);font-size:.98rem;text-align: left;}
.feature-icon{font-size:1.2rem;line-height:1;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(180deg,rgba(126,123,255,.16),rgba(126,123,255,.06));color:#4437b5}
.feature-icon i{font-size:1.05rem}
.feature-link a{color:var(--brand-2);text-decoration:none;font-weight:700}
.feature-link a:hover{text-decoration:underline}

/* FAQ */
/* FAQ — improved */
.faq{ padding: 18px 0 36px; }
.faq h2{ text-align:center; margin-bottom: 14px; }

/* Grid for items */
.faq-list{
  display:grid;
  gap:12px;
  margin-top:10px;
}

/* Accordion card */
.faq-item{
  border-radius: var(--radius);
  background:#fff;
  border:1px solid #e7ecff;
  box-shadow:0 6px 18px rgba(16,24,40,.06);   /* lighter than --shadow-md */
  transition: border-color .18s ease, box-shadow .18s ease, transform .06s ease;
  overflow:hidden;  /* keeps rounded corners on open */
  margin-bottom:1rem;
}
.faq-item:hover{ transform: translateY(-1px); border-color:#d3e0ff; box-shadow:0 12px 28px rgba(16,24,40,.10); }

/* Summary row */
.faq-item > summary{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  cursor:pointer; list-style:none; outline:none;
  color:#0f1b48; font-weight:700;
}
.faq-item > summary::-webkit-details-marker{ display:none; }

/* Chevron indicator (pure CSS) */
.faq-item > summary::after{
  content:"";
  margin-left:auto;
  width:10px; height:10px;
  border-right:2px solid var(--brand-2);
  border-bottom:2px solid var(--brand-2);
  transform: rotate(-45deg);
  transition: transform .2s ease, opacity .2s ease;
  opacity:.9;
}
.faq-item[open] > summary::after{ transform: rotate(45deg); }

/* Focus visibility */
.faq-item > summary:focus-visible{
  outline:3px solid rgba(63,110,191,.35);
  outline-offset:2px;
  border-radius:calc(var(--radius) - 4px);
}

/* Body */
.faq-body{
  padding:10px 16px 14px;
  color:var(--muted);
  border-top:1px solid #eef3ff;
  animation: faqIn .22s ease;
}

/* Open state styling */
.faq-item[open]{
  border-color:#c7d9ff;
  box-shadow:0 14px 34px rgba(63,110,191,.14);
}

/* Slight motion without height hacks */
@keyframes faqIn{
  from{ opacity:0; transform:translateY(-4px) }
  to{ opacity:1; transform:translateY(0) }
}

/* Responsive */
@media (max-width:1024px){
  .faq-list{ grid-template-columns:1fr; gap:10px; }
  .faq h2{ text-align:left; }
}


/* CTA */
.final-cta{padding:12px 0 46px}
.cta-card{padding:18px;background:linear-gradient(180deg,#ffffff,#f7f9ff);border:1px solid #e7ecff;border-radius:18px;box-shadow:var(--shadow-lg);text-align:center}
.cta-card h2{margin:0 0 6px;color:#0b1b48}
.cta-card p{margin:0 0 12px;color:var(--muted)}

/* Responsive */
@media (max-width:1024px){
  .role-landing .hero{grid-template-columns:1fr}
  .feature-grid,.benefits-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .feature-grid,.benefits-grid{grid-template-columns:1fr}
}
/* Better color for the hero quote card */
.hero .voice-quote{
  /* Use your existing token if present; fall back to #3751FF */
  --brand: var(--color-primary, #3751FF);

  /* Gentle brand-tinted surface + crisp edge */
  --surface: color-mix(in oklab, var(--brand) 8%, #ffffff);
  --edge:    color-mix(in oklab, var(--brand) 26%, #e7edf8);

  position: relative;
  background:
    radial-gradient(60% 80% at 8% 0%, color-mix(in oklab, var(--brand) 10%, #ffffff), transparent 60%),
    linear-gradient(180deg, var(--surface), #ffffff);
  border: 1px solid var(--edge);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(55,81,255,.12), 0 2px 6px rgba(15, 23, 42, .06);
}

.hero .voice-quote blockquote { color:#0f1b48; }
.hero .voice-quote blockquote::before{
  color: color-mix(in oklab, var(--brand) 70%, #94a3b8);
  opacity:.75;
}
.hero .voice-quote figcaption{ color:#6b7280; }

/* Optional: slightly stronger “brand” look if you add class="voice-quote is-brand" */
.hero .voice-quote.is-brand{
  --surface: color-mix(in oklab, var(--brand) 14%, #ffffff);
  --edge:    color-mix(in oklab, var(--brand) 38%, #e7edf8);
  box-shadow: 0 14px 36px rgba(55,81,255,.16), 0 2px 8px rgba(15, 23, 42, .08);
}

/* Dark mode sanity (if you ever flip themes) */
@media (prefers-color-scheme: dark){
  .hero .voice-quote{
    --surface: color-mix(in oklab, var(--brand) 14%, #0b1220);
    --edge:    color-mix(in oklab, var(--brand) 40%, #0b1220);
    background:
      radial-gradient(60% 80% at 8% 0%, color-mix(in oklab, var(--brand) 25%, #0b1220), transparent 60%),
      linear-gradient(180deg, var(--surface), #0b1220);
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
  }
  .hero .voice-quote blockquote{ color:#e6e9f5; }
  .hero .voice-quote figcaption{ color:#a5b4c7; }
}
/* Voice-of-user quotes (hero) */
.hero .voice-strip{ margin-top:14px; }
.hero .voice-row{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,1fr);
  gap:12px; overflow-x:auto; padding:6px 2px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(to right,transparent,black 24px,black calc(100% - 24px),transparent);
}
.hero .voice-quote{
  scroll-snap-align:start;
  margin-left:0.6rem;
  background:linear-gradient(180deg,#fff,#fafbff) padding-box,
             linear-gradient(135deg,rgba(76,110,205,.5),rgba(109,40,217,.45)) border-box;
  border:1px solid transparent; border-radius:14px; padding:12px 14px;
  text-align:left;
  box-shadow:0 8px 22px rgba(16,24,40,.08); min-height:74px; display:grid; align-content:center;
}
.hero .voice-quote blockquote{ margin:0; font-weight:600;   position:relative;line-height:1.45;                         /* for absolute quote mark */
  padding-left:.85em;                        /* space for the “ mark */color:#0f1b48; text-wrap:pretty; }
.hero .voice-quote blockquote:before{   content:"“";
  position:absolute;
  left:0; top:.05em;                         /* sits on first line */
  font-size:1.6em; line-height:1;            /* no extra leading */
  color:color-mix(in oklab, var(--color-primary,#3751FF) 70%, #94a3b8);
  opacity:.75; }
.hero .voice-quote figcaption{ margin-top:6px; font-size:.9rem; color:#64748b; }
@media (max-width: 768px) {

    .topowner {
        PADDING-BOTTOM: 1REM;
        BORDER-BOTTOM: SOLID 0.1PX LIGHTGREY;
    }
  
  .role-landing .hero{
    padding: 1.4rem;
        box-sizing: border-box;
  }
  }