/* Homepage only */

/* Homepage hero image only */
.home-hero{ --hero-bg: url('/assets/img/sa-web-background.png') }

/* Stat card in hero — homepage-specific sizing is below; base styles are in base.css */

/* Feature cards — base styles in base.css */

/* Security split */
.security{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center }
.security__copy .check-list{ list-style:none; padding:0; margin:12px 0 18px }
.security__copy .check-list li{ margin:8px 0; padding-left:18px; position:relative }
.security__copy .check-list li::before{ content:"•"; position:absolute; left:0; color:var(--red); font-weight:900 }
.security__panel{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start }
.badge{ background:var(--surface); border:2px solid var(--red); color:var(--red); border-radius:999px; padding:8px 12px; font-weight:800; font-size:.9rem }
.badge--alt{ border-color:var(--orange); color:var(--orange) }
@media (max-width:900px){ .security{ grid-template-columns:1fr } }

/* Steps — base styles moved to base.css */

/* Audience split */
.audience-grid{ align-items:stretch }
.audience-card{ display:flex; flex-direction:column; gap:10px; padding:24px }
.audience-card h3{ margin:0 0 4px 0; font-size:1.25rem }
.audience-card p{ color:var(--gray-dark); flex:1; margin:0 }
.audience-card .btn{ margin-top:16px; align-self:flex-start; white-space:nowrap }
.audience-card__tag{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--red); padding:2px 8px; border:1px solid var(--border); border-radius:999px; width:fit-content; margin-bottom:4px }
.audience-card--new{ border:2px solid var(--red) }
.audience-card--existing{ border:2px solid var(--border) }

/* Industry cards — base styles in base.css */

/* Testimonials */
.testimonial{ padding:24px; display:flex; flex-direction:column; gap:0 }
.testimonial blockquote{ margin:0 0 16px 0; color:var(--gray-dark); font-style:italic; font-size:.95rem; line-height:1.65; flex:1; padding-left:14px; border-left:3px solid var(--red) }
.testimonial figcaption{ font-size:.85rem; font-weight:700; color:var(--black); border-top:1px solid var(--border); padding-top:12px; margin:0 }

/* Final CTA block — base styles in base.css */
@media (max-width:980px){ .hero--enhanced .stat-card{ max-width:100% } }
/* Hero stat card — right align + shrink-wrap */
.hero__art{
  justify-self: end;            /* push the card to the right side */
}

.hero__art .stat-card{
  display: inline-grid;         /* shrink to content */
  gap: 10px;
  padding: 16px 18px;
  inline-size: fit-content;     /* modern shrink-to-fit */
  max-inline-size: 520px;       /* safety cap */
  margin-inline-start: auto;    /* extra nudge to the right if needed */
}

/* On small screens let it span naturally */
@media (max-width: 980px){
  .hero__art{ justify-self: start; }
  .hero__art .stat-card{
    display: grid;
    inline-size: auto;
    max-inline-size: 100%;
    margin-inline-start: 0;
  }
}
/* Security section: center the single button only (don't affect headings/text) */
.security__copy .btn{
  display:block;            /* allow auto margins to center */
  width:max-content;
  margin:14px auto 0;       /* space above + centered */
}

/* Mobile: center audience card CTA when card is stacked */
@media (max-width: 720px) {
  .audience-card .btn { align-self: center; }
}

/* Mobile: center security panel badges when section stacks */
@media (max-width: 900px) {
  .security__panel { justify-content: center; }
}