/* ── HERO VISUAL ── */
.Wrapper{background: #f8f9fc;}
.cycle-card {
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:0;
  box-shadow:0 10px 40px rgba(22,22,34,.10); overflow:hidden; position:relative;
}
.cycle-header {
  padding:16px 20px; background:linear-gradient(90deg,#F0F9F9,#fff); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.cycle-header-label { display:flex; align-items:center; gap:8px }
.cycle-dot {
  width:8px; height:8px; border-radius:50%; background:#52C41A;
  box-shadow:0 0 0 3px rgba(82,196,26,.15); animation:sc-livepulse 2s infinite;
}
@keyframes sc-livepulse {
  0%,100%{box-shadow:0 0 0 3px rgba(82,196,26,.15)} 50%{box-shadow:0 0 0 5px rgba(82,196,26,.05)}
}
.cycle-header-text { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2) }
.cycle-header-sla {
  font-size:11px; font-weight:700; color:var(--teal); background:var(--teal-faint); padding:3px 10px;
  border-radius:99px; border:1px solid rgba(0,128,128,.15);
}
.cycle-body { padding:8px 0 }
.cycle-step {
  display:flex; align-items:center; gap:14px; padding:14px 24px; position:relative; transition:background .2s;
}
.cycle-step:not(:last-child)::after {
  content:''; position:absolute; left:36px; bottom:-1px; width:1.5px; height:14px; background:rgba(0,128,128,.2); z-index:0;
}
.cycle-step.active { background:linear-gradient(90deg,rgba(0,128,128,.04),transparent) }
.step-num {
  width:30px; height:30px; border-radius:50%; background:#fff; border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--muted);
  flex-shrink:0; transition:all .3s; z-index:1; position:relative;
}
.cycle-step.active .step-num { background:var(--teal); border-color:var(--teal); color:#fff; box-shadow:0 0 0 4px rgba(0,128,128,.12) }
.cycle-step.complete .step-num { background:var(--teal); border-color:var(--teal); color:#fff }
.cycle-step.complete .step-num::after { content:'✓'; font-size:13px }
.cycle-step.complete .step-num span { display:none }
.step-content { flex:1; min-width:0 }
.step-content h4 { font-size:13.5px; margin-bottom:2px; color:var(--text) }
.step-content p { font-size:12px; color:var(--muted); margin:0; max-width:none }
.step-day {
  font-size:10.5px; font-weight:700; color:var(--teal); background:var(--teal-faint); padding:3px 8px;
  border-radius:6px; flex-shrink:0; border:1px solid rgba(0,128,128,.1);
}
.cycle-step.complete .step-day { background:rgba(0,128,128,.15); color:#003D3D }
.cycle-footer {
  padding:18px 24px; background:var(--off); border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.cycle-footer-label { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em }
.cycle-footer-value { font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:22px; font-weight:800; color:var(--teal); letter-spacing:-.3px }
.cycle-footer-value .small { font-size:13px; font-weight:600; color:var(--muted); margin-left:4px }

/* ── Floating tags ── */
.float-tag {
  position:absolute; background:#fff; border:1px solid var(--border); border-radius:10px; padding:10px 14px;
  display:flex; align-items:center; gap:10px; box-shadow:0 8px 24px rgba(22,22,34,.08); font-size:12.5px;
  animation:sc-float 5s ease-in-out infinite;
}
.float-tag-1 { top:-20px; right:-10px; animation-delay:0s }
.float-tag-2 { bottom:-16px; left:-20px; animation-delay:1.5s }
@keyframes sc-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.float-tag-icon {
  width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.float-tag-icon.red { background:var(--red-faint); color:var(--red) }
.float-tag-icon.green { background:rgba(82,196,26,.1); color:#3CB991 }
.float-tag-icon svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.float-tag strong { font-weight:700; color:var(--text); display:block; font-size:12px }
.float-tag .small { font-size:11px; color:var(--muted) }

/* ── Cycle card sub-components ── */
.cycle-header-icon { width:28px; height:28px; background:var(--teal); border-radius:7px; display:flex; align-items:center; justify-content:center; margin-right:4px }
.cycle-meta { padding:14px 20px; background:#fff; border-bottom:1px solid var(--border); display:flex; gap:24px }
.cycle-meta-item { font-size:11px; color:var(--muted) }
.cycle-meta-value { color:var(--text); font-size:12px }
.cycle-meta-value.mono { font-family:'IBM Plex Mono',monospace }
.cycle-stats { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--border) }
.cycle-stat { padding:14px 18px; text-align:center }
.cycle-stat:not(:last-child) { border-right:1px solid var(--border) }
.cycle-stat-n { font-family:'Plus Jakarta Sans',sans-serif; font-size:26px; font-weight:800; color:var(--text); line-height:1 }
.cycle-stat-n.teal { color:var(--teal) }
.cycle-stat-n.amber { color:#F59E0B }
.cycle-stat-d { font-size:10.5px; color:var(--muted); margin-top:4px }
.cycle-findings { padding:0 }
.cycle-findings-head { display:grid; grid-template-columns:1fr 72px 80px 80px; padding:8px 18px; background:var(--off); border-bottom:1px solid var(--border) }
.cycle-col-head { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.cycle-finding-row { display:grid; grid-template-columns:1fr 72px 80px 80px; padding:10px 18px; border-bottom:1px solid var(--border); align-items:center }
.cycle-finding-row:last-child { border-bottom:none }
.cycle-finding-name { font-size:12px; color:var(--text); font-weight:500 }
.badge-sev-high { font-size:10px; font-weight:700; color:#DC2626; background:rgba(220,38,38,.08); padding:2px 7px; border-radius:4px }
.badge-sev-med { font-size:10px; font-weight:700; color:#D97706; background:rgba(217,119,6,.08); padding:2px 7px; border-radius:4px }
.cycle-owasp { font-size:11px; color:var(--muted); font-family:'IBM Plex Mono',monospace }
.badge-status-blocked { font-size:10px; font-weight:700; color:var(--teal); background:var(--teal-faint); padding:2px 7px; border-radius:4px }
.badge-status-fix { font-size:10px; font-weight:700; color:#F59E0B; background:rgba(245,158,11,.08); padding:2px 7px; border-radius:4px }
.cycle-stamp { padding:12px 18px;    gap: 10px; background:var(--off); border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between }
.cycle-stamp-left { display:flex; align-items:center; gap:8px }
.cycle-stamp-check { width:20px; height:20px; background:var(--teal); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; font-weight:700; flex-shrink:0 }
.cycle-stamp-text { font-size:11px; color:var(--text-2); font-weight:600 }
.cycle-stamp-brand { font-size:10px; color:var(--muted) }

/* ==========================================
   LOGO STRIP
   ========================================== */
.logo-strip-label { text-align:center; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:20px }
.logo-strip-viewport {
  overflow:hidden; position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.logo-strip-track { display:flex; gap:14px; width:max-content; animation:sc-logoScroll 42s linear infinite }
.logo-strip-viewport:hover .logo-strip-track { animation-play-state:paused }
@keyframes sc-logoScroll {
  0%{transform:translateX(0)} 100%{transform:translateX(calc(-50% - 7px))}
}
.pm-logo {
  flex-shrink:0; width:170px; height:72px; background:#fff; border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(22,22,34,.04); border-radius:10px;
  display:flex; align-items:center; justify-content:center; padding:0 18px; text-align:center;
  transition:box-shadow .2s,transform .2s;
}
.pm-logo:hover { box-shadow:0 4px 12px rgba(22,22,34,.08); transform:translateY(-2px) }
.lm { display:inline-flex; align-items:center; gap:6px; font-family:'Plus Jakarta Sans',sans-serif; color:#1A1A1A; line-height:1 }
.lm-ideal { font-weight:700; font-size:13.5px; letter-spacing:-.2px }
.lm-vict { font-weight:900; font-size:14px; letter-spacing:1px; color:#E2071B }
.lm-aditya { font-weight:700; font-size:10px; letter-spacing:.6px; flex-direction:column; gap:3px; text-align:center }
.lm-titan { font-weight:600; font-size:14px; letter-spacing:1px; flex-direction:column; gap:0; color:#1A1A1A }
.lm-titan span { font-size:7.5px; letter-spacing:1.8px; color:#777; font-weight:500; margin-top:2px }
.lm-itc { font-family:Georgia,'Times New Roman',serif; font-weight:600; font-style:italic; font-size:20px; color:#D32F2F; gap:4px }
.lm-itc span { font-size:11px; font-style:normal; font-family:inherit; color:#1A1A1A; font-weight:500 }
.lm-yamaha { font-weight:900; font-size:14px; letter-spacing:1px; color:#5B1B71; flex-direction:column; gap:0 }
.lm-yamaha span { font-family:'Brush Script MT',cursive; font-size:11px; color:#7B2D8F; letter-spacing:0; font-weight:400; font-style:italic; margin-top:1px; text-transform:none }
.lm-lti { font-weight:800; font-size:14.5px; letter-spacing:-.4px; color:#1B468F }
.lm-lti em { font-style:normal; color:#F26522 }
.lm-browser { font-weight:700; font-size:13px; color:#1A1A1A; gap:7px }
.lm-yes { font-weight:900; font-size:13.5px; letter-spacing:2px; color:#1A1A1A; gap:5px }
.lm-tcs { font-weight:800; font-size:15px; color:#1B72BA; flex-direction:column; gap:1px; line-height:1 }
.lm-tcs span { font-size:7px; letter-spacing:.8px; color:#666; font-weight:600; text-transform:uppercase }

/* ==========================================
   THE MOMENT / PROBLEM SECTION
   ========================================== */
.moment-section { padding:40px 0px; position:relative; overflow:hidden; background:#fff }

/* Red eyebrow variant (problem section) */
.moment-eyebrow {
  display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red); margin-bottom:18px; padding:5px 14px;
  background:var(--red-faint); border:1px solid rgba(226,75,74,.15); border-radius:99px;
}
.moment-eyebrow::before {
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--red); animation:sc-pulse 2.5s infinite;
}
/* ── EXPOSURE COMPARISON ── */
.exposure-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px }
.exposure-card { border-radius:16px; padding:32px; position:relative; overflow:hidden; display:flex; flex-direction:column }
.exposure-card.bad { background:linear-gradient(180deg,#FFF5F5 0%,#fff 100%); border:1px solid rgba(226,75,74,.2) }
.exposure-card.good { background:linear-gradient(180deg,#F0F9F9 0%,#fff 100%); border:1px solid rgba(0,128,128,.25) }
.exposure-label {
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px;
  display:inline-flex; align-items:center; gap:8px; padding:5px 11px; border-radius:99px;
}
.exposure-label.bad { color:var(--red); background:rgba(226,75,74,.08); border:1px solid rgba(226,75,74,.18) }
.exposure-label.good { color:var(--teal); background:var(--teal-faint); border:1px solid rgba(0,128,128,.18) }
.exposure-card h3 { font-size:23px; margin-bottom:8px; letter-spacing:-.3px;}
.exposure-card .subhead { font-size:14px; color:var(--muted); margin-bottom:24px }
.exposure-timeline { display:flex; flex-direction:column; gap:0; margin-bottom:20px }
.tl-step {
 min-height: 70px; display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px dashed var(--border); position:relative;
}
.tl-step:last-child { border-bottom:none }
.tl-icon {
  width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:13px; font-weight:700;
}
.tl-icon.x { background:rgba(226,75,74,.1); color:var(--red) }
.tl-icon.check { background:rgba(0,128,128,.12); color:var(--teal) }
.tl-text { flex:1; font-size:13px; color:var(--text-2) }
.tl-text strong { color:var(--text) }
.tl-time {
  font-size:11.5px; font-weight:700; color:var(--muted); background:#fff; padding:3px 9px;
  border-radius:5px; border:1px solid var(--border); flex-shrink:0;
}
.tl-time.danger { color:var(--red); border-color:rgba(226,75,74,.2); background:rgba(226,75,74,.04) }
.tl-time.safe { color:var(--teal); border-color:rgba(0,128,128,.2); background:rgba(0,128,128,.04) }
.exposure-window {
  margin-top:auto; padding:16px 18px; border-radius:10px; display:flex; align-items:center; justify-content:space-between;
}
.exposure-window.bad {
  background:linear-gradient(90deg,rgba(226,75,74,.12),rgba(226,75,74,.04)); border:1px solid rgba(226,75,74,.2);
}
.exposure-window.good {
  background:linear-gradient(90deg,rgba(0,128,128,.15),rgba(0,128,128,.04)); border:1px solid rgba(0,128,128,.2);
}
.exposure-window-label { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase }
.exposure-window.bad .exposure-window-label { color:var(--red) }
.exposure-window.good .exposure-window-label { color:var(--teal) }
.exposure-window-value { font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:20px; font-weight:800; letter-spacing:-.3px }
.exposure-window.bad .exposure-window-value { color:#791F1F }
.exposure-window.good .exposure-window-value { color:#003D3D }

/* ==========================================
   VULN EXAMPLE SECTION (dark)
   ========================================== */
.section-dark-wrap { padding:80px 0 }
.section-dark {
  position:relative; overflow:hidden; background:var(--dark-bg); border-radius:20px; padding:72px 64px;
  margin:0 auto; max-width:1180px;
}
.section-dark::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(76,199,193,.5) 40%,rgba(76,199,193,.5) 60%,transparent); z-index:0;
}
.section-dark::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(76,199,193,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(76,199,193,.025) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,black 20%,transparent 100%); z-index:0;
}
.section-dark>* { position:relative; z-index:1 }

/* Teal-hc section-label override inside dark section */
.section-dark .section-label { color:var(--teal-hc); background:var(--teal-hc-faint); border-color:var(--teal-hc-border) }
.section-dark .section-label::before { background:var(--teal-hc) }
.section-dark h2 { color:var(--dark-text) }
.section-dark h2 em,.footer-cta-section h2 em { color:var(--teal-hc) }
.section-dark .section-header { margin-bottom:36px }
.section-dark-lede { color:var(--dark-text-2); font-size:16px; max-width:600px; margin:18px auto 0 }
.examples-header { text-align:center; margin-bottom:36px }
.examples-eyebrow { margin-bottom:20px }
.mono { font-family:'IBM Plex Mono',monospace }
.vuln-explainer .mono { color:var(--teal-hc); font-size:13px }

/* ── VULNERABILITY CODE BLOCK ── */
.vuln-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:flex-start; margin-top:48px }
.vuln-code {
  background:#0F0F1F; border:1px solid var(--dark-border); border-radius:12px; padding:0;
  overflow:hidden; overflow-x:auto; font-family:'IBM Plex Mono',monospace;
}
.vuln-code-header {
  padding:12px 18px; background:#15152A; border-bottom:1px solid var(--dark-border);
  display:flex; align-items:center; gap:8px;
}
.code-dot { width:10px; height:10px; border-radius:50% }
.code-dot.r{background:#FF5F57} .code-dot.y{background:#FEBC2E} .code-dot.g{background:#28C840}
.code-title { margin-left:8px; font-size:11px; color:var(--dark-muted); font-family:'IBM Plex Mono',monospace }
.vuln-code-body { padding:20px 22px; font-size:13px; line-height:1.85; color:var(--dark-text-2) }
.vuln-code-body .comment{color:#666688}
.vuln-code-body .keyword{color:#FF7B72}
.vuln-code-body .string{color:#A5D6FF}
.vuln-code-body .var{color:#79C0FF}
.vuln-code-body .highlight{background:rgba(226,75,74,.15);padding:0 3px;border-radius:3px;color:#FFB4B4}
.vuln-code-body .rule{background:rgba(76,199,193,.12);padding:0 3px;border-radius:3px;color:#7FE4DE}
.vuln-explainer h3 { color:var(--dark-text); margin-bottom:14px; font-size:24px; letter-spacing:-.4px }
.vuln-explainer .vuln-type {
  display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#FFB4B4; background:rgba(226,75,74,.12); padding:4px 10px; border-radius:5px;
  border:1px solid rgba(226,75,74,.18); margin-bottom:14px;
}
.vuln-explainer p { color:var(--dark-text-2); font-size:15px; line-height:1.7; margin-bottom:18px; max-width:none }
.vuln-explainer p strong { color:var(--dark-text); font-weight:600 }
.vuln-flow { display:flex; flex-direction:column; gap:12px; margin-top:24px }
.vuln-flow-item { display:flex; gap:14px; align-items:flex-start }
.vuln-flow-num {
  font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:13px; font-weight:800;
  color:var(--teal-hc); width:24px; flex-shrink:0; padding-top:1px;
}
.vuln-flow-text { font-size:14px; color:var(--dark-text-2); line-height:1.55 }
.vuln-flow-text strong { color:var(--dark-text) }

/* ── VULN TABS ── */
.vuln-tabs { display:flex; gap:8px; justify-content:center; margin-bottom:36px; flex-wrap:wrap }
.vuln-tab {
  background:rgba(255,255,255,.04); border:1px solid var(--dark-border); color:var(--dark-text-2);
  padding:9px 18px; border-radius:8px; font-family:'IBM Plex Sans',sans-serif; font-size:13px;
  font-weight:600; cursor:pointer; transition:all .18s; letter-spacing:-.1px;
}
.vuln-tab:hover { background:rgba(76,199,193,.08); border-color:var(--teal-hc-border); color:var(--dark-text) }
.vuln-tab.active { background:var(--teal-hc-faint); border-color:var(--teal-hc); color:var(--teal-hc) }
.vuln-panel { display:none; animation:sc-fadeInTab .4s ease }
.vuln-panel.active { display:block }
@keyframes sc-fadeInTab { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* ==========================================
   PROCESS SECTION
   ========================================== */
.process-section { padding:40px 0px; background:var(--off); border-top:1px solid var(--border) }
.process-lede { font-size:17px; color:var(--muted);  margin:16px auto 0; max-width:580px; line-height:1.6 }
.process-steps { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:0; align-items:start }
.process-step {
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:30px 24px;
  position:relative; overflow:hidden; transition:all .25s;min-height: 100%;
}
.process-step:hover { border-color:rgba(0,128,128,.3); box-shadow:0 8px 28px rgba(0,128,128,.07); transform:translateY(-2px) }
.process-step::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--teal),rgba(0,128,128,.3));
}
.process-step-num { font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:13px; font-weight:800; color:var(--teal); letter-spacing:.06em; margin-bottom:4px }
.process-step-label { font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:18px }
.process-step h3 { font-size:17px; margin-bottom:10px; letter-spacing:-.3px; line-height:1.3 }
.process-step p { font-size:13.5px; color:var(--text-2); line-height:1.6; margin:0; max-width:none }
.process-connector { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 8px; margin-top:80px }
.process-connector-line { width:24px; height:1px; background:var(--teal-line) }
.process-connector-arrow { font-size:18px; color:var(--teal); margin-top:2px; opacity:.5 }

/* ==========================================
   70/30 SPLIT SECTION  (3-tier: 30 / 50 / 20)
   ========================================== */
.split-section { padding:40px 0; background:var(--off) }

/* ── Proportion bar ── */
.split-prop-bar {
  display:flex; max-width:1080px; margin:0 auto 24px; border-radius:10px; overflow:hidden;
  height:52px; border:1px solid var(--border); box-shadow:0 2px 8px rgba(22,22,34,.04);
}
.spb-seg {
  display:flex; align-items:center; gap:10px; padding:0 20px;
}
.spb-seg:not(:last-child) { border-right:1px solid var(--border) }
.spb-30 { flex:3; background:#fff }
.spb-50 { flex:5; background:var(--teal-faint) }
.spb-20 { flex:2; background:rgba(89,11,213,.05) }
.spb-pct {
  font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:18px; font-weight:800; line-height:1;
}
.spb-30 .spb-pct { color:var(--muted) }
.spb-50 .spb-pct { color:var(--teal) }
.spb-20 .spb-pct { color:#590BD5 }
.spb-name { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase }
.spb-30 .spb-name { color:var(--muted) }
.spb-50 .spb-name { color:var(--teal) }
.spb-20 .spb-name { color:#590BD5 }

/* ── Cards grid ── */
.split-visual {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; border-radius:16px; overflow:hidden;
  border:1px solid var(--border); background:#fff; max-width:1080px; margin:0 auto;
  box-shadow:0 4px 24px rgba(22,22,34,.04);
}
.split-side { padding:30px 30px }

/* 30% — standard / muted */
.split-30 { background:#fff; border-right:1px solid var(--border); text-align:center; position:relative; overflow:hidden }
.split-30::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--muted),transparent) }

/* 50% — teal / primary */
.split-50 {
  background:linear-gradient(180deg,rgba(0,128,128,.05),#fff); text-align:left;
  position:relative; overflow:hidden; border-right:1px solid rgba(0,128,128,.15);
}
.split-50::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--teal),transparent) }

/* 20% — purple / bespoke */
.split-20 {
  background:linear-gradient(180deg,rgba(89,11,213,.05),#fff); text-align:left;
  position:relative; overflow:hidden; padding:30px 24px;
}
.split-20::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#590BD5,transparent) }

/* Percentage numbers */
.split-side .pct { font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:800; line-height:1; letter-spacing:-2px }
.split-30 .pct { font-size:60px; color:var(--muted); opacity:.45 }
.split-50 .pct {
  font-size:60px;
  background:linear-gradient(180deg,var(--teal),#005252);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.split-20 .pct {
  font-size:60px;
  background:linear-gradient(180deg,#590BD5,#3B0891);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Labels */
.split-side .label { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-top:12px; margin-bottom:16px }
.split-30 .label { color:var(--muted) }
.split-50 .label { color:var(--teal) }
.split-20 .label { font-size:11px; color:#590BD5; margin-bottom:10px }

/* Headings */
.split-side h3 { margin-bottom:12px; letter-spacing:-.3px; line-height:1.3;text-align: left; }
.split-30 h3 { font-size:20px; color:var(--text) }
.split-50 h3 { font-size:20px; color:var(--text) }
.split-20 h3 { font-size:20px; color:var(--text) }

/* 30% bullet points */
.split-30-points { margin-top:20px; display:flex; flex-direction:column; gap:10px; text-align:left }
.split-30-point { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted); line-height:1.5 }
.split-30-point::before {
  content:'✓'; color:var(--muted); font-weight:700; flex-shrink:0; width:18px; height:18px; border-radius:50%;
  background:rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center; font-size:11px; margin-top:1px;
}

/* Shared tick-list */
.split-70-points { margin-top:16px; display:flex; flex-direction:column; gap:10px }
.split-70-point { display:flex; gap:10px; align-items:flex-start; color:var(--text-2); line-height:1.5 }
.split-50 .split-70-point { font-size:13px }
.split-20 .split-70-point { font-size:13px }
.split-70-point::before {
  content:'✓'; font-weight:700; flex-shrink:0; width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:11px; margin-top:1px;
}
.split-50 .split-70-point::before { color:var(--teal); background:var(--teal-faint) }
.split-20 .split-70-point::before { color:#590BD5; background:rgba(89,11,213,.08) }
.split-70-point strong { color:var(--text) }

/* Managed badge */
.split-managed-badge {
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#590BD5; background:rgba(89,11,213,.08); border:1px solid rgba(89,11,213,.15);
  padding:3px 9px; border-radius:5px; margin-left:12px;
}

/* Feedback note */
.split-feedback-note {
  margin-top:16px; font-size:12px; color:#590BD5; font-style:italic; opacity:.75; max-width:none;
}

/* ==========================================
   MOAT SECTION
   ========================================== */
.moat-section { padding:40px 0px; background:#fff }
.moat-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:20px }
.moat-card { grid-column:span 2 }
.moat-card:nth-child(4) { grid-column:2 / span 2 }
.moat-card:nth-child(5) { grid-column:4 / span 2 }
.moat-card {
  padding:32px 26px; border:1px solid var(--border); border-radius:14px; background:#fff;
  transition:all .25s; position:relative; overflow:hidden;
}
.moat-card:hover { border-color:rgba(0,128,128,.4); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,128,128,.08) }
.moat-card::before { content:''; position:absolute; top:0; left:0; width:0; height:3px; background:var(--teal); transition:width .3s }
.moat-card:hover::before { width:100% }
.moat-icon {
  width:44px; height:44px; border-radius:11px; background:var(--teal-light);
  border:1px solid rgba(0,128,128,.18); display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.moat-icon svg { width:22px; height:22px; fill:none; stroke:var(--teal); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.moat-card h3 { font-size:17px; margin-bottom:8px; letter-spacing:-.2px }
.moat-card p { font-size:13.5px; color:var(--muted); margin:0; max-width:none; line-height:1.6 }

/* ==========================================
   DESIGN PARTNER / EARLY ACCESS
   ========================================== */
.ea-section {
  padding:40px 0px; background:#fff; border-top:1px solid var(--border); position:relative; overflow:hidden;
}
.ea-section::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:60%; height:300px;
  background:radial-gradient(ellipse at center top,rgba(0,128,128,.08),transparent 70%); pointer-events:none;
}
.ea-section>* { position:relative; z-index:1 }
.ea-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:48px }
.ea-card {
  background:linear-gradient(180deg,var(--off),#fff); border:1px solid var(--border); border-radius:14px;
  padding:28px 24px; transition:transform .2s,box-shadow .2s,border-color .2s;
}
.ea-card:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,128,128,.08); border-color:rgba(0,128,128,.25) }
.ea-num {
  font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:11px; font-weight:800; color:var(--teal);
  letter-spacing:.12em; margin-bottom:14px; display:inline-block; padding:3px 10px;
  background:var(--teal-faint); border-radius:5px; border:1px solid rgba(0,128,128,.15);
}
.ea-card h3 { font-size:17px; margin-bottom:10px; letter-spacing:-.2px; line-height:1.3 }
.ea-card p { font-size:13.5px; line-height:1.6; color:var(--text-2); margin:0; max-width:none }
.ea-criteria {
  background:linear-gradient(135deg,rgba(0,128,128,.05),rgba(89,11,213,.03));
  border:1px solid var(--teal-line); border-radius:14px; padding:32px 36px; margin-bottom:40px;
}
.ea-criteria-label { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); margin-bottom:18px }
.ea-criteria-list { display:grid; grid-template-columns:1fr 1fr; gap:14px 32px }
.ea-criteria-item { font-size:14px; color:var(--text-2); line-height:1.55; position:relative; padding-left:24px }
.ea-criteria-item::before { content:'✓'; position:absolute; left:0; top:0; color:var(--teal); font-weight:700; font-size:15px }
.ea-criteria-item strong { color:var(--text); font-weight:600 }
.ea-cta-row { text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px }
.ea-cta-note { font-size:13px; color:var(--muted); font-style:italic }

/* ==========================================
   COMPLIANCE SECTION
   ========================================== */
.compliance-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1080px; margin:0 auto }
.compliance-card {
  border:1px solid var(--border); border-radius:14px; padding:26px; background:#fff;
  transition:all .2s; display:flex; flex-direction:column; gap:14px;
}
.compliance-card:hover { border-color:rgba(0,128,128,.3); transform:translateY(-2px); box-shadow:0 6px 20px rgba(22,22,34,.05) }
.compliance-badge {
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--teal);
  background:var(--teal-faint); border:1px solid rgba(0,128,128,.15); padding:5px 12px;
  border-radius:6px; display:inline-block; align-self:flex-start;
}
.compliance-card h3 { font-size:15.5px; margin-bottom:0px; letter-spacing:-.2px }
.compliance-card p { font-size:13.5px; color:var(--muted); margin:0; max-width:none; line-height:1.6 }


/* ==========================================
   FOOTER CTA SECTION (dark)
   ========================================== */
.footer-cta-section { padding:40px 0px; position:relative; overflow:hidden; background:var(--dark-bg) }
.footer-cta-section::before {
  content:''; position:absolute; top:-200px; right:-200px; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(76,199,193,.12) 0%,transparent 70%);
}
.footer-cta-section::after {
  content:''; position:absolute; bottom:-200px; left:-200px; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(119,42,244,.1) 0%,transparent 70%);
}
.footer-cta-section .eyebrow {
  display:inline-flex; align-items:center; gap:10px; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal-hc); margin-bottom:28px; padding:6px 14px;
  background:var(--teal-hc-faint); border:1px solid var(--teal-hc-border); border-radius:99px;
}
.footer-cta-section .eyebrow::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--teal-hc); animation:sc-pulse 2.5s infinite }

.footer-cta-section p { color:var(--dark-text-2); font-size:18px; margin:20px auto; max-width:800px; line-height:1.6 }
.footer-cta-btns { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:32px }



/* ==========================================
   FADE-IN ANIMATION
   ========================================== */
.sc-fade {
  opacity:0; transform:translateY(10px); transition:opacity .45s ease,transform .45s ease;
}
.sc-fade.in { opacity:1; transform:none }

/* ==========================================
   RESPONSIVE
   ========================================== */
@media(max-width:960px){
  
  .float-tag { display:none }
  .process-steps { grid-template-columns:1fr; gap:24px }
  .process-connector { display:none }
  .exposure-grid { grid-template-columns:1fr }
  .vuln-grid { grid-template-columns:1fr; gap:32px }
  .split-visual { grid-template-columns:1fr }
  .split-prop-bar { display:none }
  .split-30 { border-right:none; border-bottom:1px solid var(--border) }
  .split-50 { border-right:none; border-bottom:1px solid var(--border) }
  .split-20 { padding:40px 32px }
  .moat-grid { grid-template-columns:repeat(2,1fr) }
  .moat-card,.moat-card:nth-child(4),.moat-card:nth-child(5) { grid-column:auto }
  .compliance-grid { grid-template-columns:1fr 1fr }
  .section-dark { padding:48px 28px; border-radius:14px }
 
  .ea-grid { grid-template-columns:repeat(2,1fr) }
  .ea-criteria-list { grid-template-columns:1fr }
  .wrap-narrow { padding:0 24px }
}
@media(max-width:620px){
 .footer-cta-section::before,.footer-cta-section::after{position: relative;}
  .moment-section,.split-section,.moat-section,
  .compliance-section,.faq-section,.footer-cta-section,
  .ea-section { padding:20px 0 }
  .moat-grid,.compliance-grid { grid-template-columns:1fr }

  .split-50 .pct { font-size:80px }
  .split-20 .pct { font-size:72px }
  .split-30 .pct { font-size:66px }
  .sticky-cta { bottom:14px; right:14px; padding:11px 18px; font-size:13px }
  .ea-grid { grid-template-columns:1fr }
  .ea-criteria { padding:24px 22px }

  /* Issue 4 — section-dark inner padding */
  .section-dark { padding:32px 18px !important }

  /* Issue 3 — code block horizontal scroll */
  .vuln-code-body { font-size:11px; overflow-x:auto; min-width:280px }

  /* Issue 1 — findings table: hide OWASP column (least important on mobile)
     Keep grid 4-col but collapse col 3 to 0 so STATUS stays in its slot */
  .cycle-findings-head,
  .cycle-finding-row { grid-template-columns:1fr 60px 0 72px }
  .cycle-findings-head > *:nth-child(3),
  .cycle-owasp { display:none }

  /* Issue 5 — bump sub-12px text to readable sizes */
  .badge-sev-high,.badge-sev-med,
  .badge-status-blocked,.badge-status-fix { font-size:11px; padding:3px 7px }
  .cycle-stat-d { font-size:11px }
  .cycle-stamp-text,.cycle-stamp-brand { font-size:11px }
  .cycle-header-text,.cycle-header-sla { font-size:12px }

  /* Issue 6 — vuln tab WCAG 44×44 touch target */
  .vuln-tab { min-height:44px; font-size:12px; padding:10px 12px;
    display:inline-flex; align-items:center; justify-content:center }
}

/* Issue 7 — 420px breakpoint: page-specific components below site-wide 640px rules */
@media(max-width:420px){
  .section-dark { padding:24px 14px !important }
  .section-dark-wrap { padding:40px 0 }

  /* Cycle card: drop severity too, keep only name + status */
  .cycle-findings-head,
  .cycle-finding-row { grid-template-columns:1fr 0 0 68px }
  .cycle-findings-head > *:nth-child(2),
  .badge-sev-high,.badge-sev-med { display:none }

  /* Vuln tabs: full-width on very small screens */
  .vuln-tabs { flex-direction:column; align-items:stretch }
  .vuln-tab { text-align:center }

  /* Code block: tighten further */
  .vuln-code-body { font-size:10.5px; padding:14px 16px }
  .cycle-stat-n { font-size:22px }
}

/* ==========================================
   SWYFTCOMPLY AI BETA DEMO / SIGNUP PAGE
   Scoped to .sc-demo-page
   ========================================== */

/* ── Left panel ── */
.sc-demo-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#008080; background:var(--teal-faint); border:1px solid var(--teal-line);
  padding:4px 12px; border-radius:99px; margin-bottom:18px;
}
.sc-demo-eyebrow::before {
  content:''; width:5px; height:5px; border-radius:50%; background:var(--teal);
  animation:sc-pulse 2.5s infinite;
}

/* Takeaway list */
.sc-takeaways { list-style:none; padding:0; margin:0 0 32px; }
.ta {
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 0; border-bottom:1px dashed var(--border);
}
.ta:last-child { border-bottom:none; }
.ta-arrow {
  color:var(--teal); font-size:15px; font-weight:700; flex-shrink:0; margin-top:2px;
}
.ta-text { font-size:14px; color:var(--text-2); line-height:1.55; text-align: left;}
.ta-text strong { color:var(--text); font-weight:600; }

/* Trust fold */
.trust-fold {
  border-top:1px solid var(--border); padding-top:24px; margin-top:8px;
}
.trust-fold-headline {
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:16px; font-weight:800; color:var(--text); letter-spacing:-.3px; margin-bottom:14px;
}
.trust-stats { display:flex; gap:28px; margin-bottom:20px; flex-wrap:wrap; }
.ts-n {
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:22px; font-weight:800; color:#590BD5; letter-spacing:-.4px; line-height:1;
}
.ts-d { font-size:11.5px; color:var(--muted); margin-top:4px; }

/* Trust logo names (text-only strip) */
.trust-logos-names {
  display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-bottom:18px;
}
.tl-name {
  font-size:12px; font-weight:700; color:var(--muted); opacity:.7; letter-spacing:-.1px;
}

/* Trust badges */
.trust-badges-row { display:flex; gap:8px; flex-wrap:wrap; }
.tbadge {
  background:var(--off); border:1px solid var(--border); border-radius:7px; padding:6px 10px;
  font-size:11px; font-weight:700; color:var(--text-2); line-height:1.3;
}
.tbadge span { display:block; font-size:10px; color:var(--muted); font-weight:400; }

/* ── Override skin-v1.css defaults for sc-demo-page ── */
/* Kill the 412px cap and centre-align that skin imposes on ._rhtForm */
.sc-demo-page ._rhtForm {
  max-width: none !important;
  padding: 28px 28px 24px !important;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  box-shadow: 0 4px 24px rgba(22,22,34,.06) !important;
  text-align: left;
}
/* Revert the skin h3 centre rule inside our form */
.sc-demo-page ._rhtForm h2,
.sc-demo-page ._rhtForm h3 { text-align: left !important; padding-bottom: 0; }
/* skin-v1 sets form-control to height:50px — fix for labelled groups */
.sc-demo-page .form-control {
  height: auto !important;
  padding: 11px 14px !important;
  background: #f5f6f8 !important;
  border: 1px solid #dedede !important;
  border-radius: 8px !important;
  margin-bottom: 0 !important;
  font-size: 14px;
}
.sc-demo-page .form-control:focus {
  border-color: #008080 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(0,128,128,.1) !important;
  outline: none !important;
}
/* intlTelInput wrapper must fill the col */
.sc-demo-page .iti { width: 100% !important; }
.sc-demo-page .iti input.form-control { padding-left: 100px !important; }

/* ── Right panel — form card (mirrors ._rhtForm) ── */
.sc-demo-form-card {
  background:#fff; border:2px solid var(--border); border-radius:16px; padding:32px 28px 28px;
}
.sc-demo-form-eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#008080; background:var(--teal-faint); border:1px solid var(--teal-line);
  padding:4px 10px; border-radius:99px; margin-bottom:14px;
}
.sc-demo-form-eyebrow::before {
  content:''; width:5px; height:5px; border-radius:50%; background:var(--teal);
  animation:sc-pulse 2.5s infinite;
}
.sc-demo-form-title {
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:18px; letter-spacing:-.4px; color:var(--text);
  margin-bottom:6px; line-height:1.2; text-align:left;
}
.sc-demo-form-sub { font-size:13px; color:var(--muted); margin-bottom:24px; line-height:1.55; text-align:left; }

/* Form groups with labels */
.sc-demo-page .fg { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.sc-demo-page .fg label {
  font-size:12px; font-weight:700; color:var(--text-2);
}
.sc-demo-page .fg .form-control {
  background:#fff; border:1.5px solid var(--border); border-radius:8px;
  padding:11px 13px; font-size:14px; color:var(--text); transition:border-color .15s, box-shadow .15s;
}
.sc-demo-page .fg .form-control:focus {
  border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,128,128,.08); outline:none;
}
.sc-demo-page .iti { width:100%; }
.sc-demo-page .iti input { width:100%; }

/* Submit button */
.sc-demo-submit {
  display:block; width:100%; padding:13px;
  background:#590BD5; color:#fff;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:15px; font-weight:700;
  border:none; border-radius:8px; cursor:pointer;
  transition:background .15s, transform .12s, box-shadow .15s;
  margin-top:4px;
}
.sc-demo-submit:hover {
  background:#4908b0; transform:translateY(-1px); box-shadow:0 6px 18px rgba(89,11,213,.28);
}
.sc-demo-submit:disabled { opacity:.65; cursor:not-allowed; transform:none; box-shadow:none; }

/* Form trust notes below button */
.sc-form-trust {
  margin-top:16px; padding-top:14px; border-top:1px dashed var(--border);
  display:flex; flex-direction:column; gap:6px;
}
.ft-row { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); }
.ft-check { color:var(--teal); font-weight:700; font-size:11px; }

/* Error message */
.sc-demo-error { color:#ef4444 !important; font-size:12.5px; margin-top:3px; display:block; }

/* ── Thank-you state ── */
.sc-thankyou { display:none; text-align:center; padding:24px 0 8px; }
.sc-thankyou .ty-icon {
  width:52px; height:52px; border-radius:50%;
  background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700;
  margin:0 auto 16px; box-shadow:0 0 0 8px rgba(0,128,128,.1);
}
.sc-thankyou h3 {
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:19px; font-weight:800; color:var(--text); margin-bottom:8px;
}
.sc-thankyou p { font-size:13.5px; color:var(--muted); line-height:1.6; }

/* ── Logo scroll: extend skin-v1.css keyframe to sc-demo-page ── */
.sc-demo-page .animate-logo-scroll {
  animation: 40s linear infinite logo-scroll;
}

/* ==========================================
   LP PROOF ROW — Gartner card + testimonial slider
   Used on: swyftcomply-ai-demo.php, register/apptrana-waap-free-trial.php
   ========================================== */
.lp-proof-row { display:flex; gap:14px; align-items:stretch; }
.lp-proof-rating-card {position: relative;
  background:#fff; border:1px solid #E6E8F0; border-radius:14px;
  padding:0 20px; flex:0 0 270px;
  display:flex; flex-direction:column; justify-content:center;
}
.lp-proof-rating-card::before{content: '';position: absolute; top: 0;left: 26px;width: 56px;height: 2px;background:#008080;border-radius: 0 0 2px 2px;}
.lp-proof-rating-hero { display:flex; align-items:baseline; gap:10px; margin-bottom:4px; }
.lp-stat-n { font-size:40px; font-weight:800; color:#590BD5; font-family:'Plus Jakarta Sans',sans-serif; line-height:1; }
.lp-proof-stars { color:#008080; font-size:15px; letter-spacing:2px; }
.lp-proof-rating-meta { font-size:12px; color:#3D3D55; font-weight:600; margin-bottom:12px; line-height:1.4; }
.lp-review-link { color:#590BD5; text-decoration:none; }
.lp-proof-rating-list { list-style:none; padding:8px 0 0; margin:0; display:flex; flex-direction:column; gap:6px; }
.lp-proof-rating-list li { font-size:13px; color:#3D3D55; padding-left:13px; position:relative; line-height:1.4; }
.lp-proof-rating-list li::before { content:'•'; position:absolute; left:0; color:#008080; }
.lp-testimonials-wrapper { flex:1; min-width:0; max-width:360px; display:flex; flex-direction:column; gap:10px; }
.lp-testimonials-track-outer { overflow:hidden; border-radius:14px; }
.lp-testimonials-track { display:flex; transition:transform 0.38s ease; }
.lp-testimonial-card {
  background:#fff; border:1px solid #E6E8F0; border-radius:14px;position: relative;
  padding:16px; flex:0 0 100%; display:flex; flex-direction:column; gap:10px; box-sizing:border-box;
}
.lp-testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 18px;
    width: 56px;
    height: 2px;
    background: #590BD5;
    border-radius: 0 0 2px 2px;
}
.lp-testimonial-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lp-customer-photo { width:60px; height:60px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.lp-company-logo { max-width:110px; max-height:55px; object-fit:contain; }
.lp-testimonial-card blockquote { font-size:13px; color:#161622; line-height:1.6; font-style:normal; border:none; padding:0; margin:0; }
.lp-testimonial-source { margin-top:auto; padding-top:10px; border-top:1px solid #E6E8F0; }
.lp-featured-name { font-size:12.5px; font-weight:800; color:#161622; font-family:'Plus Jakarta Sans',sans-serif; }
.lp-featured-title { font-size:11px; color:#676780; margin-top:2px; line-height:1.3; }
.lp-slider-nav { display:flex; align-items:center; justify-content:center; gap:8px; }
.lp-slider-dots { display:flex; align-items:center; gap:5px; }
.lp-dot { width:7px; height:7px; border-radius:50%; background:#E6E8F0; border:none; cursor:pointer; padding:0; transition:background 0.2s,width 0.2s,border-radius 0.2s; }
.lp-dot.active { background:#590BD5; width:18px; border-radius:4px; }
.lp-slider-btn {
  width:26px; height:26px; border:1px solid #E6E8F0; border-radius:50%; background:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:12px; color:#3D3D55; transition:border-color 0.2s,color 0.2s; line-height:1;
}
.lp-slider-btn:hover { border-color:#590BD5; color:#590BD5; }

/* "As featured on" grid (swyftcomply-ai-demo.php right column) */
.sc-featured-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px 4px; align-items:center; justify-items:center;
}
.sc-featured-grid img { max-height:35px; width:auto; max-width:80px; display:block; opacity:0.7; }
/* Row 1: Gartner + Forrester — each spans 3 of 6 cols, pulled toward centre */


/* featuredOn Swiper logo constraint (register page) */
.apptrana-register-page .featuredOn .swiper-slide img {
  max-height:26px; width:auto; max-width:100%; display:inline-block;
}

/* Mobile: stack lp-proof-row vertically */
@media (max-width: 640px) {
  .lp-proof-row { flex-direction:column; }
  .lp-proof-rating-card { flex:0 0 200px; width:100%; }
  .lp-testimonials-wrapper { max-width:100%; }
}