/* =========================================================================
   Salesforce Architecture Assessment (landing page)
   Page-scoped styles. Reuses the site token system in ../../css/styles.css.
   No net-new tokens, fonts, or colors are introduced: every value below
   resolves to an existing site variable.

   Fonts are NOT redeclared here. The global stylesheet already loads Inter
   and JetBrains Mono from /fonts/, so a second @font-face block would only
   duplicate work the browser has already done.
   ========================================================================= */

/* ---- Page scope --------------------------------------------------------- */
.saa-page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.saa-mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-feature-settings: "tnum" 1;
}

/* ---- Shared page helpers ------------------------------------------------ */
.saa-narrow {
    max-width: 760px;
}

.saa-prose {
    font-size: 17px;
    color: var(--text-muted);
    line-height: 1.75;
    margin: 0 0 20px;
}
.saa-prose:last-child {
    margin-bottom: 0;
}

/* No section-alt helper here on purpose: the site alternates section
   backgrounds automatically via .section:nth-child(even) in ../../css/styles.css.
   Adding an explicit alt class fights that rule and stacks alt on alt. */

.saa-btn {
    display: inline-block;
    text-decoration: none;
}

/* Supporting line that trails a block (timing, scope). Deliberately quiet:
   it qualifies the block above it and must not read as a second CTA. */
.saa-note {
    margin: 24px 0 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text-muted);
}

/* ---- Hero --------------------------------------------------------------- */
.saa-hero {
    position: relative;
    padding: 112px 0 72px;
    overflow: hidden;
}

/* Matches .saa-narrow so the hero and body copy share one left edge. */
.saa-hero-inner {
    max-width: 760px;
}

.saa-eyebrow {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--accent-primary);
    margin: 0 0 22px;
}

.saa-hero-title {
    font-size: clamp(34px, 5.6vw, 58px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.06;
    color: var(--text-main);
    margin: 0 0 24px;
}

/* The hook states the outcome. One step down from H1, full text color. */
.saa-hero-hook {
    font-size: clamp(21px, 2.7vw, 28px);
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.35;
    max-width: 28ch;
    letter-spacing: -0.015em;
    margin: 0 0 16px;
}

/* Supporting detail, subordinate to the hook: smaller, regular, muted. */
.saa-hero-spec {
    font-size: 17px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 34px;
}

.saa-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
}

/* Subtle, staggered hero fade-in (disabled under reduced motion) */
@keyframes saa-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.saa-hero-inner > * {
    animation: saa-fade-in 0.6s ease both;
}
.saa-hero-inner > *:nth-child(2) { animation-delay: 0.06s; }
.saa-hero-inner > *:nth-child(3) { animation-delay: 0.12s; }
.saa-hero-inner > *:nth-child(4) { animation-delay: 0.18s; }
.saa-hero-inner > *:nth-child(5) { animation-delay: 0.24s; }

/* ---- Plain marked lists (fit, deliverables, credentials) ----------------
   Same "+" marker the Org Access Assessment page uses, so the two service
   pages read as one family rather than two designs.
   ------------------------------------------------------------------------ */
.saa-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.saa-list li {
    position: relative;
    padding-left: 22px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-muted);
}

.saa-list li::before {
    content: "+";
    position: absolute;
    left: 0;
    top: -1px;
    font-weight: 700;
    color: var(--accent-primary);
}

/* Intro line above a list or grid. */
.saa-lead {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0 0 24px;
}

/* Closing line beneath a list. Slightly stronger than .saa-note: it is the
   point of the list, not a qualifier on it. */
.saa-close {
    margin: 24px 0 0;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--text-main);
    font-weight: 500;
}

/* ---- Cross-link beneath the frameworks grid -----------------------------
   Body text, not a callout. Styling it as a CTA would compete with the two
   booking buttons and split the page's single conversion action.
   ------------------------------------------------------------------------ */
.saa-crosslink {
    margin: 32px 0 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text-muted);
}

/* ---- Numbered steps ----------------------------------------------------- */
.saa-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    counter-reset: saa-step;
}

.saa-step {
    position: relative;
    padding: 20px 24px 20px 58px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card-bg-soft);
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.7;
}

/* Numbered marker, mono, matches the site's numeric treatment. */
.saa-step::before {
    counter-increment: saa-step;
    content: counter(saa-step, decimal-leading-zero);
    position: absolute;
    left: 22px;
    top: 20px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-primary);
}

.saa-step-title {
    display: block;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}

/* ---- Differentiator callout --------------------------------------------- */
.saa-credit {
    margin: 32px 0 0;
    padding: 26px 28px;
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--accent-primary);
    border-radius: 12px;
    background: var(--card-bg-soft);
}

.saa-credit-lead {
    margin: 0 0 10px;
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-main);
}

.saa-credit-body {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-muted);
}

/* ---- Final CTA band ----------------------------------------------------- */
.saa-cta-band {
    padding: 92px 0;
    background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
}
.saa-cta-inner {
    text-align: center;
}
.saa-cta-title {
    max-width: 24ch;
    margin: 0 auto 16px;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: #ffffff;
    /* Even two lines when it has to wrap, rather than a short second line. */
    text-wrap: balance;
}

/* Sits on ONE line wherever the viewport allows. The sentence measures ~483px
   at 17px Inter, so the cap has to clear that with headroom for a fallback
   font: a ch-based cap does not, which is what previously orphaned the last
   word onto its own line at every width down from desktop. min() keeps it
   inside the container on small screens, where wrapping is unavoidable, and
   text-wrap: balance splits those two lines evenly instead of leaving a
   one-word runt. */
.saa-cta-line {
    max-width: min(100%, 36rem);
    margin: 0 auto 28px;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    text-wrap: balance;
}
/* White button on the colored band (higher specificity than .btn-primary) */
.saa-cta-btn.btn-primary {
    background: #ffffff;
    color: var(--accent-hover);
}
.saa-cta-btn.btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 760px) {
    .saa-hero {
        padding: 88px 0 56px;
    }
    .saa-step {
        padding: 18px 20px 18px 52px;
    }
    .saa-step::before {
        left: 18px;
        top: 18px;
    }
    .saa-credit {
        padding: 22px 20px;
    }
    .saa-cta-band {
        padding: 72px 0;
    }
}

@media (max-width: 480px) {
    /* Scoped to main on purpose. .nav-inner and .footer-inner also use
       .container, and the header is a flex row whose logo does not shrink
       below ~250px. Adding 20px of padding to it pushes .nav-right past the
       viewport and gives the whole page a horizontal scrollbar at 320px. */
    .saa-page main .container {
        padding: 0 20px;
    }
    .saa-hero-actions {
        gap: 14px 18px;
    }
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .saa-page *,
    .saa-page *::before,
    .saa-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .saa-hero-inner > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}