body.inner-page { background: var(--Royal-Blue-Blue-900,#051A3C); color: var(--Base-White,#fcfcfc); }

/* Container — matches index.html breakpoint ladder (capped at 1320px) */
.container { width: 100%; max-width: 100%; margin-right: auto; margin-left: auto; padding-right: 1rem; padding-left: 1rem; }
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* ── INTRO (plain, light — no hero banner) ── */
.sff-intro__inner { text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; max-width:720px; margin:0 auto 72px; position:relative; z-index:1; }
.sff-intro__title { font-family:'Space Grotesk',sans-serif; font-weight:300; font-size:56px; line-height:64px; letter-spacing:-0.8px; color:var(--Royal-Blue-Blue-900,#051A3C); margin:8px 0 0; }
.pr-gradient { font-style:normal; background:linear-gradient(110deg,#2863C3 0%,#4075C9 25%,#7747b6 55%,#2863C3 80%,#4075C9 100%); background-size:260% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:heroShimmer 5s linear infinite; }
@keyframes heroShimmer { 0% { background-position:0% center; } 100% { background-position:260% center; } }
.sff-intro__copy { display:flex; flex-direction:column; gap:8px; max-width:560px; margin-top:4px; }
.sff-intro__trustline { font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--Violet-Violet-450,#7747b6); margin:0; }
.sff-intro__sub { font-family:'Inter',sans-serif; font-size:17px; line-height:27px; color:#4a5568; margin:0; }
.sff-intro__ctas { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:16px; }

.sff-intro__demo { font-family:'Inter',sans-serif; font-size:14px; font-weight:500; color:#4a5568; margin-top:-6px; }
.sff-intro__demo-link { color:var(--Violet-Violet-500,#55298e); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.sff-intro__demo-link:hover { color:var(--Violet-Violet-450,#7747b6); }

/* ── WHAT HAPPENS NEXT (3-step, sits above the sign-up CTA) ── */
.sff-steps { width:100%; max-width:620px; margin-top:20px; padding:24px 28px; border-radius:16px; background:rgba(119,71,182,.05); border:1px solid rgba(119,71,182,.16); display:flex; flex-direction:column; align-items:center; gap:18px; }
.sff-steps__eyebrow { font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--Violet-Violet-450,#7747b6); margin:0; }
.sff-steps__list { display:grid; grid-template-columns:repeat(3,1fr); gap:10px 12px; width:100%; position:relative; }
.sff-steps__list::before { content:''; position:absolute; top:13px; left:16.6667%; right:16.6667%; height:1px; background:rgba(119,71,182,.30); z-index:0; }
.sff-step { display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; position:relative; z-index:1; padding:0 4px; }
.sff-step__num { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:26px; height:26px; border-radius:50%; background:#efe7f8; border:1px solid rgba(119,71,182,.35); font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; color:var(--Violet-Violet-500,#55298e); }
.sff-step__text { font-family:'Inter',sans-serif; font-size:13.5px; font-weight:500; line-height:1.4; color:#4a5568; margin:0; }

@media (max-width: 767px) {
    .sff-steps { padding:20px 24px; }
    .sff-steps__list { grid-template-columns:1fr; gap:16px; }
    .sff-steps__list::before { display:none; }
    .sff-step { flex-direction:row; align-items:flex-start; text-align:left; gap:10px; }
    .sff-step__text { text-align:left; }
}

/* ── EYEBROW (light sections) ── */
.pr-eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:50px; border:1px solid rgba(14,72,165,.14); background:rgba(14,72,165,.08); font-family:'Inter',sans-serif; font-size:11px; font-weight:500; letter-spacing:1.6px; text-transform:uppercase; color:var(--Royal-Blue-Blue-500,#0e48a5); margin-bottom:0; }

/* ── PRODUCT TRIO ── */
.sff-products {
    background:#fcfcfc;
    padding:96px 0;
    position:relative;
    overflow:hidden;
}
.sff-products::before {
    content:'';
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(40,99,195,.14) 1px,transparent 1px);
    background-size:24px 24px;
    z-index:0;
    pointer-events:none;
}
.sff-products__head { text-align:center; margin-bottom:60px; position:relative; z-index:1; padding-top:48px; border-top:1px solid rgba(14,72,165,.10); }
.sff-products__title { font-family:'Space Grotesk',sans-serif; font-weight:300; font-size:34px; line-height:44px; letter-spacing:-0.5px; color:var(--Royal-Blue-Blue-900,#051A3C); margin:0 0 14px; }
.sff-products__sub { font-family:'Inter',sans-serif; font-size:16px; line-height:26px; color:#4a5568; margin:0 auto; max-width:560px; }

.sff-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; z-index:1; }

.sff-card {
    --sff-accent:#7747b6;
    --sff-text:#55298e;
    --sff-soft:rgba(119,71,182,.10);
    --sff-border:rgba(119,71,182,.30);
    --sff-media-bg:#f3edfb;
    background:#fff;
    border:1px solid rgba(119,71,182,.22);
    border-radius:20px;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    overflow:hidden;
    box-shadow:0 4px 16px -8px rgba(20,20,40,.10);
    transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s;
}
.sff-card:hover { transform:translateY(-6px); box-shadow:0 16px 36px -10px var(--sff-border); border-color:var(--sff-accent); }

/* Distinct accent per product, mirroring the pattern already used for
   testimonial tabs / persona tabs: Insights → Royal Blue, Ask Me → Violet,
   Data Magnet → Turquoise (see final-home-bundle.css). */
.sff-cards .sff-card:nth-child(1){ --sff-accent:#2863c3; --sff-text:#0e48a5; --sff-soft:rgba(40,99,195,.10); --sff-border:rgba(40,99,195,.30); --sff-media-bg:#eef3fb; }
.sff-cards .sff-card:nth-child(2){ --sff-accent:#7747b6; --sff-text:#55298e; --sff-soft:rgba(119,71,182,.10); --sff-border:rgba(119,71,182,.30); --sff-media-bg:#f3edfb; }
.sff-cards .sff-card:nth-child(3){ --sff-accent:#1ca9c9; --sff-text:#0f7a8c; --sff-soft:rgba(28,169,201,.10); --sff-border:rgba(28,169,201,.30); --sff-media-bg:#eaf7f9; }

.sff-card__media { width:100%; aspect-ratio:16/10; background:var(--sff-media-bg); border-bottom:1px solid rgba(20,20,40,.06); display:flex; align-items:center; justify-content:center; padding:20px; }
.sff-card__media img { width:auto; height:auto; max-width:72%; max-height:72%; object-fit:contain; display:block; }

.sff-card__body { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:32px 32px 36px; flex:1; }

.sff-card__tagline { font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sff-text); margin:0 0 6px; }
.sff-card__title { font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:22px; line-height:30px; letter-spacing:-0.2px; color:var(--Royal-Blue-Blue-900,#051A3C); margin:0 0 12px; }
.sff-card__desc { font-family:'Inter',sans-serif; font-size:15px; line-height:26px; color:#4a5568; margin:0 0 20px; }

.sff-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.sff-chip { display:inline-flex; align-items:center; padding:6px 14px; border-radius:50px; background:var(--sff-soft); border:1px solid var(--sff-border); font-family:'Inter',sans-serif; font-size:12px; font-weight:500; color:var(--sff-text); }

/* ── DARK FAQ ── */
.sff-dark-faq {
    position:relative;
    background:linear-gradient(160deg,#1d0b42 0%,#0d1e49 45%,#051A3C 100%);
    padding:96px 0;
    overflow:hidden;
    color:#fcfcfc;
}
.sff-dark-faq::before {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse 70% 80% at 15% 50%,rgba(85,41,142,.40) 0%,transparent 65%);
    pointer-events:none;
}

/* ── RESPONSIVE ── */
@media (max-width:1199px) {
    .sff-cards { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
}
@media (max-width:991px) {
    .sff-intro__title { font-size:44px; line-height:54px; }
    .sff-products__title { font-size:28px; line-height:38px; }
    .sff-products { padding:72px 0; }
    .sff-dark-faq { padding:72px 0; }
    .sff-intro__inner { margin-bottom:56px; }
    .sff-products__head { margin-bottom:40px; }
}
@media (max-width:575px) {
    .sff-intro__title { font-size:34px; line-height:44px; }
    .sff-intro__sub { font-size:15.5px; line-height:25px; }
    .sff-products__title { font-size:24px; line-height:34px; }
    .sff-card__body { padding:26px 24px 30px; }
}

/* §13 — reduced-motion counterpart for the hero gradient sweep. */
@media (prefers-reduced-motion: reduce){
    .pr-gradient{ animation: none; }
}

/* ==== CTA & BUTTON STANDARD (site-wide) ==== */
/* Every action button on the site shares one size: 48px tall, 30px side
   padding, 16px label. The height comes from min-height plus centring,
   not vertical padding, so 0/1/2px borders all land on exactly 48px.
   The header and the mobile nav keep their compact buttons. The same
   block is copied into every page bundle; keep the copies identical. */
body :is(.btn-primary:not(.btn-primary--sm), .btn-demo--lg, .au-btn-demo--lg,
    .btn-ghost, .ab-btn-ghost, .ld-btn-ghost, .ld-btn-outline, .ind-btn-ghost,
    .fi-btn-ghost, .hr-btn-ghost, .mk-btn-ghost, .sl-btn-ghost,
    .hero-btn-outline, .hero-btn-demo, .dm2-ghost-btn, .explore-btn,
    .pr-btn-gradient, .pr-btn-outline, .pr-btn-ghost, .pr-tbl-plan__cta,
    .cs-form__submit, .ct-form__submit, .rd-form__submit, .pt-form__submit,
    .rls-signin, .footer-cta-button):not(.site-header *, header *, .mobile-nav-panel *){
    box-sizing: border-box;
    height: auto;
    min-height: 48px;
    padding: 0 30px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;   /* one weight for every CTA — matches the homepage */
    align-items: center;
    justify-content: center;
}
/* Buttons that were plain blocks need flex so the label centres vertically. */
body :is(.btn-ghost, .pr-btn-gradient, .pr-btn-outline, .pr-btn-ghost, .pr-tbl-plan__cta):not(.site-header *, header *, .mobile-nav-panel *){
    display: flex;
}

/* End-of-page CTA card: one height on every page (460px on desktop, 570px
   on tablet where the copy wraps more), copy centred vertically, width
   follows the container. */
@media (min-width: 768px){
    .mcp-cta-card, .au-cta__card, .di-final-cta__card, .ld-cta__card{
        box-sizing: border-box;
        min-height: 460px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}
@media (min-width: 768px) and (max-width: 1023px){
    .mcp-cta-card, .au-cta__card, .di-final-cta__card, .ld-cta__card{ min-height: 570px; }
}

/* Secondary CTA appearance — the geometry above only unified SIZE, which is
   why these still looked different page to page. The gradient border uses the
   padding-box / border-box layer pair so it respects border-radius.
   --cta-surface is the colour the button sits ON; set it (and --cta-ink) on a
   light section so the inner fill and label stay legible there. */
body :is(.btn-demo--lg, .au-btn-demo--lg, .btn-ghost, .ab-btn-ghost, .ld-btn-ghost,
    .ind-btn-ghost, .fi-btn-ghost, .hr-btn-ghost, .mk-btn-ghost, .sl-btn-ghost,
    .hero-btn-outline, .hero-btn-demo, .dm2-ghost-btn):not(.site-header *, header *, .mobile-nav-panel *,
    .au-cta__card *, .di-final-cta__card *, .dm2-res-cta *, .mcp-cta-card *) {
    border: 2px solid transparent;
    border-radius: 6px;
    background:
        linear-gradient(var(--cta-surface, #051A3C), var(--cta-surface, #051A3C)) padding-box,
        var(--Explore-Button, linear-gradient(270deg, #7747b6 0%, #4075c9 50.7%, #1ca9c9 100%)) border-box;
    color: var(--cta-ink, #fcfcfc);
    font-family: 'Inter', sans-serif;
    font-weight: 600;   /* matches the primary — homepage CTA is the source of truth */
    text-decoration: none;
    transition: filter .22s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
body :is(.btn-demo--lg, .au-btn-demo--lg, .btn-ghost, .ab-btn-ghost, .ld-btn-ghost,
    .ind-btn-ghost, .fi-btn-ghost, .hr-btn-ghost, .mk-btn-ghost, .sl-btn-ghost,
    .hero-btn-outline, .hero-btn-demo, .dm2-ghost-btn):not(.site-header *, header *, .mobile-nav-panel *,
    .au-cta__card *, .di-final-cta__card *, .dm2-res-cta *, .mcp-cta-card *):hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
/* ==== /CTA & BUTTON STANDARD ==== */