@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');

/* =============================================================
   NAIQ — Okta-Inspired Theme  (re-skinned from the Apple base)
   ------------------------------------------------------------
   Clean white surfaces, electric indigo brand, sunset-orange
   gradient accents, and elegant Fraunces serif display headlines
   — adopting okta.com's visual language. Token-driven; overrides
   markup without touching structure, content, or backend.
   ============================================================= */

/* ---------- 0. CSS VARIABLES ---------- */
:root{
  --ap-bg:        #ffffff;
  --ap-bg-soft:   #f6f4ff;   /* faint indigo tint instead of grey */
  --ap-bg-card:   #fcfbff;
  --ap-text:      #14121f;   /* near-black with a violet undertone */
  --ap-text-2:    #3a3850;
  --ap-text-3:    #565270;
  --ap-text-4:    #7c7895;
  --ap-border:    rgba(74,24,224,0.10);
  --ap-border-2:  rgba(74,24,224,0.22);
  --ap-accent:    #4a18e0;   /* Okta indigo (links, tints, icons) */
  --ap-accent-h:  #5b2bff;
  --ap-blue:      #2b1bff;   /* Okta royal-blue primary CTA */
  --ap-orange:    #ff7438;   /* sunset accent */
  --ap-nav-h:     48px;
  --ap-radius:    18px;
  --ap-radius-sm: 12px;
  --ap-font:      "Inter","SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ap-serif:     "Fraunces",Georgia,"Times New Roman",serif;
  --ok-grad:      linear-gradient(135deg,#4a18e0 0%,#6b3df6 38%,#b16ad6 66%,#ff9e6d 100%);
}

/* ---------- 1. RESET & BASE ---------- */
html, body{
  background:#ffffff !important;
  background-image:none !important;
  background-color:#ffffff !important;
  color:var(--ap-text) !important;
  font-family:var(--ap-font) !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.01em;
}
body{
  overflow-x:hidden;
  min-height:100vh;
  padding-top:var(--ap-nav-h) !important;
  margin:0 !important;
}

/* Force light look regardless of body class */
body, body.day-mode, body:not(.day-mode){
  background:#ffffff !important;
  color:var(--ap-text) !important;
}

/* ---------- 2. KILL ALL PAGE-BACKGROUNDS / DECOR ---------- */
.bg, .bg-base, .bg-grid, .bg-beam, .bg-fixed,
.orb, .o1, .o2, .o3, .o4, .o5,
.mesh, .hero-mesh, .hero-bg, .page-bg,
.auth-bg, .auth-mesh,
[class*="bg-orb"], [class*="background-mesh"],
[class*="gradient-bg"]{
  display:none !important;
  background:none !important;
  background-image:none !important;
  filter:none !important;
  animation:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Strip inline dark gradients on non-button elements */
[style*="background: linear-gradient"]:not(.btn-primary):not(.plan-cta-p):not(.step-n):not(.nav-avatar):not([class*="badge"]){
  background-image:none !important;
}
[style*="filter: drop-shadow"]{
  filter:none !important;
}

/* ---------- 3. TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5,h6{
  font-family:var(--ap-font) !important;
  color:var(--ap-text) !important;
  -webkit-text-fill-color:var(--ap-text) !important;
  background:none !important;
  background-image:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  letter-spacing:-0.022em;
  font-weight:600;
  text-shadow:none !important;
}
h1{ font-weight:600; line-height:1.05; }
h2{ font-weight:600; line-height:1.1; }
h3{ font-weight:600; line-height:1.2; }
h4,h5,h6{ font-weight:600; line-height:1.3; }

p, li{
  color:var(--ap-text-2);
  line-height:1.55;
}
strong{ color:var(--ap-text); font-weight:600; }

a{ color:var(--ap-accent); text-decoration:none; }
a:hover{ color:var(--ap-accent-h); text-decoration:underline; }

/* Gradient-text accents → solid Apple blue */
.gd, .gradient-text, [class*="gradient-text"]{
  background:none !important;
  background-image:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:var(--ap-accent) !important;
  color:var(--ap-accent) !important;
  font-weight:inherit;
}

/* Force light heading colors even when inline gradient text was used */
.hero-h1, .sec-h, h2.sec-h, .vision-h, .plan-price,
.hstat-n, .step h3, .prod-title, .upd-title, h1{
  -webkit-text-fill-color:var(--ap-text) !important;
  background:none !important;
  background-image:none !important;
  color:var(--ap-text) !important;
}

/* ---------- 4. FIXED TOP NAVIGATION (Apple-style) ---------- */
nav, #main-nav{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:var(--ap-nav-h) !important;
  z-index:9999 !important;
  background:rgba(255,255,255,0.92) !important;
  backdrop-filter:saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px) !important;
  border-bottom:1px solid var(--ap-border) !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  transform:none !important;
  display:flex !important;
  align-items:center !important;
}

nav .nav-inner,
#main-nav .nav-inner,
nav > div:first-child:not(.bg){
  max-width:1024px !important;
  width:100% !important;
  margin:0 auto !important;
  padding:0 22px !important;
  height:var(--ap-nav-h) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:1rem !important;
}

/* Logo block */
nav .logo, #main-nav .logo{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  cursor:pointer;
  text-decoration:none !important;
}
nav .logo-icon, #main-nav .logo-icon{
  width:22px !important;
  height:22px !important;
  filter:none !important;
  box-shadow:none !important;
  background:transparent !important;
  flex-shrink:0;
}
nav .logo-text, #main-nav .logo-text{
  color:var(--ap-text) !important;
  -webkit-text-fill-color:var(--ap-text) !important;
  background:none !important;
  font-size:14px !important;
  font-weight:500 !important;
  letter-spacing:-0.01em !important;
  font-family:var(--ap-font) !important;
  text-shadow:none !important;
}
nav .logo-sub, #main-nav .logo-sub{
  display:none !important;
}

/* Nav links — Apple style */
nav .nav-links, #main-nav .nav-links{
  display:flex !important;
  gap:0 !important;
  list-style:none !important;
  align-items:center !important;
  margin:0 !important;
  padding:0 !important;
}
nav .nav-links li, #main-nav .nav-links li{
  list-style:none;
  margin:0;
}
nav .nav-links a, #main-nav .nav-links a{
  color:var(--ap-text) !important;
  font-size:12px !important;
  font-weight:400 !important;
  letter-spacing:-0.01em !important;
  padding:0 10px !important;
  opacity:0.86;
  transition:opacity 0.2s ease !important;
  text-decoration:none !important;
  font-family:var(--ap-font) !important;
  cursor:pointer;
}
nav .nav-links a:hover, #main-nav .nav-links a:hover,
nav .nav-links a.active-nav{
  opacity:1;
  color:var(--ap-text) !important;
  text-decoration:none !important;
}

/* Nav actions */
nav .nav-actions, #main-nav .nav-actions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
nav .theme-toggle, #main-nav .theme-toggle{
  display:none !important;
}
nav .nav-back, #main-nav .nav-back{
  color:var(--ap-text-3) !important;
  font-size:12px !important;
  opacity:0.9;
  text-decoration:none !important;
}
nav .nav-back:hover{ color:var(--ap-text) !important; }

#nav-user{
  color:var(--ap-text) !important;
  font-size:12px !important;
  background:transparent !important;
  text-shadow:none !important;
}
.nav-avatar{
  width:24px !important;
  height:24px !important;
  font-size:11px !important;
  background:linear-gradient(135deg,#4a18e0,#ff7438) !important;
  color:#726d6d !important;
}

/* Buttons in the nav — keep them compact */
nav .btn, #main-nav .btn{
  font-size:12px !important;
  padding:5px 12px !important;
  height:28px !important;
}

/* Hamburger */
nav .hamburger, #main-nav .hamburger{
  display:none;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
  padding:8px;
  margin:-8px;
}
nav .hamburger span, #main-nav .hamburger span{
  display:block;
  width:18px !important;
  height:1.5px !important;
  background:var(--ap-text) !important;
  border-radius:0;
  transition:transform 0.25s, opacity 0.25s;
}

/* ---------- 5. BUTTONS (Apple pill style) ---------- */
.btn,
button.btn,
.btn-primary,
.btn-ghost,
.btn-outline,
.btn-outline-lg,
.btn-lg,
.plan-cta{
  font-family:var(--ap-font) !important;
  font-size:14px !important;
  font-weight:400 !important;
  border-radius:980px !important;
  padding:8px 16px !important;
  border:none !important;
  cursor:pointer !important;
  transition:background 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px;
  letter-spacing:-0.01em !important;
  line-height:1.2 !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

.btn-primary, .plan-cta-p{
  background:var(--ap-accent) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.btn-primary:hover, .plan-cta-p:hover{
  background:var(--ap-accent-h) !important;
  color:#fff !important;
  transform:none !important;
  box-shadow:none !important;
}

.btn-ghost, .btn-outline, .plan-cta-g{
  background:transparent !important;
  color:var(--ap-accent) !important;
  border:1px solid var(--ap-accent) !important;
}
.btn-ghost:hover, .btn-outline:hover, .plan-cta-g:hover{
  background:var(--ap-accent) !important;
  color:#fff !important;
  border-color:var(--ap-accent) !important;
}

.btn-lg{
  padding:12px 22px !important;
  font-size:17px !important;
}
.btn-outline-lg{
  background:transparent !important;
  color:var(--ap-accent) !important;
  border:none !important;
  padding:12px 8px !important;
  font-size:17px !important;
}
.btn-outline-lg:hover{
  color:var(--ap-accent-h) !important;
  text-decoration:underline !important;
}

/* ---------- 6. LAYOUT / SECTIONS ---------- */
section, .section{
  background:#ffffff !important;
  background-image:none !important;
  padding:80px 22px !important;
  position:relative;
  color:var(--ap-text);
}
@media(min-width:734px){ section{ padding:100px 22px !important; } }
@media(min-width:1068px){ section{ padding:120px 22px !important; } }

/* Subtle alternation, Apple-style */
section:nth-of-type(even){ background:var(--ap-bg-soft) !important; }

main, .main, .page{ background:transparent !important; }

/* Center containers */
.sec-center, .container, .wrap, .inner, .hero-inner{
  max-width:980px !important;
  margin:0 auto !important;
}
.wrap{
  padding:130px 22px 80px !important;
  background:transparent !important;
}

/* Section eyebrow / tag */
.sec-tag, .hero-eyebrow, .eyebrow{
  font-family:var(--ap-font) !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:var(--ap-text-3) !important;
  text-transform:none !important;
  letter-spacing:-0.01em !important;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  margin-bottom:8px !important;
  display:inline-block !important;
  opacity:1 !important;
}
.hero-eyebrow-dot{ display:none !important; }

/* Section headings */
.sec-h, h2.sec-h{
  font-size:clamp(2rem, 4vw, 3rem) !important;
  font-weight:600 !important;
  letter-spacing:-0.025em !important;
  line-height:1.08 !important;
  color:var(--ap-text) !important;
  -webkit-text-fill-color:var(--ap-text) !important;
  background:none !important;
  background-image:none !important;
  margin-bottom:16px !important;
  text-align:center;
}
.sec-sub{
  font-size:clamp(1.05rem, 1.5vw, 1.25rem) !important;
  color:var(--ap-text-3) !important;
  font-weight:400 !important;
  line-height:1.45 !important;
  max-width:660px;
  margin:0 auto 32px !important;
  text-align:center;
}

/* ---------- 7. HERO SECTION ---------- */
#hero, section#hero{
  min-height:auto !important;
  padding-top:96px !important;
  padding-bottom:80px !important;
  background:#ffffff !important;
  text-align:center !important;
  display:block !important;
}
.hero-inner{
  max-width:980px !important;
  margin:0 auto !important;
  text-align:center !important;
  padding:0 22px !important;
}
.hero-h1, #hero h1{
  font-size:clamp(2.5rem, 6vw, 4.5rem) !important;
  font-weight:600 !important;
  line-height:1.05 !important;
  letter-spacing:-0.035em !important;
  color:var(--ap-text) !important;
  -webkit-text-fill-color:var(--ap-text) !important;
  background:none !important;
  background-image:none !important;
  margin:14px 0 16px !important;
  font-family:var(--ap-font) !important;
  text-shadow:none !important;
}
.hero-p, #hero p, .lead{
  font-size:clamp(1.1rem, 1.5vw, 1.35rem) !important;
  color:var(--ap-text-3) !important;
  font-weight:400 !important;
  line-height:1.45 !important;
  letter-spacing:-0.012em !important;
  max-width:680px !important;
  margin:0 auto 28px !important;
}
.hero-ctas{
  display:flex !important;
  gap:24px !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  margin-top:24px !important;
}
.hero-stats{
  display:flex !important;
  gap:48px !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  margin-top:56px !important;
  padding-top:56px !important;
  border-top:1px solid var(--ap-border) !important;
}
.hstat{ text-align:center; }
.hstat-n{
  font-size:clamp(2rem, 3.5vw, 2.8rem) !important;
  font-weight:600 !important;
  color:var(--ap-text) !important;
  -webkit-text-fill-color:var(--ap-text) !important;
  background:none !important;
  background-image:none !important;
  letter-spacing:-0.02em !important;
  line-height:1 !important;
  font-family:var(--ap-font) !important;
}
.hstat-l{
  font-size:13px !important;
  color:var(--ap-text-3) !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  margin-top:6px !important;
  font-family:var(--ap-font) !important;
}
.hero-scroll{ display:none !important; }

/* ---------- 8. CARDS / GRIDS ---------- */
.products-grid, .sys-grid, .plans, .plan-cards, .pricing-grid,
[class*="grid"]:not(.bg-grid){
  display:grid !important;
  gap:20px !important;
  margin-top:48px !important;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  max-width:1100px;
  margin-left:auto !important;
  margin-right:auto !important;
}
.products-grid, .sys-grid{
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)) !important;
}
.plans, .plan-cards, .pricing-grid{
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)) !important;
}

/* Product card */
.prod, .product-card, .plan, .plan-card, .feat-card, .card, .sys-card,
.upd-container, .vision-card,
[class*="-card"], .glass, .glass-card{
  background:var(--ap-bg-card) !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid var(--ap-border) !important;
  border-radius:var(--ap-radius) !important;
  padding:32px 28px !important;
  color:var(--ap-text) !important;
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  box-shadow:none !important;
  overflow:hidden;
  position:relative;
}
.prod{ cursor:pointer; }
.prod:hover, .product-card:hover, .plan:hover, .feat-card:hover, .card:hover, .sys-card:hover{
  border-color:var(--ap-border-2) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 8px 24px rgba(0,0,0,0.06) !important;
  background:#ffffff !important;
}

/* Decorative pseudo-elements on .prod — disable */
.prod::before, .prod::after{
  display:none !important;
  background:none !important;
}

/* Card text colors */
.prod-title, .plan-name, .feat-card h3, .card h3, .sys-card h3,
.product-card h3, .plan-card h3, .upd-title, .step h3, .vision-h{
  color:var(--ap-text) !important;
  -webkit-text-fill-color:var(--ap-text) !important;
  background:none !important;
  background-image:none !important;
  font-size:1.15rem !important;
  font-weight:600 !important;
  letter-spacing:-0.015em !important;
  margin-bottom:6px !important;
}
.prod-sub{
  font-family:var(--ap-font) !important;
  font-style:normal !important;
  font-size:0.9rem !important;
  color:var(--ap-text-3) !important;
  margin-bottom:16px !important;
}
.prod-feats, .plan-feats{ list-style:none !important; padding:0 !important; }
.prod-feats li, .plan-feats li{
  font-size:0.875rem !important;
  color:var(--ap-text-2) !important;
  line-height:1.6 !important;
  padding:4px 0 !important;
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.prod-feats li::before{
  content:'·' !important;
  color:var(--ap-accent) !important;
  opacity:1 !important;
  font-weight:700;
  font-size:1.1rem;
  line-height:1;
  margin-top:2px;
}
.plan-feats li::before{
  content:'✓' !important;
  color:var(--ap-accent) !important;
  flex-shrink:0;
  font-weight:600;
}
.plan-feats li.no{ color:var(--ap-text-4) !important; }
.plan-feats li.no::before{ content:'—' !important; color:var(--ap-text-4) !important; }
.prod-clo{
  font-family:var(--ap-font) !important;
  font-style:normal !important;
  font-size:0.85rem !important;
  color:var(--ap-text-3) !important;
  margin-top:14px !important;
  font-weight:400 !important;
}

/* Card numbers / icons */
.prod-num{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:28px !important;
  height:28px !important;
  border-radius:8px !important;
  border:1px solid var(--ap-border) !important;
  background:var(--ap-bg-soft) !important;
  font-family:var(--ap-font) !important;
  font-size:11px !important;
  font-weight:500 !important;
  color:var(--ap-text-3) !important;
  margin-bottom:18px !important;
  transition:none !important;
}
.prod:hover .prod-num{ background:var(--ap-bg-soft) !important; transform:none !important; }
.prod-icon{
  width:44px !important;
  height:44px !important;
  border-radius:12px !important;
  border:1px solid var(--ap-border) !important;
  background:var(--ap-bg-soft) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:var(--ap-accent) !important;
  margin-bottom:18px !important;
  box-shadow:none !important;
  transition:none !important;
}
.prod-icon svg{ width:22px !important; height:22px !important; }
.prod-rule{
  height:1px !important;
  background:var(--ap-border) !important;
  width:32px !important;
  opacity:1 !important;
  margin-bottom:14px !important;
}

/* Plans / pricing */
.plan-name{
  font-family:var(--ap-font) !important;
  font-size:12px !important;
  color:var(--ap-text-3) !important;
  letter-spacing:0 !important;
  text-transform:uppercase !important;
  margin-bottom:6px !important;
  font-weight:600 !important;
}
.plan-price{
  font-family:var(--ap-font) !important;
  font-size:2.2rem !important;
  font-weight:600 !important;
  color:var(--ap-text) !important;
  -webkit-text-fill-color:var(--ap-text) !important;
  background:none !important;
  letter-spacing:-0.03em !important;
  margin-bottom:6px !important;
  line-height:1.1 !important;
}
.plan-price span{
  font-family:var(--ap-font) !important;
  font-size:0.85rem !important;
  color:var(--ap-text-3) !important;
  font-weight:400 !important;
}
.plan-desc{
  font-size:0.9rem !important;
  color:var(--ap-text-3) !important;
  line-height:1.5 !important;
  margin-bottom:18px !important;
  padding-bottom:18px !important;
  border-bottom:1px solid var(--ap-border) !important;
}
.plan.popular{
  border-color:var(--ap-accent) !important;
  box-shadow:0 0 0 1px var(--ap-accent), 0 12px 36px rgba(74,24,224,0.12) !important;
  transform:none !important;
}
.plan.popular:hover{ transform:translateY(-2px) !important; }
.plan-badge{
  background:var(--ap-accent) !important;
  color:#fff !important;
  font-family:var(--ap-font) !important;
  font-size:11px !important;
  font-weight:500 !important;
  letter-spacing:0.02em !important;
  text-transform:uppercase !important;
  padding:3px 10px !important;
  border-radius:980px !important;
}

/* "How it works" steps */
.steps-wrap{
  max-width:1100px !important;
  margin:48px auto 0 !important;
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap:24px !important;
}
.steps-wrap::before{ display:none !important; }
.step{
  text-align:center !important;
  padding:24px 16px !important;
  background:transparent !important;
  border:none !important;
}
.step-n{
  width:48px !important;
  height:48px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#4a18e0,#ff7438) !important;
  color:#fff !important;
  font-weight:600 !important;
  font-size:1.05rem !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 auto 16px !important;
  box-shadow:none !important;
}
.step h3{
  font-size:1.05rem !important;
  margin-bottom:8px !important;
  color:var(--ap-text) !important;
}
.step p{
  font-size:0.9rem !important;
  color:var(--ap-text-3) !important;
  line-height:1.55 !important;
}

/* ---------- 9. UPDATES SLIDER ---------- */
.upd-container{
  background:var(--ap-bg-card) !important;
  border:1px solid var(--ap-border) !important;
  border-radius:var(--ap-radius) !important;
  box-shadow:none !important;
  padding:0 !important;
  max-width:1024px;
  margin:0 auto;
  overflow:hidden;
}
.upd-slide{ padding:32px 36px !important; }
.upd-img{
  border:1px solid var(--ap-border) !important;
  background:var(--ap-bg-soft) !important;
}
.upd-cat{
  background:rgba(74,24,224,0.08) !important;
  border:1px solid rgba(74,24,224,0.18) !important;
  color:var(--ap-accent) !important;
  font-family:var(--ap-font) !important;
  font-size:11px !important;
  letter-spacing:0 !important;
  font-weight:500 !important;
  border-radius:980px !important;
  padding:3px 10px !important;
  text-transform:none !important;
}
.upd-title{
  font-family:var(--ap-font) !important;
  color:var(--ap-text) !important;
  -webkit-text-fill-color:var(--ap-text) !important;
  background:none !important;
  font-weight:600 !important;
}
.upd-desc{ color:var(--ap-text-3) !important; }
.upd-date{ color:var(--ap-text-3) !important; font-family:var(--ap-font) !important; }
.upd-link{
  background:transparent !important;
  border:1px solid var(--ap-accent) !important;
  color:var(--ap-accent) !important;
  border-radius:980px !important;
  font-weight:400 !important;
}
.upd-link:hover{
  background:var(--ap-accent) !important;
  color:#fff !important;
  transform:none !important;
}
.upd-ctrl{
  background:#ffffff !important;
  border:1px solid var(--ap-border-2) !important;
  color:var(--ap-text) !important;
}
.upd-ctrl:hover{
  background:var(--ap-accent) !important;
  border-color:var(--ap-accent) !important;
  color:#fff !important;
  transform:none !important;
  box-shadow:none !important;
}
.upd-dot{ background:var(--ap-border-2) !important; }
.upd-dot.active{ background:var(--ap-accent) !important; }

/* ---------- 10. VISION / FEATURED CARDS ---------- */
.vision-card{
  background:linear-gradient(135deg,#fff7ed,#ffffff) !important;
  border:1px solid rgba(217,119,6,0.18) !important;
  color:var(--ap-text) !important;
}
.vision-h{
  background:none !important;
  background-image:none !important;
  -webkit-text-fill-color:#92400e !important;
  color:#92400e !important;
}
.vision-body{ color:var(--ap-text-2) !important; }
.vision-sub{ color:var(--ap-text-3) !important; }
.vision-tag-label{ color:#b45309 !important; opacity:1 !important; }
.vision-num{
  background:none !important;
  -webkit-text-fill-color:#b45309 !important;
  color:#b45309 !important;
}
.vision-lbl{ color:#b45309 !important; opacity:0.65; }
.vision-rule{
  background:rgba(217,119,6,0.3) !important;
  opacity:1 !important;
}
.vision-motto{ color:#b45309 !important; opacity:0.85; }
.vision-ico-box{
  background:rgba(251,191,36,0.12) !important;
  border:1px solid rgba(217,119,6,0.25) !important;
}
.vision-ico-box svg{ color:#d97706 !important; }

/* ---------- 11. FAQ ---------- */
.faq-item, [class*="accordion"]{
  background:transparent !important;
  border:none !important;
  border-bottom:1px solid var(--ap-border) !important;
  border-radius:0 !important;
  padding:20px 0 !important;
  backdrop-filter:none !important;
}
.faq-item:hover{ border-color:var(--ap-border-2) !important; }
.faq-item.open{ background:transparent !important; border-color:var(--ap-border-2) !important; }
.faq-q, .faq-item h3{
  color:var(--ap-text) !important;
  font-size:1.05rem !important;
  font-weight:500 !important;
}
.faq-a, .faq-item p, .faq-a p{
  color:var(--ap-text-2) !important;
}
.faq-icon{
  color:var(--ap-text-3) !important;
  border-color:var(--ap-border) !important;
}
.faq-item.open .faq-icon{
  color:var(--ap-accent) !important;
  border-color:var(--ap-accent) !important;
}

/* ---------- 12. FORMS ---------- */
input, textarea, select,
.form-group input, .form-group textarea, .form-group select{
  background:#ffffff !important;
  border:1px solid var(--ap-border-2) !important;
  border-radius:var(--ap-radius-sm) !important;
  color:var(--ap-text) !important;
  font-family:var(--ap-font) !important;
  font-size:15px !important;
  padding:12px 14px !important;
  outline:none !important;
  transition:border-color 0.2s ease, box-shadow 0.2s ease !important;
  min-height:44px;
  width:100%;
}
input:focus, textarea:focus, select:focus,
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{
  border-color:var(--ap-accent) !important;
  box-shadow:0 0 0 3px rgba(74,24,224,0.15) !important;
  background:#ffffff !important;
}
input::placeholder, textarea::placeholder{
  color:var(--ap-text-4) !important;
}
label, .form-group label{
  color:var(--ap-text) !important;
  font-size:13px !important;
  font-weight:500 !important;
}
.contact-form-box{
  background:var(--ap-bg-card) !important;
  border:1px solid var(--ap-border) !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
}
.contact-left h3{ color:var(--ap-text) !important; }
.contact-left p, .contact-detail{ color:var(--ap-text-3) !important; }
.contact-detail-icon{
  background:rgba(74,24,224,0.08) !important;
  border:1px solid rgba(74,24,224,0.2) !important;
  color:var(--ap-accent) !important;
}
.soc-btn{
  background:var(--ap-bg-card) !important;
  border:1px solid var(--ap-border) !important;
  color:var(--ap-text-3) !important;
}
.soc-btn:hover{
  border-color:var(--ap-accent) !important;
  color:var(--ap-accent) !important;
}
.login-gate{
  background:rgba(74,24,224,0.06) !important;
  border:1px solid rgba(74,24,224,0.18) !important;
  border-radius:var(--ap-radius) !important;
}
.login-gate p{ color:var(--ap-text-2) !important; }

/* ---------- 13. FOOTER ---------- */
footer{
  background:var(--ap-bg-soft) !important;
  background-image:none !important;
  color:var(--ap-text-3) !important;
  padding:40px 22px 24px !important;
  border-top:1px solid var(--ap-border) !important;
  margin-top:0;
  position:relative !important;
  z-index:1;
}
footer a, .footer-col ul li a,
.footer-brand p, .footer-lang,
.footer-bottom-links a, .footer-copy{
  color:var(--ap-text-2) !important;
  font-size:12px !important;
  text-decoration:none !important;
}
footer a:hover, .footer-col ul li a:hover,
.footer-bottom-links a:hover{
  color:var(--ap-accent) !important;
  text-decoration:underline !important;
}
footer h4, footer h3, .footer-col h4{
  color:var(--ap-text) !important;
  font-size:12px !important;
  font-weight:600 !important;
}
footer p, footer li{
  color:var(--ap-text-3) !important;
  font-size:12px !important;
}
.footer-bottom, [class*="copyright"]{
  border-top:1px solid var(--ap-border) !important;
  margin-top:32px !important;
  padding-top:20px !important;
  color:var(--ap-text-4) !important;
  font-size:11px !important;
}
.footer-social .soc-btn{
  background:#ffffff !important;
  border:1px solid var(--ap-border) !important;
}

/* ---------- 14. ANCHOR / SCROLL ---------- */
section[id]{ scroll-margin-top:64px; }

/* ---------- 15. BADGES / TAGS / CHIPS ---------- */
.badge, .tag, .chip, .pill{
  background:rgba(74,24,224,0.08) !important;
  color:var(--ap-accent) !important;
  border:1px solid rgba(74,24,224,0.18) !important;
  border-radius:980px !important;
  font-size:12px !important;
  font-weight:500 !important;
  padding:4px 10px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

/* ---------- 16. MODALS / TOASTS ---------- */
.modal, .modal-content, [class*="modal-content"]{
  background:#ffffff !important;
  color:var(--ap-text) !important;
  border-radius:var(--ap-radius) !important;
  border:1px solid var(--ap-border) !important;
  box-shadow:0 20px 60px rgba(0,0,0,0.15) !important;
}
.modal h2, .modal h3{
  color:var(--ap-text) !important;
  -webkit-text-fill-color:var(--ap-text) !important;
  background:none !important;
}
.modal-backdrop, .overlay{
  background:rgba(0,0,0,0.4) !important;
  backdrop-filter:blur(4px) !important;
}
.toast{
  background:#ffffff !important;
  border:1px solid var(--ap-border-2) !important;
  color:var(--ap-text) !important;
  border-radius:var(--ap-radius-sm) !important;
  box-shadow:0 8px 24px rgba(0,0,0,0.12) !important;
}

/* ---------- 16b. AUTH MODAL (Apple light) ---------- */
#auth-modal .modal{
  background:#ffffff !important;
  border:1px solid var(--ap-border) !important;
  border-radius:var(--ap-radius) !important;
  padding:28px 28px 24px !important;
  max-width:420px !important;
  box-shadow:0 30px 80px rgba(0,0,0,0.18) !important;
  text-align:left !important;
}
#auth-modal h2, #auth-modal #auth-title{
  font-family:var(--ap-font) !important;
  font-size:1.5rem !important;
  font-weight:600 !important;
  letter-spacing:-0.02em !important;
  color:var(--ap-text) !important;
  -webkit-text-fill-color:var(--ap-text) !important;
  text-align:center !important;
  margin:0 0 4px !important;
}
#auth-modal .sub-sm, #auth-modal #auth-subtitle{
  color:var(--ap-text-3) !important;
  font-size:0.9rem !important;
  text-align:center !important;
  margin:0 0 18px !important;
  display:block !important;
}
#auth-modal .modal-close{
  position:absolute !important;
  top:14px !important; right:14px !important;
  width:28px !important; height:28px !important;
  border-radius:50% !important;
  background:var(--ap-bg-soft) !important;
  border:1px solid var(--ap-border) !important;
  color:var(--ap-text-2) !important;
  font-size:13px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
#auth-modal .modal-close:hover{
  background:var(--ap-border) !important;
  color:var(--ap-text) !important;
}
#auth-modal .auth-tabs{
  display:flex !important;
  gap:4px !important;
  background:var(--ap-bg-soft) !important;
  border:1px solid var(--ap-border) !important;
  border-radius:10px !important;
  padding:4px !important;
  margin:0 0 18px !important;
}
#auth-modal .auth-tab{
  flex:1 !important;
  padding:8px 10px !important;
  font-family:var(--ap-font) !important;
  font-size:13px !important;
  font-weight:500 !important;
  border:none !important;
  border-radius:7px !important;
  background:transparent !important;
  color:var(--ap-text-3) !important;
  cursor:pointer !important;
  transition:background 0.18s ease, color 0.18s ease !important;
}
#auth-modal .auth-tab.active{
  background:#ffffff !important;
  color:var(--ap-text) !important;
  box-shadow:0 1px 2px rgba(0,0,0,0.06) !important;
}
#auth-modal .google-btn{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:10px 14px !important;
  background:#ffffff !important;
  color:var(--ap-text) !important;
  border:1px solid var(--ap-border-2) !important;
  border-radius:10px !important;
  font-family:var(--ap-font) !important;
  font-size:14px !important;
  font-weight:500 !important;
  cursor:pointer !important;
  margin:0 0 14px !important;
  transition:background 0.18s ease, border-color 0.18s ease !important;
}
#auth-modal .google-btn:hover{
  background:var(--ap-bg-soft) !important;
  border-color:var(--ap-text-4) !important;
}
#auth-modal .google-btn svg{ width:18px !important; height:18px !important; }
#auth-modal .or-div{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:14px 0 !important;
  color:var(--ap-text-4) !important;
  font-size:11px !important;
  font-family:var(--ap-font) !important;
  text-transform:uppercase !important;
  letter-spacing:0.08em !important;
}
#auth-modal .or-div::before,
#auth-modal .or-div::after{
  content:'' !important;
  flex:1 !important;
  height:1px !important;
  background:var(--ap-border) !important;
}
#auth-modal .form-group{ margin-bottom:12px !important; }
#auth-modal .form-group label{
  display:block !important;
  margin-bottom:6px !important;
  font-size:13px !important;
  color:var(--ap-text-2) !important;
  font-weight:500 !important;
}
#auth-modal #login-form .btn-primary,
#auth-modal #register-form .btn-primary{
  width:100% !important;
  margin-top:8px !important;
  padding:11px 16px !important;
  border-radius:980px !important;
  font-size:15px !important;
  font-weight:500 !important;
}

/* ---------- 16c. NAIQ-SYSTEM PAGE OVERRIDES ---------- */
.sys-selector .sys-grid{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  grid-template-columns:none !important;
  max-width:none !important;
  margin:14px 0 0 !important;
}
.sys-chip{
  padding:6px 14px !important;
  border-radius:980px !important;
  border:1px solid var(--ap-border) !important;
  background:var(--ap-bg-soft) !important;
  color:var(--ap-text-2) !important;
  font-family:var(--ap-font) !important;
  font-size:13px !important;
  font-weight:500 !important;
  backdrop-filter:none !important;
  flex:0 0 auto !important;
  width:auto !important;
}
.sys-chip:hover{
  background:#ffffff !important;
  border-color:var(--ap-border-2) !important;
  color:var(--ap-text) !important;
}
.sys-chip.active{
  background:rgba(74,24,224,0.10) !important;
  border-color:var(--ap-accent) !important;
  color:var(--ap-accent) !important;
}
.sel-label, .sec-label, .kb-date-label{
  color:var(--ap-text-3) !important;
  font-family:var(--ap-font) !important;
  letter-spacing:0.12em !important;
}
.sec-label::after, .kb-date-label::after{ background:var(--ap-border) !important; }
.sys-tag{
  color:var(--ap-accent) !important;
  font-family:var(--ap-font) !important;
  opacity:1 !important;
}
.sys-tag::before{ background:var(--ap-accent) !important; opacity:0.6 !important; }
.sys-h1{
  font-family:var(--ap-font) !important;
  background:none !important;
  background-image:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:var(--ap-text) !important;
  color:var(--ap-text) !important;
  letter-spacing:-0.025em !important;
  font-weight:600 !important;
}
.sys-sub{
  font-family:var(--ap-font) !important;
  font-style:normal !important;
  color:var(--ap-text-3) !important;
}
.sys-desc{ color:var(--ap-text-2) !important; }
.sys-badge{
  background:var(--ap-bg-soft) !important;
  border:1px solid var(--ap-border) !important;
  color:var(--ap-text-3) !important;
  font-family:var(--ap-font) !important;
  font-size:11px !important;
}
.feat-card{
  background:var(--ap-bg-card) !important;
  border:1px solid var(--ap-border) !important;
  border-radius:var(--ap-radius) !important;
  backdrop-filter:none !important;
}
.feat-card:hover{
  background:#ffffff !important;
  border-color:var(--ap-border-2) !important;
  box-shadow:0 8px 24px rgba(0,0,0,0.06) !important;
}
.feat-card::before{ display:none !important; }
.feat-icon{
  background:var(--ap-bg-soft) !important;
  border:1px solid var(--ap-border) !important;
  color:var(--ap-accent) !important;
}
.feat-title{
  color:var(--ap-text) !important;
  -webkit-text-fill-color:var(--ap-text) !important;
  font-weight:600 !important;
  font-size:0.95rem !important;
}
.feat-desc{ color:var(--ap-text-3) !important; line-height:1.6 !important; }
.feat-status{ font-family:var(--ap-font) !important; }
.status-research{ background:rgba(251,146,60,0.10) !important; border:1px solid rgba(251,146,60,0.30) !important; color:#c2410c !important; }
.status-dev{ background:rgba(16,185,129,0.10) !important; border:1px solid rgba(16,185,129,0.30) !important; color:#047857 !important; }
.status-live{ background:rgba(74,24,224,0.10) !important; border:1px solid rgba(74,24,224,0.30) !important; color:var(--ap-accent) !important; }
.kb-card{
  background:var(--ap-bg-card) !important;
  border:1px solid var(--ap-border) !important;
  backdrop-filter:none !important;
}
.kb-card:hover{ background:#ffffff !important; border-color:var(--ap-border-2) !important; }
.kb-headline{ color:var(--ap-text) !important; }
.kb-source-tag{ color:var(--ap-text-3) !important; border-color:var(--ap-border) !important; font-family:var(--ap-font) !important; }
.kb-summary{ color:var(--ap-text-2) !important; }
.kb-insight-box{ background:rgba(74,24,224,0.06) !important; border-left:2px solid var(--ap-accent) !important; }
.kb-insight-label{ color:var(--ap-accent) !important; font-family:var(--ap-font) !important; }
.kb-insight-text{ color:var(--ap-text-2) !important; }
.kb-action{ color:var(--ap-text-3) !important; }
.kb-link{ color:var(--ap-accent) !important; font-family:var(--ap-font) !important; }
.kb-empty{ color:var(--ap-text-3) !important; }
.load-more{
  background:var(--ap-bg-soft) !important;
  border:1px solid var(--ap-border) !important;
  color:var(--ap-text-2) !important;
  border-radius:980px !important;
}
.load-more:hover{ background:#ffffff !important; border-color:var(--ap-border-2) !important; color:var(--ap-text) !important; }
.spinner{ color:var(--ap-text-3) !important; }
.spin{ border-color:var(--ap-border) !important; border-top-color:var(--ap-accent) !important; }
.section-divider{ background:var(--ap-border) !important; }
.back-btn{ color:var(--ap-text-3) !important; }
.back-btn:hover{ color:var(--ap-text) !important; }

/* ---------- 16d. NAIQ-ONBOARDING PAGE OVERRIDES ---------- */
#plan-selector{ text-align:center !important; }
.sel-eyebrow, .wiz-plan-label, .step-h, .ns-label, .pc-badge{
  font-family:var(--ap-font) !important;
  color:var(--ap-text-3) !important;
  letter-spacing:0.12em !important;
  opacity:1 !important;
}
.sel-h1, .wiz-title, .success-title{
  font-family:var(--ap-font) !important;
  background:none !important;
  background-image:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:var(--ap-text) !important;
  color:var(--ap-text) !important;
  font-weight:600 !important;
  letter-spacing:-0.025em !important;
}
.sel-sub, .wiz-sub, .success-sub, .auth-gate-sub{
  color:var(--ap-text-3) !important;
  font-family:var(--ap-font) !important;
}
.auth-gate-title{
  color:var(--ap-text) !important;
  font-family:var(--ap-font) !important;
  font-weight:600 !important;
}

/* Plan cards (selector) */
.plan-card{
  background:var(--ap-bg-card) !important;
  border:1px solid var(--ap-border) !important;
  border-radius:var(--ap-radius) !important;
  backdrop-filter:none !important;
}
.plan-card::after{ display:none !important; }
.plan-card:hover{
  background:#ffffff !important;
  border-color:var(--ap-border-2) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 8px 24px rgba(0,0,0,0.06) !important;
}
.plan-card.selected{
  background:#ffffff !important;
  border-color:var(--ap-accent) !important;
  box-shadow:0 0 0 1px var(--ap-accent), 0 12px 30px rgba(74,24,224,0.10) !important;
}
.pc-name{ color:var(--ap-text) !important; font-weight:600 !important; }
.pc-price{ color:var(--ap-accent) !important; font-family:var(--ap-font) !important; }
.pc-desc{ color:var(--ap-text-3) !important; }
.pc-check{
  background:var(--ap-bg-soft) !important;
  border:1px solid var(--ap-border-2) !important;
  color:var(--ap-text-3) !important;
}

/* Wizard buttons & nav */
.sel-btn, .btn-next{
  background:var(--ap-accent) !important;
  color:#ffffff !important;
  border-radius:980px !important;
  font-family:var(--ap-font) !important;
  font-weight:500 !important;
}
.sel-btn:hover, .btn-next:hover{
  background:var(--ap-accent-h) !important;
  transform:none !important;
  box-shadow:none !important;
  filter:none !important;
}
.btn-back, .btn-home{
  background:transparent !important;
  border:1px solid var(--ap-border-2) !important;
  color:var(--ap-text-2) !important;
  border-radius:980px !important;
  font-family:var(--ap-font) !important;
}
.btn-back:hover, .btn-home:hover{
  background:var(--ap-bg-soft) !important;
  border-color:var(--ap-text-4) !important;
  color:var(--ap-text) !important;
}
.btn-signin{
  background:var(--ap-accent) !important;
  border-radius:980px !important;
  font-family:var(--ap-font) !important;
}
.btn-signin:hover{ background:var(--ap-accent-h) !important; transform:none !important; }

/* Progress bar */
.pb-dot{
  background:var(--ap-bg-soft) !important;
  border:1.5px solid var(--ap-border-2) !important;
  color:var(--ap-text-3) !important;
  font-family:var(--ap-font) !important;
}
.pb-dot.done{ background:var(--ap-accent) !important; border-color:var(--ap-accent) !important; color:#fff !important; }
.pb-dot.active{
  background:rgba(74,24,224,0.10) !important;
  border-color:var(--ap-accent) !important;
  color:var(--ap-accent) !important;
  box-shadow:none !important;
}
.pb-label{ color:var(--ap-text-4) !important; font-family:var(--ap-font) !important; }
.pb-label.active{ color:var(--ap-text) !important; }
.pb-label.done{ color:var(--ap-text-2) !important; }
.pb-line{ background:var(--ap-border) !important; }
.pb-line.done{ background:var(--ap-accent) !important; opacity:0.6 !important; }

/* Step card / forms */
.step-card, .next-steps{
  background:var(--ap-bg-card) !important;
  border:1px solid var(--ap-border) !important;
  border-radius:var(--ap-radius) !important;
  backdrop-filter:none !important;
}
.step-card::before, .next-steps::before{ display:none !important; }
.step-h{ color:var(--ap-accent) !important; }
.form-group label{
  color:var(--ap-text) !important;
  font-family:var(--ap-font) !important;
  font-weight:500 !important;
}
.form-group label span{ color:var(--ap-accent) !important; }
#wizard input, #wizard select, #wizard textarea,
.step-card input, .step-card select, .step-card textarea{
  background:#ffffff !important;
  border:1px solid var(--ap-border-2) !important;
  color:var(--ap-text) !important;
  border-radius:var(--ap-radius-sm) !important;
  font-family:var(--ap-font) !important;
}
#wizard input::placeholder, #wizard textarea::placeholder,
.step-card input::placeholder, .step-card textarea::placeholder{
  color:var(--ap-text-4) !important;
}
#wizard select option{ background:#ffffff !important; color:var(--ap-text) !important; }
#wizard input:focus, #wizard select:focus, #wizard textarea:focus,
.step-card input:focus, .step-card select:focus, .step-card textarea:focus{
  border-color:var(--ap-accent) !important;
  background:#ffffff !important;
  box-shadow:0 0 0 3px rgba(74,24,224,0.15) !important;
}

/* Radio / Checkbox / Domain options */
.radio-opt, .check-opt, .domain-opt{
  background:var(--ap-bg-soft) !important;
  border:1px solid var(--ap-border) !important;
  color:var(--ap-text-2) !important;
  font-family:var(--ap-font) !important;
  border-radius:10px !important;
}
.radio-opt:hover, .check-opt:hover, .domain-opt:hover{
  background:#ffffff !important;
  border-color:var(--ap-border-2) !important;
  color:var(--ap-text) !important;
}
.radio-opt.sel, .check-opt.sel, .domain-opt.sel{
  background:rgba(74,24,224,0.10) !important;
  border-color:var(--ap-accent) !important;
  color:var(--ap-accent) !important;
}

/* Rating slider */
.rating-track{ background:var(--ap-border) !important; }
.rating-fill{ background:var(--ap-accent) !important; }
input[type=range]::-webkit-slider-thumb{ background:var(--ap-accent) !important; box-shadow:none !important; }
.rating-val{ color:var(--ap-accent) !important; font-family:var(--ap-font) !important; }

/* Score preview & info box */
.score-preview, .info-box{
  background:rgba(74,24,224,0.06) !important;
  border:1px solid rgba(74,24,224,0.18) !important;
  border-left:2px solid var(--ap-accent) !important;
  border-radius:0 10px 10px 0 !important;
}
.score-ring{
  border:2.5px solid var(--ap-accent) !important;
  color:var(--ap-accent) !important;
  background:rgba(74,24,224,0.06) !important;
  font-family:var(--ap-font) !important;
}
.score-info p, .info-box{ color:var(--ap-text-2) !important; }
.score-info strong{ color:var(--ap-text) !important; }

/* Notes */
.step-save-note, .required-note, .char-count{
  color:var(--ap-text-3) !important;
  font-style:normal !important;
  font-family:var(--ap-font) !important;
}

/* Success / next steps */
.success-glow{
  background:rgba(74,24,224,0.08) !important;
  border:2px solid var(--ap-accent) !important;
  box-shadow:none !important;
  animation:none !important;
}
.ns-num{
  background:var(--ap-bg-soft) !important;
  border:1.5px solid var(--ap-accent) !important;
  color:var(--ap-accent) !important;
  font-family:var(--ap-font) !important;
}
.ns-text strong{ color:var(--ap-text) !important; font-family:var(--ap-font) !important; }
.ns-text p{ color:var(--ap-text-3) !important; }
.resp-badge{
  background:rgba(74,24,224,0.06) !important;
  border:1px solid rgba(74,24,224,0.30) !important;
  color:var(--ap-accent) !important;
  font-family:var(--ap-font) !important;
}
.resp-dot{ background:var(--ap-accent) !important; box-shadow:none !important; }

/* Nav right (plan pill) */
.nav-right{ color:var(--ap-text-3) !important; }
.nav-plan-pill{
  background:rgba(74,24,224,0.08) !important;
  border:1px solid rgba(74,24,224,0.30) !important;
  color:var(--ap-accent) !important;
  font-family:var(--ap-font) !important;
  border-radius:980px !important;
}

/* Loading overlay & spinner */
#loading-overlay{
  background:rgba(255,255,255,0.92) !important;
  backdrop-filter:blur(8px) !important;
}
.load-spin{ border-color:var(--ap-border) !important; border-top-color:var(--ap-accent) !important; }
.load-txt{ color:var(--ap-text-3) !important; font-family:var(--ap-font) !important; }

/* Toast */
.toast{ backdrop-filter:none !important; font-family:var(--ap-font) !important; }
.toast.success{ background:#ffffff !important; border:1px solid rgba(16,185,129,0.40) !important; color:#047857 !important; }
.toast.error{ background:#ffffff !important; border:1px solid rgba(239,68,68,0.40) !important; color:#b91c1c !important; }
.toast.info{ background:#ffffff !important; border:1px solid rgba(74,24,224,0.40) !important; color:var(--ap-accent) !important; }

.section-divider{ background:var(--ap-border) !important; }

/* ---------- 17. POLICY / LEGAL PAGE STYLES ---------- */
.policy-table{
  width:100%;
  border-collapse:collapse;
  margin:1.2rem 0;
  font-size:0.9rem;
}
.policy-table th, .policy-table td{
  text-align:left !important;
  padding:0.8rem 0.9rem !important;
  border-bottom:1px solid var(--ap-border) !important;
  vertical-align:top;
  color:var(--ap-text-2) !important;
}
.policy-table th{
  font-family:var(--ap-font) !important;
  font-size:11px !important;
  letter-spacing:0.04em !important;
  text-transform:uppercase !important;
  color:var(--ap-text-3) !important;
  background:var(--ap-bg-soft) !important;
  font-weight:600 !important;
}
.contact-box{
  background:rgba(74,24,224,0.06) !important;
  border:1px solid rgba(74,24,224,0.18) !important;
  border-radius:var(--ap-radius) !important;
  color:var(--ap-text-2) !important;
}
.contact-box h3{ color:var(--ap-accent) !important; }
.last-updated{
  font-family:var(--ap-font) !important;
  color:var(--ap-text-3) !important;
  border-bottom:1px solid var(--ap-border) !important;
}
.breadcrumb a{ color:var(--ap-text-3) !important; }
.breadcrumb a:hover{ color:var(--ap-accent) !important; }
.breadcrumb .cur{ color:var(--ap-text) !important; }
.breadcrumb .sep{ color:var(--ap-text-4) !important; }

/* ---------- 18. IMAGES ---------- */
img{ max-width:100%; height:auto; }

/* ---------- 19. SELECTION & SCROLLBAR ---------- */
::selection{
  background:rgba(74,24,224,0.2);
  color:var(--ap-text);
}
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.15); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,0.3); }

/* ---------- 20. REVEAL ANIMATIONS — calm down ---------- */
.reveal{ opacity:1 !important; transform:none !important; }

/* ---------- 21. MOBILE MENU ---------- */
.mobile-menu, .nav-mobile, #mobile-menu{
  display:none;
  position:fixed !important;
  top:var(--ap-nav-h) !important;
  left:0 !important;
  right:0 !important;
  background:rgba(255,255,255,0.97) !important;
  backdrop-filter:saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px) !important;
  border-bottom:1px solid var(--ap-border) !important;
  padding:18px 22px !important;
  flex-direction:column !important;
  gap:4px !important;
  z-index:9998 !important;
  max-height:calc(100vh - var(--ap-nav-h));
  overflow-y:auto;
}
.mobile-menu.open, #mobile-menu.open{ display:flex !important; }
.mobile-menu a, #mobile-menu a{
  color:var(--ap-text) !important;
  font-size:17px !important;
  font-weight:400 !important;
  padding:14px 0 !important;
  border-bottom:1px solid var(--ap-border) !important;
  text-decoration:none !important;
  display:block !important;
  background:none !important;
  cursor:pointer;
}
.mobile-menu a:last-of-type{ border-bottom:none !important; }
.mobile-menu .btn{
  width:100% !important;
  max-width:none !important;
  padding:12px !important;
  font-size:15px !important;
  border-radius:980px !important;
  margin-top:12px !important;
  text-align:center !important;
}

/* ---------- 22. RESPONSIVE BREAKPOINTS ---------- */
@media (max-width: 833px){
  nav .nav-links, #main-nav .nav-links{ display:none !important; }
  nav .nav-actions, #main-nav .nav-actions{ gap:6px !important; }
  nav .nav-actions .btn, #main-nav .nav-actions .btn{
    font-size:12px !important;
    padding:5px 10px !important;
    height:26px !important;
  }
  nav #nav-user, nav #nav-user-wrap{ display:none !important; }
  nav .hamburger, #main-nav .hamburger{ display:flex !important; }
  nav .nav-inner, #main-nav .nav-inner{ padding:0 16px !important; }
  nav .nav-back{ font-size:11px !important; }

  section{ padding:60px 18px !important; }
  #hero, section#hero{
    padding-top:64px !important;
    padding-bottom:56px !important;
  }
  .wrap{ padding:96px 18px 56px !important; }
  .hero-h1, #hero h1{
    font-size:clamp(2rem, 8vw, 2.6rem) !important;
  }
  .hero-p, #hero p{ font-size:1.05rem !important; }
  .hero-ctas{
    flex-direction:column !important;
    width:100% !important;
    gap:12px !important;
    align-items:center !important;
  }
  .hero-ctas .btn, .hero-ctas a{
    width:100% !important;
    max-width:320px !important;
  }
  .hero-stats{
    gap:24px !important;
    margin-top:36px !important;
    padding-top:36px !important;
  }
  .sec-h, h2.sec-h{
    font-size:clamp(1.7rem, 7vw, 2.2rem) !important;
  }
  .products-grid, .sys-grid, .plan-cards, .pricing-grid, .plans{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .steps-wrap{ grid-template-columns:1fr 1fr !important; gap:18px !important; }
  .prod, .plan, .card, .feat-card{ padding:24px !important; }
  .upd-slide{ padding:24px !important; }
  .upd-inner{ flex-direction:column !important; gap:18px !important; }
  .upd-img{ flex:0 0 auto !important; width:100% !important; height:200px !important; }
  footer{ padding:32px 18px 20px !important; }
}

@media (max-width: 480px){
  nav, #main-nav{ height:48px !important; }
  nav .nav-inner, #main-nav .nav-inner{
    height:48px !important;
    padding:0 14px !important;
  }
  nav .logo-text, #main-nav .logo-text{ font-size:13px !important; }
  body{ padding-top:48px !important; }
  section{ padding:48px 16px !important; }
  .wrap{ padding:80px 16px 48px !important; }
  .hero-h1, #hero h1{ font-size:2rem !important; }
  .hero-p, #hero p{ font-size:1rem !important; }
  .sec-h, h2.sec-h{ font-size:1.6rem !important; }
  .plan-price{ font-size:1.8rem !important; }
  .steps-wrap{ grid-template-columns:1fr !important; }
  .hero-stats{
    gap:16px !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
  }
  .hstat{ flex:1 1 40%; }
  .hstat-n{ font-size:1.5rem !important; }
}

/* ---------- 23. REDUCE MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---------- 24. FORCED DARK TEXT IN MODALS / PAYMENT (added 2026-05) ---------- */
/* Every text descendant inside any modal must be readable on white */
.modal, .modal *, .modal-content, .modal-content *{
  color:var(--ap-text) !important;
}
.modal .sub-sm, .modal p, .modal label, .modal .form-group label,
.modal small, .modal .form-hint{
  color:var(--ap-text-2) !important;
}
.modal .form-group input,
.modal .form-group select,
.modal .form-group textarea{
  background:#ffffff !important;
  border:1px solid var(--ap-border-2) !important;
  color:var(--ap-text) !important;
  -webkit-text-fill-color:var(--ap-text) !important;
}
.modal .form-group input::placeholder,
.modal .form-group textarea::placeholder{
  color:var(--ap-text-4) !important;
}
.modal .form-group input:focus,
.modal .form-group select:focus,
.modal .form-group textarea:focus{
  border-color:var(--ap-accent) !important;
  background:#ffffff !important;
  box-shadow:0 0 0 3px rgba(74,24,224,0.12) !important;
}
.modal-close{
  background:rgba(0,0,0,0.06) !important;
  border:1px solid rgba(0,0,0,0.08) !important;
  color:var(--ap-text) !important;
}
.modal-close:hover{ background:rgba(0,0,0,0.10) !important; }

/* Payment-specific elements */
#payment-modal .plan-sum-name, #payment-modal .plan-summary,
#pay-terms-box, #pay-terms-box *{
  color:var(--ap-text) !important;
}
#pay-terms-box{ background:rgba(74,24,224,0.04) !important; border-color:rgba(74,24,224,0.18) !important; }
#pay-terms-box a{ color:var(--ap-accent) !important; }
#pay-terms-box ul li strong{ color:var(--ap-text) !important; }

/* Auth modal extras — Google button + tabs */
.google-btn{ background:#ffffff !important; color:var(--ap-text) !important; border:1px solid var(--ap-border-2) !important; }
.google-btn:hover{ background:#f5f5f7 !important; }
.or-div{ color:var(--ap-text-3) !important; }
.auth-tab{ color:var(--ap-text-3) !important; }
.auth-tab.active{ color:var(--ap-text) !important; background:rgba(0,0,0,0.04) !important; }

/* Toasts: dark text on white surface */
.toast{ color:var(--ap-text) !important; }

/* Verify-screen text */
#verify-screen, #verify-screen *{ color:var(--ap-text) !important; }
#verify-screen p{ color:var(--ap-text-2) !important; }
#verify-screen strong{ color:var(--ap-text) !important; -webkit-text-fill-color:var(--ap-text) !important; }

/* ---------- 26. ONBOARDING / PLAN-CONFIRMATION PAGE — dark text on white ---------- */
/* naiq-onboarding.html uses white text on dark by default; force readable colours. */
body.day-mode .sel-eyebrow,
body.day-mode .pb-label,
body.day-mode .step-save-note,
body.day-mode .nav-right{ color:var(--ap-text-3) !important; }

body.day-mode .sel-sub,
body.day-mode .pc-desc,
body.day-mode .wiz-sub,
body.day-mode .success-sub,
body.day-mode .auth-gate-sub,
body.day-mode .domain-opt{ color:var(--ap-text-2) !important; }

body.day-mode .pc-name,
body.day-mode .logo-text,
body.day-mode .auth-gate-title{ color:var(--ap-text) !important; }

body.day-mode .sel-btn,
body.day-mode .btn-next{ color:#ffffff !important; }
body.day-mode .btn-back{
  color:var(--ap-text-2) !important;
  background:#ffffff !important;
  border:1px solid var(--ap-border-2) !important;
}
body.day-mode .btn-home{
  color:var(--ap-text) !important;
  background:#ffffff !important;
  border:1px solid var(--ap-border-2) !important;
}

body.day-mode .pb-dot{
  background:#ffffff !important;
  border:1.5px solid var(--ap-border-2) !important;
  color:var(--ap-text-3) !important;
}
body.day-mode .domain-opt{
  background:#ffffff !important;
  border:1px solid var(--ap-border) !important;
}
body.day-mode .domain-opt:hover{ background:#f5f5f7 !important; color:var(--ap-text) !important; }
body.day-mode .domain-opt.selected{
  background:rgba(74,24,224,.08) !important;
  border-color:var(--ap-accent) !important;
  color:var(--ap-accent) !important;
}

/* Catch-all for any remaining white text inside the onboarding body */
body.day-mode .wiz-card, body.day-mode .wiz-card *{ color:var(--ap-text) }
body.day-mode .wiz-card label, body.day-mode .wiz-card .form-hint{ color:var(--ap-text-2) !important; }
body.day-mode strong, body.day-mode b{ color:var(--ap-text) !important; -webkit-text-fill-color:var(--ap-text) !important; }

/* Payment-summary block inside payment modal */
body.day-mode .plan-summary,
body.day-mode .plan-sum-name,
body.day-mode .plan-sum-price{ color:var(--ap-text) !important; background:#f5f5f7 !important; }
body.day-mode .plan-sum-name{ font-weight:600 !important; }
body.day-mode .plan-sum-price{ color:var(--ap-text-2) !important; background:transparent !important; }

/* ---------- 25. APPLE-STORE RAIL — Premium horizontal (9 systems) ---------- */
/* Single-row Apple-style rail with per-card accent borders, polished
   shadows, edge fades, arrow paging (desktop) + native swipe (mobile). */

.rail-wrap{
  position:relative;
  max-width:1380px;
  margin:0 auto;
  padding:0 64px;
}
/* Soft edge fades — hint that there's more off-screen */
.rail-wrap::before,
.rail-wrap::after{
  content:'';
  position:absolute;
  top:14px;bottom:36px;
  width:56px;
  pointer-events:none;
  z-index:3;
}
.rail-wrap::before{left:64px;background:linear-gradient(to right,#fbfbfd 0%,rgba(251,251,253,0) 100%)}
.rail-wrap::after{right:64px;background:linear-gradient(to left,#fbfbfd 0%,rgba(251,251,253,0) 100%)}

/* Rail container — force flex over the original grid */
#products-rail{
  display:flex!important;
  grid-template-columns:none!important;
  gap:22px!important;
  overflow-x:auto;overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-padding:0 16px;
  padding:18px 8px 40px;
  background:transparent!important;
  box-shadow:none!important;border-radius:0!important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;user-select:none;-webkit-user-select:none;
}
#products-rail.dragging{cursor:grabbing;scroll-snap-type:none}
#products-rail::-webkit-scrollbar{display:none}

/* Card surface — visible accent border using each card's --pa colour */
#products-rail .prod{
  flex:0 0 322px!important;
  scroll-snap-align:start;
  position:relative;
  border-radius:22px!important;
  padding:30px 26px 30px!important;
  background:#ffffff!important;
  border:1.5px solid color-mix(in srgb, var(--pa) 38%, rgba(0,0,0,.06)) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 14px 32px color-mix(in srgb, var(--pa) 10%, rgba(0,0,0,.06)),
    inset 0 0 0 1px color-mix(in srgb, var(--pa) 6%, transparent) !important;
  transition:
    transform .38s cubic-bezier(.22,1,.36,1),
    box-shadow .38s cubic-bezier(.22,1,.36,1),
    border-color .3s ease !important;
  cursor:pointer;
  overflow:hidden;
}
/* Accent top-strip in the card's --pa colour */
#products-rail .prod::before{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  top:0;left:0;right:0;height:3px !important;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--pa) 92%, transparent),
    color-mix(in srgb, var(--pa) 50%, transparent)) !important;
  opacity:.95 !important;
  border-radius:22px 22px 0 0 !important;
  pointer-events:none;
  z-index:1;
}
#products-rail .prod::after{ display:none !important; }
#products-rail .prod:hover{
  transform:translateY(-8px);
  border-color:color-mix(in srgb, var(--pa) 70%, rgba(0,0,0,.04)) !important;
  box-shadow:
    0 4px 8px rgba(0,0,0,.04),
    0 30px 64px color-mix(in srgb, var(--pa) 24%, rgba(0,0,0,.10)) !important;
}
#products-rail.dragging .prod{pointer-events:none}

/* Restore per-card accent identity on icon / num / hover-title */
#products-rail .prod .prod-num{
  border:1px solid color-mix(in srgb, var(--pa) 35%, transparent) !important;
  background:color-mix(in srgb, var(--pa) 10%, #ffffff) !important;
  color:var(--pa) !important;
}
#products-rail .prod .prod-icon{
  border:1px solid color-mix(in srgb, var(--pa) 32%, transparent) !important;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--pa) 14%, #ffffff),
    color-mix(in srgb, var(--pa) 6%, #ffffff)) !important;
  color:var(--pa) !important;
  box-shadow:0 4px 18px color-mix(in srgb, var(--pa) 16%, transparent) !important;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),
             box-shadow .35s ease !important;
}
#products-rail .prod:hover .prod-icon{
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 12px 30px color-mix(in srgb, var(--pa) 26%, transparent) !important;
}
#products-rail .prod .prod-rule{
  background:linear-gradient(90deg, var(--pa), transparent) !important;
  opacity:.6 !important;
  width:40px !important;
  transition:width .4s ease, opacity .4s ease !important;
}
#products-rail .prod:hover .prod-rule{ width:64px !important; opacity:.85 !important; }
#products-rail .prod .prod-feats li::before{
  color:var(--pa) !important;
  opacity:.9 !important;
}
#products-rail .prod:hover .prod-title{ color:var(--pa) !important; }

/* Premium arrow buttons */
.rail-arrow{
  position:absolute;top:calc(50% - 6px);transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  background:#ffffff;border:1px solid rgba(0,0,0,.08);
  box-shadow:0 4px 16px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:center;
  color:#1d1d1f;cursor:pointer;z-index:6;
  transition:transform .22s cubic-bezier(.22,1,.36,1),
             box-shadow .22s ease, background .22s ease, opacity .22s ease;
}
.rail-arrow svg{width:18px;height:18px}
.rail-arrow:hover{
  background:#f5f5f7;
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 8px 22px rgba(0,0,0,.16), 0 2px 4px rgba(0,0,0,.08);
}
.rail-arrow:active{transform:translateY(-50%) scale(.95)}
.rail-prev{left:8px}
.rail-next{right:8px}
.rail-arrow[disabled]{opacity:.3;cursor:not-allowed;pointer-events:none}

/* Tablet */
@media(max-width:980px){
  .rail-wrap{padding:0 48px}
  .rail-wrap::before{left:48px}
  .rail-wrap::after{right:48px}
  #products-rail .prod{flex:0 0 292px!important;padding:26px 22px!important}
  .rail-arrow{width:44px;height:44px}
}

/* Mobile — hide arrows + edge fades, native touch swipe */
@media(max-width:560px){
  .rail-wrap{padding:0 12px}
  .rail-wrap::before,.rail-wrap::after{display:none}
  .rail-arrow{display:none}
  #products-rail{padding:14px 6vw 28px;gap:14px!important;scroll-padding-left:6vw}
  #products-rail .prod{
    flex:0 0 84vw!important;
    padding:24px 20px!important;
    border-radius:20px!important;
    scroll-snap-align:center;
  }
}

/* ============================================================
   27. PAYMENT MODAL — FORCED DARK-TEXT OVERRIDE (2026-05)
   Ensures every label inside the payment / auth / legal modals
   renders dark on the apple-theme light card, regardless of
   inline color:var(--t1) inherited from dark-mode CSS variables.
   ============================================================ */

/* Re-bind --t1 / --t2 / --t3 / --t4 inside any modal so inline
   styles like color:var(--t1,#1d1d1f) resolve to DARK colours.
   This is the cleanest fix for the inline-style strong elements. */
.modal-overlay,
.modal,
.modal *,
#pay-terms-box,
#pay-terms-box *{
  --t1: #1d1d1f !important;
  --t2: #424245 !important;
  --t3: #6e6e73 !important;
  --t4: #86868b !important;
}

/* Highest-specificity body-scoped override (defeats inline + dark-mode :root) */
body .modal,
body .modal *,
body .modal h1, body .modal h2, body .modal h3, body .modal h4, body .modal h5,
body .modal p, body .modal span, body .modal li, body .modal label,
body .modal strong, body .modal b, body .modal em, body .modal i,
body .modal small, body .modal a, body .modal div{
  color:#1d1d1f !important;
  -webkit-text-fill-color:#1d1d1f !important;
}

/* Attribute selector: any element with an inline style referencing --t1
   (this catches every <strong style="color:var(--t1,#1d1d1f)"> in the disclaimer) */
.modal [style*="--t1"],
.modal [style*="var(--t1"],
.modal strong[style],
.modal b[style],
#pay-terms-box [style*="--t1"],
#pay-terms-box [style*="var(--t1"],
#pay-terms-box strong[style],
#pay-terms-box b[style]{
  color:#1d1d1f !important;
  -webkit-text-fill-color:#1d1d1f !important;
  background:transparent !important;
  background-clip:initial !important;
  -webkit-background-clip:initial !important;
}

/* Secondary muted text inside modals */
.modal .sub-sm,
.modal p.sub-sm,
.modal .form-hint,
.modal .form-group label,
#pay-terms-scroll, #pay-terms-scroll p, #pay-terms-scroll li,
#pay-terms-box label,
.modal-close{
  color:#424245 !important;
  -webkit-text-fill-color:#424245 !important;
}

/* Tertiary (lighter caption text) inside modals */
.modal small,
.modal .pass-sug,
#pay-msg, #auth-msg, #verify-msg{
  color:#6e6e73 !important;
  -webkit-text-fill-color:#6e6e73 !important;
}

/* All anchors, prices and accent strings inside any modal — DARK (no blue) */
.modal a,
.modal a:link,
.modal a:visited,
.modal a:hover,
.modal a:active,
#pay-terms-box a,
#pay-terms-box a:link,
#pay-terms-box a:visited,
#pay-terms-box a:hover,
#pay-terms-box a:active,
.modal .plan-sum-price,
.modal .plan-name,
.modal .plan-price{
  color:#1d1d1f !important;
  -webkit-text-fill-color:#1d1d1f !important;
  text-decoration:underline !important;
  text-decoration-color:rgba(0,0,0,0.35) !important;
  text-underline-offset:2px !important;
}
.modal .plan-sum-price,
.modal .plan-name,
.modal .plan-price{
  text-decoration:none !important;
}

/* Plan summary card inside payment modal */
.modal .plan-summary,
#payment-modal .plan-summary{
  background:#f5f5f7 !important;
  border:1px solid rgba(0,0,0,0.08) !important;
}
.modal .plan-sum-name,
#payment-modal .plan-sum-name{
  color:#1d1d1f !important;
  -webkit-text-fill-color:#1d1d1f !important;
  font-weight:600 !important;
}
.modal .plan-sum-price,
#payment-modal .plan-sum-price{
  color:#424245 !important;
  -webkit-text-fill-color:#424245 !important;
  font-weight:500 !important;
}

/* Pre-payment terms gate — neutral background, fully dark text including the header tag */
#pay-terms-box{
  background:#f5f5f7 !important;
  border:1px solid rgba(0,0,0,0.08) !important;
}
#pay-terms-box,
#pay-terms-box *,
#pay-terms-box label,
#pay-terms-box label span,
#pay-terms-box label strong,
#pay-terms-box a,
#pay-terms-box > div:first-child{
  color:#1d1d1f !important;
  -webkit-text-fill-color:#1d1d1f !important;
}
#pay-terms-box .small,
#pay-terms-box p,
#pay-terms-box li{
  color:#424245 !important;
  -webkit-text-fill-color:#424245 !important;
}

/* Pay button — keep white text on coloured background */
#pay-btn,
#pay-btn *,
.modal .btn-primary,
.modal .btn-primary *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
.modal .btn-ghost{
  color:#1d1d1f !important;
  -webkit-text-fill-color:#1d1d1f !important;
}

/* Form inputs inside modals */
.modal .form-group input,
.modal .form-group select,
.modal .form-group textarea{
  color:#1d1d1f !important;
  -webkit-text-fill-color:#1d1d1f !important;
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,0.16) !important;
}
.modal .form-group input::placeholder,
.modal .form-group textarea::placeholder{
  color:#86868b !important;
}

/* ============================================================
   28. OKTA THEME LAYER  (added 2026-06)
   Elegant serif display headlines, royal-blue primary CTAs,
   and the signature indigo→sunset gradient hero. Appended last
   so it wins the cascade. Purely visual — no markup changes.
   ============================================================ */

/* --- 28a. Serif display headlines (Okta signature) --- */
h1, h2,
.hero-h1, #hero h1,
.sec-h, h2.sec-h,
.sys-h1, .sel-h1, .wiz-title, .success-title,
.plan-price, .hstat-n, .vision-h, .vision-num, .upd-title{
  font-family: var(--ap-serif) !important;
  font-optical-sizing: auto;
  letter-spacing: -0.02em !important;
}
.hero-h1, #hero h1{ font-weight: 400 !important; letter-spacing: -0.03em !important; }
.sec-h, h2.sec-h, .sys-h1, .sel-h1, .wiz-title{ font-weight: 500 !important; }
.plan-price, .hstat-n{ font-weight: 500 !important; }

/* --- 28b. Royal-blue primary buttons with a premium lift --- */
.btn-primary, .plan-cta-p, .sel-btn, .btn-next, .btn-signin{
  background: var(--ap-blue) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow: 0 1px 2px rgba(20,18,31,0.06) !important;
}
.btn-primary:hover, .plan-cta-p:hover, .sel-btn:hover, .btn-next:hover, .btn-signin:hover{
  background:#1d0fe0 !important;
  color:#fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 26px rgba(43,27,255,0.32) !important;
}
.btn-primary:active, .plan-cta-p:active{ transform: translateY(0) !important; }

/* Ghost / outline buttons follow the indigo accent */
.btn-ghost, .btn-outline, .plan-cta-g{
  border:1px solid var(--ap-accent) !important;
  color: var(--ap-accent) !important;
}
.btn-ghost:hover, .btn-outline:hover, .plan-cta-g:hover{
  background: var(--ap-accent) !important;
  color:#fff !important;
}

/* --- 28c. The Okta gradient hero --- */
section#hero, #hero{
  background: var(--ok-grad) !important;
  background-image: var(--ok-grad) !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}
/* soft luminous orb for depth */
section#hero::after{
  content:'' !important;
  position:absolute !important;
  right:-12%; top:-30%;
  width:55%; height:140%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.35), rgba(255,255,255,0) 70%) !important;
  pointer-events:none !important;
  z-index:0 !important;
  display:block !important;
  filter:none !important; opacity:1 !important; visibility:visible !important;
}
#hero .hero-inner{ position:relative !important; z-index:1 !important; }

/* Hero typography → white on the gradient */
#hero .hero-eyebrow, #hero .eyebrow, #hero .sec-tag{
  color: rgba(255,255,255,0.85) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
}
#hero .hero-h1, #hero h1, #hero .hero-h1 *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  background:none !important; background-image:none !important;
  text-shadow: 0 1px 30px rgba(20,10,60,0.18) !important;
}
#hero .hero-p, #hero p, #hero .hero-p *, #hero .lead{
  color: rgba(255,255,255,0.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.92) !important;
}
#hero .hstat-n, #hero .hstat-n *{
  color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; background:none !important;
}
#hero .hstat-l{ color: rgba(255,255,255,0.78) !important; }
#hero .hero-stats{ border-top:1px solid rgba(255,255,255,0.28) !important; }

/* Hero buttons — white primary + translucent outline (Okta style) */
#hero .btn-primary, #hero .plan-cta-p{
  background:#ffffff !important;
  color:#14121f !important; -webkit-text-fill-color:#14121f !important;
  box-shadow: 0 8px 26px rgba(20,10,60,0.18) !important;
}
#hero .btn-primary:hover, #hero .plan-cta-p:hover{
  background:#f1eeff !important; transform: translateY(-1px) !important;
  box-shadow: 0 12px 32px rgba(20,10,60,0.26) !important;
}
#hero .btn-outline-lg, #hero .btn-ghost, #hero .btn-outline{
  color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
  border-color: rgba(255,255,255,0.7) !important;
}
#hero .btn-outline-lg:hover{ color:#ffffff !important; text-decoration:underline !important; }
#hero .btn-ghost:hover, #hero .btn-outline:hover{
  background: rgba(255,255,255,0.14) !important; color:#fff !important;
}
/* chips/badges inside hero */
#hero .badge, #hero .tag, #hero .chip, #hero .pill{
  background: rgba(255,255,255,0.16) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.32) !important;
}

/* --- 28d. Misc Okta polish --- */
nav .logo-text, #main-nav .logo-text{ font-weight:600 !important; }
.sec-h::after{ content:none !important; }
.plan.popular{ box-shadow: 0 0 0 1px var(--ap-accent), 0 16px 40px rgba(74,24,224,0.14) !important; }
.upd-cat, .badge, .tag, .chip, .pill{ font-weight:600 !important; }

/* ============================================================
   29. OKTA FLOATING PILL NAV  (added 2026-06)
   Converts the fixed white bar into Okta's signature dark,
   rounded, floating pill — white logo + links, centered,
   shadowed. Site-wide via the shared theme. Visual only.
   ============================================================ */

/* The <nav> becomes a transparent, full-width carrier; the pill
   itself is .nav-inner floating with a gap from the top. */
nav, #main-nav{
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 14px 22px !important;
  z-index: 9999 !important;
  display: block !important;
}

nav .nav-inner, #main-nav .nav-inner, nav > div:first-child:not(.bg){
  max-width: 1180px !important;
  width: 100% !important;
  margin: 0 auto !important;
  height: 60px !important;
  padding: 0 14px 0 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  background: rgba(20,18,28,0.92) !important;
  backdrop-filter: saturate(160%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(160%) blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 9999px !important;
  box-shadow: 0 10px 34px rgba(20,10,60,0.28), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Reserve space so page content clears the floating pill */
body{ padding-top: 90px !important; }
section[id]{ scroll-margin-top: 104px !important; }

/* Logo — white on dark */
nav .logo-icon, #main-nav .logo-icon{ width:40px !important; height:40px !important; }
nav .logo-text, #main-nav .logo-text{
  color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
  font-size:18px !important; font-weight:600 !important;
  font-family: var(--ap-serif) !important; letter-spacing:-0.01em !important;
}
nav .logo-text span, #main-nav .logo-text span{ color:rgba(255,255,255,0.6) !important; }
nav .logo-sub, #main-nav .logo-sub{ display:none !important; }

/* Links — white, Okta spacing */
nav .nav-links, #main-nav .nav-links{ gap:2px !important; }
nav .nav-links a, #main-nav .nav-links a{
  color: rgba(255,255,255,0.86) !important;
  font-size:14px !important; font-weight:500 !important;
  padding:8px 14px !important; border-radius:9999px !important;
  opacity:1 !important; transition: background .2s ease, color .2s ease !important;
}
nav .nav-links a:hover, #main-nav .nav-links a:hover, nav .nav-links a.active-nav{
  color:#ffffff !important; background: rgba(255,255,255,0.10) !important; text-decoration:none !important;
}

/* Nav action buttons */
nav .nav-actions, #main-nav .nav-actions{ gap:8px !important; }
nav .btn, #main-nav .btn{
  font-size:13px !important; height:38px !important; padding:0 16px !important;
  border-radius:9999px !important;
}
nav .btn-ghost, #main-nav .btn-ghost{
  background: transparent !important;
  color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
  border:1px solid rgba(255,255,255,0.28) !important;
}
nav .btn-ghost:hover, #main-nav .btn-ghost:hover{
  background: rgba(255,255,255,0.12) !important; color:#fff !important;
  border-color: rgba(255,255,255,0.5) !important;
}
nav .btn-primary, #main-nav .btn-primary{
  background:#ffffff !important; color:#14121f !important; -webkit-text-fill-color:#14121f !important;
  font-weight:600 !important;
}
nav .btn-primary:hover, #main-nav .btn-primary:hover{
  background:#ece9ff !important; color:#14121f !important; transform:none !important;
  box-shadow:0 6px 18px rgba(0,0,0,0.25) !important;
}
nav #nav-user{ color:#ffffff !important; }

/* Hamburger → white bars */
nav .hamburger span, #main-nav .hamburger span{ background:#ffffff !important; }

/* Mobile menu drops below the floating pill, as a rounded panel */
.mobile-menu, .nav-mobile, #mobile-menu{
  top: 84px !important;
  left: 14px !important; right: 14px !important;
  background: rgba(20,18,28,0.97) !important;
  backdrop-filter: saturate(160%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(160%) blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 40px rgba(20,10,60,0.32) !important;
  padding: 12px 16px !important;
}
.mobile-menu a, #mobile-menu a{
  color: rgba(255,255,255,0.9) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.mobile-menu a:hover, #mobile-menu a:hover{ color:#fff !important; }
.mobile-menu .btn-primary{ background:#fff !important; color:#14121f !important; }

@media (max-width: 833px){
  nav, #main-nav{ padding: 10px 14px !important; }
  nav .nav-inner, #main-nav .nav-inner{ height:54px !important; padding:0 10px 0 16px !important; }
  body{ padding-top: 78px !important; }
  .mobile-menu, #mobile-menu{ top: 74px !important; }
}

/* ============================================================
   30. NAV FIX — out-specify per-page inline overrides (2026-06)
   Subpages carry inline `body.day-mode nav{background:#fff;…}`
   and `body.day-mode .nav-links a{color:#000}` rules that beat
   the shared theme. These html-body-prefixed selectors raise
   specificity above them so the floating dark pill + white
   contents win everywhere. Also forces the logo mark white.
   ============================================================ */

/* Kill any opaque white nav bar + its shadow/border (the "white block") */
html body nav, html body #main-nav,
html body.day-mode nav, html body.day-mode #main-nav{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  height: auto !important;
}

/* Re-assert the dark floating pill on .nav-inner at winning specificity */
html body nav .nav-inner, html body #main-nav .nav-inner,
html body.day-mode nav .nav-inner{
  background: rgba(20,18,28,0.92) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 9999px !important;
  box-shadow: 0 10px 34px rgba(20,10,60,0.28), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  backdrop-filter: saturate(160%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(160%) blur(16px) !important;
  height: 60px !important;
}

/* White links inside the pill (beats body.day-mode .nav-links a) */
html body nav .nav-links a, html body.day-mode nav .nav-links a,
html body.day-mode #main-nav .nav-links a{
  color: rgba(255,255,255,0.86) !important;
}
html body nav .nav-links a:hover, html body.day-mode nav .nav-links a:hover,
html body nav .nav-links a.active-nav, html body.day-mode nav .nav-links a.active-nav{
  color:#ffffff !important; background: rgba(255,255,255,0.10) !important;
}

/* White logo wordmark */
html body nav .logo-text, html body.day-mode nav .logo-text{
  color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
}
html body nav .logo-text span, html body.day-mode nav .logo-text span{
  color: rgba(255,255,255,0.6) !important; -webkit-text-fill-color: rgba(255,255,255,0.6) !important;
}

/* Nav buttons on the dark pill */
html body nav .nav-actions .btn-ghost, html body.day-mode nav .nav-actions .btn-ghost{
  background: transparent !important;
  color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
  border:1px solid rgba(255,255,255,0.28) !important;
  backdrop-filter:none !important;
}
html body nav .nav-actions .btn-ghost:hover, html body.day-mode nav .nav-actions .btn-ghost:hover{
  background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.5) !important; color:#fff !important;
}
html body nav .nav-actions .btn-primary, html body.day-mode nav .nav-actions .btn-primary{
  background:#ffffff !important; color:#14121f !important; -webkit-text-fill-color:#14121f !important;
  box-shadow:none !important; border:none !important;
}

/* Logo MARK → pure white silhouette on the dark pill (any source colour).
   Scoped to <img> so the text fallback div is unaffected. */
html body nav img.logo-icon, html body #main-nav img.logo-icon{
  filter: brightness(0) invert(1) !important;
}

/* ============================================================
   31. HERO PAGES — gradient to the very top (no white band)
   Scoped with :has() so ONLY pages containing a gradient #hero
   are affected (legal/content pages keep their white top).
   The pill floats directly over the gradient, and the
   breadcrumb sits on the gradient — eliminating the white gap.
   ============================================================ */

body:has(section#hero){ padding-top: 0 !important; }

body:has(section#hero) .breadcrumb,
body:has(section#hero) section#hero{
  background: var(--ok-grad) !important;
  background-image: var(--ok-grad) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center top !important;
}

body:has(section#hero) .breadcrumb{
  max-width: none !important;
  margin: 0 !important;
  padding: 104px 6% 6px !important;
  position: relative !important;
  z-index: 1 !important;
}
body:has(section#hero) .breadcrumb a,
body:has(section#hero) .breadcrumb .sep{
  color: rgba(255,255,255,0.78) !important; -webkit-text-fill-color: rgba(255,255,255,0.78) !important;
}
body:has(section#hero) .breadcrumb a:hover{ color:#fff !important; }
body:has(section#hero) .breadcrumb .cur{
  color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
}

body:has(section#hero):not(:has(.breadcrumb)) section#hero{ padding-top: 104px !important; }
body:has(.breadcrumb) section#hero{ padding-top: 28px !important; }

@media (max-width: 833px){
  body:has(section#hero) .breadcrumb{ padding-top: 88px !important; }
  body:has(section#hero):not(:has(.breadcrumb)) section#hero{ padding-top: 92px !important; }
}

/* ============================================================
   32. OKTA MOBILE NAV  (added 2026-06)
   Phones: a separate dark logo pill + dark hamburger circle,
   and a WHITE rounded dropdown panel with dark links + chevrons
   (mirrors okta.com mobile). Language button stays white text.
   ============================================================ */
@media (max-width: 833px){

  /* Carrier: no full-width pill on mobile — the logo & burger float separately */
  html body nav, html body #main-nav{ padding: 12px 16px !important; }
  html body nav .nav-inner, html body #main-nav .nav-inner{
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    height: auto !important;
    padding: 0 !important;
  }

  /* Logo → its own dark rounded pill */
  html body nav .logo, html body #main-nav .logo{
    background: rgba(20,18,28,0.95) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 9999px !important;
    padding: 9px 18px 9px 12px !important;
    box-shadow: 0 8px 24px rgba(20,10,60,0.28) !important;
    backdrop-filter: saturate(160%) blur(14px) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px) !important;
  }
  html body nav .logo-text span, html body #main-nav .logo-text span{ display:none !important; }

  /* Hide the inline desktop actions on mobile — everything lives in the menu */
  html body nav .nav-actions, html body #main-nav .nav-actions{ display:none !important; }

  /* Hamburger → dark circle button */
  html body nav .hamburger, html body #main-nav .hamburger{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important; height: 52px !important;
    border-radius: 50% !important;
    background: rgba(20,18,28,0.95) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 8px 24px rgba(20,10,60,0.28) !important;
    padding: 0 !important; margin: 0 !important;
    gap: 5px !important;
  }
  html body nav .hamburger span, html body #main-nav .hamburger span{
    background: #ffffff !important; width: 22px !important; height: 2px !important;
    border-radius: 2px !important; transition: transform .25s ease, opacity .2s ease !important;
  }
  /* Animate to an X when open (JS adds .menu-open to the burger) */
  html body nav .hamburger.menu-open span:nth-child(1){ transform: translateY(7px) rotate(45deg) !important; }
  html body nav .hamburger.menu-open span:nth-child(2){ opacity: 0 !important; }
  html body nav .hamburger.menu-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg) !important; }

  /* ---- WHITE dropdown panel (Okta) ---- */
  html body .mobile-menu, html body #mobile-menu{
    top: 88px !important; left: 16px !important; right: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 26px !important;
    box-shadow: 0 26px 70px rgba(20,10,60,0.22) !important;
    padding: 10px 22px 24px !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  /* Links → dark, large, with a right chevron */
  html body .mobile-menu a, html body #mobile-menu a{
    color: #14121f !important; -webkit-text-fill-color: #14121f !important;
    font-family: var(--ap-font) !important;
    font-size: 19px !important; font-weight: 500 !important;
    padding: 20px 4px !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
  }
  html body .mobile-menu a:hover, html body #mobile-menu a:hover{ color: var(--ap-accent) !important; }
  html body .mobile-menu a::after, html body #mobile-menu a::after{
    content: '›' !important;
    font-size: 1.7rem !important; line-height: 1 !important;
    color: #b8b4c8 !important; font-weight: 400 !important;
  }

  /* Language toggle button → solid indigo, WHITE text (always legible) */
  html body .mobile-menu #mobile-lang-btn, html body #mobile-menu #mobile-lang-btn{
    background: var(--ap-accent) !important;
    color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
    border: none !important;
    border-radius: 9999px !important;
    text-align: center !important;
    font-weight: 600 !important;
    margin-top: 18px !important;
    padding: 14px !important;
  }
  /* Primary CTA in the menu → dark pill (Okta "Contact us") */
  html body .mobile-menu .btn-primary, html body #mobile-menu .btn-primary{
    background: #14121f !important;
    color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
    border-radius: 9999px !important; border: none !important;
    margin-top: 10px !important; padding: 15px !important; font-weight: 600 !important;
  }
}

/* ---- 32b. Mobile: force the .nav-inner carrier transparent (beats the
   higher-specificity `nav > div:first-child:not(.bg)` pill rule) so only
   the separate logo pill + hamburger circle show, Okta-style. ---- */
@media (max-width: 833px){
  html body nav > div:first-child:not(.bg),
  html body #main-nav > div:first-child:not(.bg),
  html body nav .nav-inner, html body #main-nav .nav-inner{
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    height: auto !important;
    padding: 0 !important;
  }
}

/* ============================================================
   33. THEME CONSISTENCY PASS  (added 2026-06)
   - Force the hamburger WHITE on every page (beats inline
     `body.day-mode .hamburger span{background:#000}`).
   - Real, theme-coloured social icons on the About founder card.
   - Recolour the "Collaborative Intelligence" vision card from amber to
     the indigo/sunset brand palette.
   ============================================================ */

/* --- 33a. White hamburger everywhere (out-specifies inline #000 rule) --- */
html body nav .hamburger span,
html body #main-nav .hamburger span,
html body.day-mode nav .hamburger span,
html body.day-mode #main-nav .hamburger span{
  background: #ffffff !important;
}
html body.day-mode nav .hamburger.menu-open span:nth-child(1),
html body nav .hamburger.menu-open span:nth-child(1){ background:#fff !important; transform: translateY(7px) rotate(45deg) !important; }
html body.day-mode nav .hamburger.menu-open span:nth-child(2),
html body nav .hamburger.menu-open span:nth-child(2){ background:#fff !important; opacity:0 !important; }
html body.day-mode nav .hamburger.menu-open span:nth-child(3),
html body nav .hamburger.menu-open span:nth-child(3){ background:#fff !important; transform: translateY(-7px) rotate(-45deg) !important; }

/* --- 33b. Founder social icons (About) — light circle, indigo glyph --- */
body .founder-social, body.day-mode .founder-social{ display:flex !important; gap:10px !important; }
body .founder-social a, body.day-mode .founder-social a{
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid var(--ap-border-2) !important;
  color: var(--ap-accent) !important; -webkit-text-fill-color: var(--ap-accent) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease !important;
}
body .founder-social a:hover, body.day-mode .founder-social a:hover{
  background: var(--ap-accent) !important;
  color: #ffffff !important; -webkit-text-fill-color:#fff !important;
  border-color: var(--ap-accent) !important;
  transform: translateY(-2px) !important;
}
body .founder-social a svg{ width: 17px !important; height: 17px !important; display:block !important; }

/* --- 33c. Vision card → indigo/sunset (was amber) --- */
body .vision-card, body.day-mode .vision-card{
  background: linear-gradient(135deg,#f3efff 0%,#fdf3ec 100%) !important;
  border: 1px solid rgba(74,24,224,0.16) !important;
}
body .vision-h, body.day-mode .vision-h{
  color: #4a18e0 !important; -webkit-text-fill-color: #4a18e0 !important;
  background: none !important; background-image: none !important;
  font-family: var(--ap-serif) !important;
}
body .vision-tag-label, body .vision-lbl,
body.day-mode .vision-tag-label, body.day-mode .vision-lbl{ color: #6b3df6 !important; opacity: 1 !important; }
body .vision-num, body.day-mode .vision-num{
  color: #4a18e0 !important; -webkit-text-fill-color: #4a18e0 !important; background: none !important;
}
body .vision-motto, body.day-mode .vision-motto{ color: #7c3aed !important; opacity: 0.9 !important; }
body .vision-rule, body.day-mode .vision-rule{ background: rgba(74,24,224,0.30) !important; }
body .vision-ico-box, body.day-mode .vision-ico-box{
  background: rgba(74,24,224,0.10) !important; border: 1px solid rgba(74,24,224,0.22) !important;
}
body .vision-ico-box svg, body.day-mode .vision-ico-box svg{ color: #4a18e0 !important; }

/* ============================================================
   34. FOOTER SOCIAL ICONS + LEGAL MODAL ALIGNMENT  (2026-06)
   - Replace the text monograms (in / IG / 𝕏 / ▶) in footers
     with real icons (CSS masks, themed via currentColor).
   - Centre the legal/cookie modal and lift it above the nav.
   ============================================================ */

/* --- 34a. Footer social → real icons --- */
.footer-social .soc-btn, footer .soc-btn, .contact-social .soc-btn{
  font-size: 0 !important;
  width: 36px !important; height: 36px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid var(--ap-border-2) !important;
  color: var(--ap-text-3) !important;
}
.footer-social .soc-btn:hover, footer .soc-btn:hover{
  color: var(--ap-accent) !important;
  border-color: var(--ap-accent) !important;
}
.footer-social .soc-btn::before, footer .soc-btn::before, .contact-social .soc-btn::before{
  content: '' !important; display: block !important;
  width: 17px !important; height: 17px !important;
  background: currentColor !important;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.soc-btn[href*="linkedin"]::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 110-4.13 2.06 2.06 0 010 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 110-4.13 2.06 2.06 0 010 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E");
}
.soc-btn[href*="instagram"]::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}
.soc-btn[href*="x.com"]::before, .soc-btn[href*="twitter"]::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 1.15h3.68l-8.04 9.19L24 22.85h-7.41l-5.8-7.58-6.64 7.58H.46l8.6-9.83L0 1.15h7.6l5.24 6.93zm-1.29 19.5h2.04L6.49 3.24H4.3z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 1.15h3.68l-8.04 9.19L24 22.85h-7.41l-5.8-7.58-6.64 7.58H.46l8.6-9.83L0 1.15h7.6l5.24 6.93zm-1.29 19.5h2.04L6.49 3.24H4.3z'/%3E%3C/svg%3E");
}
.soc-btn[href*="youtube"]::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.2a3 3 0 00-2.11-2.12C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.39.53A3 3 0 00.5 6.2 31 31 0 000 12a31 31 0 00.5 5.8 3 3 0 002.11 2.12c1.89.53 9.39.53 9.39.53s7.5 0 9.39-.53a3 3 0 002.11-2.12A31 31 0 0024 12a31 31 0 00-.5-5.8zM9.6 15.6V8.4l6.2 3.6z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.2a3 3 0 00-2.11-2.12C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.39.53A3 3 0 00.5 6.2 31 31 0 000 12a31 31 0 00.5 5.8 3 3 0 002.11 2.12c1.89.53 9.39.53 9.39.53s7.5 0 9.39-.53a3 3 0 002.11-2.12A31 31 0 0024 12a31 31 0 00-.5-5.8zM9.6 15.6V8.4l6.2 3.6z'/%3E%3C/svg%3E");
}
.soc-btn[href^="mailto"]::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

/* --- 34b. Legal / cookie modal: lift above the nav + centre WHEN OPEN.
   NOTE: never force `display` here — the page toggles visibility via the
   `.open` class (display:none ↔ flex). Forcing display:flex would pin the
   modal open and freeze the page. We only restyle the already-open state. */
.modal-overlay{
  z-index: 10000 !important;            /* above the floating pill nav (9999) */
}
.modal-overlay.open{
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}
.modal-overlay .modal{
  margin: 0 auto !important;
  width: 100% !important; max-width: 700px !important;
  max-height: 86vh !important; overflow-y: auto !important;
  text-align: left !important;
}
#legal-modal .modal{ max-width: 720px !important; }

/* ============================================================
   35. INDEX "INDUSTRIAL AI" DEMO CARD → light indigo  (2026-06)
   The .asst-preview demo on the homepage subscription section
   isn't covered by the page's day-mode block, so force it light.
   ============================================================ */
.asst-preview{
  background:#ffffff !important;
  border:1px solid rgba(74,24,224,0.16) !important;
  box-shadow:0 20px 50px rgba(74,24,224,0.12) !important;
}
.asst-preview-bar{
  background:#f6f4ff !important;
  border-bottom:1px solid rgba(74,24,224,0.12) !important;
}
.asst-preview-bar, .asst-preview-bar *{ color:#14121f !important; }
.asst-bubble-bot{
  background:#f3f0ff !important;
  border:1px solid rgba(74,24,224,0.16) !important;
  color:#14121f !important;
}
.asst-bubble-user{
  background:#2b1bff !important;
  border:1px solid #2b1bff !important;
  color:#ffffff !important;
}
.asst-features li::before{ color:#4a18e0 !important; }
.asst-badge{
  background:rgba(74,24,224,0.08) !important;
  border:1px solid rgba(74,24,224,0.20) !important;
  color:#4a18e0 !important;
}
.asst-badge-dot{ background:#4a18e0 !important; }

/* ============================================================
   36. YOUTUBE VIDEO CARD — themed + robust  (2026-06)
   The generic [class*="-card"] rule was adding padding and the
   global img{height:auto} could collapse the 16:9 thumbnail.
   Pin the thumbnail, give the poster/fallback the brand gradient
   (so it always looks intentional), and theme the link.
   ============================================================ */
.yt-video-card{
  padding: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: var(--ap-radius) !important;
}
.yt-thumb{
  background: var(--ok-grad) !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 0 !important;
}
.yt-thumb img{
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
}
#yt-fallback{
  background: var(--ok-grad) !important;
}
#yt-fallback div{ color: #ffffff !important; }
.yt-video-info{ padding: 14px 16px !important; }
.yt-video-title{ color: var(--ap-text) !important; font-weight: 600 !important; }
.yt-video-meta{ color: var(--ap-text-3) !important; }
.yt-video-meta a{ color: var(--ap-accent) !important; -webkit-text-fill-color: var(--ap-accent) !important; }
/* the play button on the poster */
.yt-play{ color: #ffffff !important; }
#yt-overlay{ background: rgba(20,10,60,0.18) !important; }