/* =========================================================================
   Fractional Salesforce Architecture & Governance Advisory (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.

   Prefix is fga- (Fractional Governance Advisory). It deliberately mirrors
   the saa- sheet next door so the two service pages read as one family;
   the only page-specific block is the engagement tier row near the bottom.
   ========================================================================= */

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

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

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

/* 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. */

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

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

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

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

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

.fga-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.

   38ch, not the 28ch the assessment page uses: this hook is 15 words rather
   than 12. Measured at 768, 1024 and 1440, 38ch is the widest cap that holds
   the hook to two even lines at every one of them. Narrower caps (34ch) push
   it to three and strand "hard to" at the end of line two. No text-wrap:
   balance here on purpose, since the two lines are already even and balance
   would only reintroduce a width-dependent break. */
.fga-hero-hook {
    font-size: clamp(21px, 2.7vw, 28px);
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.35;
    max-width: 38ch;
    letter-spacing: -0.015em;
    margin: 0 0 16px;
}

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

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

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

/* ---- Plain marked lists (triggers, deliverables, credentials) -----------
   Same "+" marker the two assessment pages use, so the service pages read
   as one family rather than three designs.
   ------------------------------------------------------------------------ */
.fga-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

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

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

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

/* Closing line beneath a list. Slightly stronger than .fga-note: it is the
   point of the list, not a qualifier on it. Also carries the page's two
   fragment-triple disqualifiers, which need the extra weight to land. */
.fga-close {
    margin: 24px 0 0;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--text-main);
    font-weight: 500;
}

/* ---- Worked examples beneath the six cards ------------------------------
   Sits inside the wide (card-grid) section, so it has to reimpose the 760px
   measure that .fga-narrow gives the prose-only sections. Without this the
   list would set at the full 1136px container width.
   ------------------------------------------------------------------------ */
.fga-examples {
    max-width: 760px;
    margin: 44px 0 0;
}

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

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

.fga-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. */
.fga-step::before {
    counter-increment: fga-step;
    content: counter(fga-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);
}

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

/* ---- Engagement tiers ---------------------------------------------------
   The only block on this page with no counterpart on the assessment pages.
   Deliberately NOT .services-grid: that grid paints accent stripes by
   nth-child, which would rank the three tiers by color and imply the third
   is the "best" one. These are three shapes of the same engagement, so they
   share one neutral treatment and are separated by content alone.

   Ordered ascending by commitment in the markup. The axis that actually
   differentiates them is who owns the decision, which is why .fga-tier-owner
   sits above the body copy rather than buried inside it.
   ------------------------------------------------------------------------ */
.fga-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.fga-tier {
    display: flex;
    flex-direction: column;
    padding: 28px 26px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--card-bg-soft);
}

.fga-tier-name {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-main);
}

/* The differentiating axis. Mono and accent-colored so it scans as a label
   across all three cards before any body copy is read. */
.fga-tier-owner {
    margin: 0 0 14px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: var(--accent-primary);
}

.fga-tier-body {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text-muted);
}

/* ---- Differentiator callout --------------------------------------------- */
.fga-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);
}

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

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

/* ---- Final CTA band ----------------------------------------------------- */
.fga-cta-band {
    padding: 92px 0;
    background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
}
.fga-cta-inner {
    text-align: center;
}
.fga-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;
}

/* Same treatment as the assessment page's closing line: a rem-based cap
   rather than a ch-based one, so the sentence clears its own measure with
   headroom for a fallback font instead of orphaning its last word. */
.fga-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) */
.fga-cta-btn.btn-primary {
    background: #ffffff;
    color: var(--accent-hover);
}
.fga-cta-btn.btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 760px) {
    .fga-hero {
        padding: 88px 0 56px;
    }
    .fga-step {
        padding: 18px 20px 18px 52px;
    }
    .fga-step::before {
        left: 18px;
        top: 18px;
    }
    .fga-tier {
        padding: 24px 22px;
    }
    .fga-credit {
        padding: 22px 20px;
    }
    .fga-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. */
    .fga-page main .container {
        padding: 0 20px;
    }
    .fga-hero-actions {
        gap: 14px 18px;
    }
    /* Below this width the 260px track plus container padding no longer
       fits, and auto-fit would otherwise force a horizontal overflow. */
    .fga-tiers {
        grid-template-columns: 1fr;
    }
}

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