/* ── site.css ───────────────────────────────────────────────────────────────
   Site-specific additions layered on top of snp.css + snp-nav.css.
   Mock site for snapscale.com v2. Keep this thin — prefer framework classes.
   ────────────────────────────────────────────────────────────────────────── */

body {
    background-color: #fff;
}
/* Chevron-style links use the chevron as their affordance, so suppress the
   default anchor underline there. */
.nav-link,
.nav-sub-link { border-bottom: none; }
.footer-links a { border-bottom: none; }

/* ── Sticky nav + hero deepening ─────────────────────────────────────────── */
.main-nav {  }
.main-nav-bar .nav-list {}
.logo {
   border: 0;
   width:110px;
   margin-right: 28px;
   margin-top: 5px;
   flex-shrink: 0;
   display: block;
}
.logo img {
    width:110px;
}


/* deeper hero background than .dark for contrast */
.darker { background: #15121e; }

section {
    padding-top: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 6);
}

.hero-section {
    min-height: 600px;
    display: flex;
    align-items: center;
}
.hero-section .hero { width: min(820px, 92%); margin: 0 auto; }
.hero-section .hero h2 {opacity: .9; font-weight: 300; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* page banner (interior pages — smaller than the home hero) */
.page-banner { padding: 56px 0 48px;}
.page-banner .eyebrow { margin-bottom: 6px; }
.page-banner h1 { font-size: 2.75rem; line-height: 1.05; }
.page-banner p.lead { color: var(--light-muted-4); max-width: 760px; margin-top: 12px; font-size: .95rem; }

/* ── Trust / compliance bar ──────────────────────────────────────────────── */
.trust-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.trust-bar span { display: inline-flex; align-items: center; gap: 8px; opacity: .8; }
.trust-bar span::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--color-1);
    display: inline-block;
}

/* ── Surface card (feature tiles) ────────────────────────────────────────── */
.s-card {
    background: #fff;
    border: 1px solid var(--light-muted-2);
    border-radius: 8px;
    padding: 22px;
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease;
}
.s-card.dark {
    background-color: var(--dark-1);
}
.s-card.hoverable:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.10); }
.s-card h4, .s-card h5 { margin-bottom: 6px; }
.s-card .s-card-eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;}
.dark .s-card, .dark-2 .s-card { background: var(--dark-2); border-color: var(--dark-border); color: var(--light-muted-1); }
.dark .s-card p { color: var(--light-muted-3); }

/* number marker for lifecycle / steps in body copy */
.num-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--color-1); color: #fff; font-weight: 600; font-size: .85rem;
    flex-shrink: 0;
}

/* pricing card */
.price-card { text-align: center; }
.price-card .price { font-size: 2.25rem; font-weight: 300; line-height: 1; margin: 6px 0; }
.price-card .price small { font-size: .85rem; opacity: .6; }
.price-card.featured { border-color: var(--color-1); box-shadow: 0 8px 28px rgba(254,95,74,.18); }

/* simple icon-less leadership tile */
.leader { padding: 16px 0; border-top: 1px solid var(--light-muted-2); }
.leader .leader-name { font-weight: 600; font-size: .95rem; margin-bottom: 1px; }
.leader .leader-title { font-size: .76rem; color: var(--color-4); margin-bottom: 6px; }
.leader p { font-size: .78rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
    padding-top: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 6);
}
.site-footer .footer-brand h3 {font-weight: 300; margin-bottom: 8px; }
.site-footer .footer-brand p { font-size: .78rem; max-width: 320px; }
.site-footer h6 {
    color: var(--light-muted-3);
    font-size: .72rem; text-transform: uppercase;
    letter-spacing: .06em; margin-bottom: 12px; font-weight: 600;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 8px; }
.footer-links a {
    position: relative;
    display: inline-block;
    padding-right: 18px;
    text-decoration: none;
    font-size: .8rem;
    transition: color .15s;
}
.footer-links a:hover { }
/* Animated-in right chevron, matching .nav-sub-link */
.footer-links a::after {
    content: '\203A';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    font-size: 1.05em;
    line-height: 1;
    pointer-events: none;
}
.footer-links a:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.footer-bottom {
    border-top: 1px solid var(--dark-border);
    margin-top: 36px; padding-top: 20px;
    display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
    font-size: .72rem; color: var(--light-muted-4);
}

/* nav CTA button shouldn't wrap */
.nav-cta { margin-top:0px;margin-left: auto; white-space: nowrap; }

/* deflection / callout box */
.callout {
    border: 1px solid var(--color-1);
    border-left-width: 4px;
    border-radius: 6px;
    background: rgba(254,95,74,.06);
    padding: 16px 18px;
}
.callout strong { color: var(--color-2); }

/* utility */
.muted-text { color: var(--light-muted-3); }
.center-narrow { max-width: 720px; margin-left: auto; margin-right: auto; }
.gap-grid { display: flex; flex-direction: column; gap: 10px; }