/* Additive styles for the 2026-09 audience split. Reuses landing.css tokens; no rebrand. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--forest-dark); color: #fff; padding: 0.75rem 1rem; }
.skip-link:focus { left: 1rem; top: 1rem; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: var(--radius-sm); }
.nav-menu a[aria-current="page"] { color: var(--orange); }

/* Audience switch banner, adapted from the previous FI Landscape promo banner */
.audience-banner {
    margin-top: 74px; /* clears the fixed navbar (~73px) */
    background: linear-gradient(100deg, #0f1f0f 0%, #1c321c 60%, #0f1f0f 100%);
    border-top: 2px solid var(--orange);
    border-bottom: 1px solid rgba(255, 105, 0, 0.2);
    padding: 0.9rem 0;
}
.audience-banner .container { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; text-align: center; }
.audience-banner p { color: rgba(255, 255, 255, 0.85); font-size: 0.98rem; margin: 0; }
.audience-banner strong { color: #fff; }
.audience-banner a {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff; font-weight: 600; font-size: 0.9rem; padding: 0.55rem 1.1rem;
    border-radius: var(--radius-sm); text-decoration: none; transition: var(--transition);
}
.audience-banner a:hover { background: rgba(255, 105, 0, 0.18); border-color: var(--orange); }
.audience-banner .arr { color: var(--orange); }

.hero-context { display: inline-block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--forest-light); margin-bottom: var(--space-sm); }
.hero-sub-link { margin-top: var(--space-sm); font-size: 0.95rem; color: var(--text-muted); }
.hero-sub-link a { color: var(--forest-dark); text-decoration: underline; text-underline-offset: 3px; }

/* Recognizable moments */
.moments { padding: var(--space-section) 0; background: var(--warm-white); }
.moments-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-md); }
.moment { padding: var(--space-md); border-left: 3px solid var(--orange); background: var(--white); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.moment h3 { font-size: 1.2rem; margin-bottom: var(--space-xs); }
.moment p { color: var(--text-muted); font-size: 0.95rem; }

.progress-band { padding: var(--space-xl) 0; background: var(--forest-dark); color: var(--text-light); }
.progress-band h2 { color: #fff; }
.progress-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-md); list-style: none; }
.progress-list li { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: var(--space-sm); color: rgba(255, 255, 255, 0.85); }
.progress-list.has-art { grid-template-columns: repeat(4, 1fr); }
.progress-list .progress-art { border-top: 0; padding-top: 0; display: flex; align-items: center; }
.progress-art img { width: 100%; height: auto; }
.progress-list strong { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 1.35rem; color: #fff; margin-bottom: 0.35rem; }

.reassure { padding: var(--space-section) 0; background: var(--cream); }
.reassure-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md) var(--space-lg); margin-top: var(--space-md); }
.reassure-grid h3 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.reassure-grid p { color: var(--text-muted); }

/* Offering pages */
.offer-when { font-size: 0.9rem; margin-bottom: var(--space-sm); }
.offer-when strong { color: var(--orange); }
.service-card.featured .offer-when { color: rgba(255, 255, 255, 0.85); }
.offer-price { font-family: var(--font-serif); font-size: 1.35rem; margin: var(--space-xs) 0 var(--space-sm); }
.offer-after { font-size: 0.9rem; font-style: italic; margin-bottom: var(--space-sm); }
.page-intro { padding: 4rem 0 var(--space-lg); background: linear-gradient(170deg, var(--cream) 0%, var(--warm-white) 60%); }
.page-intro h1 { max-width: 18ch; margin-bottom: var(--space-sm); }
.page-intro p { max-width: 62ch; font-size: 1.1rem; color: var(--text-body); }
.offer-section { padding: var(--space-lg) 0 var(--space-section); }

@media (max-width: 1024px) {
    .moments-grid, .progress-list, .progress-list.has-art { grid-template-columns: 1fr; }
    .progress-art { display: none !important; }
}
@media (max-width: 768px) {
    .reassure-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .audience-banner a, .service-card { transition: none; }
    .service-card:hover { transform: none; }
}
/* Offer cards use h2 for outline order but keep the card-title size */
.service-card h2.h3-like { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem); margin-bottom: var(--space-xs); }
.service-card.featured h2.h3-like { color: var(--white); }
/* Toggle sits before the menu in DOM so Tab moves into the opened menu; keep it visually right */
.navbar .mobile-toggle { order: 2; }
.hero-cta-note { margin-top: var(--space-sm); max-width: 34rem; font-size: 0.95rem; line-height: 1.5; color: var(--forest-light); }
.hero h1 { line-height: 1.05; }
@media (min-width: 769px) { .footer-links { gap: var(--space-sm) 1.1rem; } .footer-links a { font-size: 0.8rem; white-space: nowrap; } }

.reassure-card { position:relative; background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); padding:var(--space-md); margin-top:50px; }
.reassure-card h3 { max-width:calc(100% - 130px); }
.reassure-art { position:absolute; top:-50px; right:-12px; height:110px; width:auto; }
.reassure-card h3::after { content:""; display:block; width:32px; height:3px; background:var(--orange); margin-top:8px; border-radius:2px; }

/* Split featured cards: green card one column wide, art on the canvas beside it */
.service-card.featured.offer-split { grid-column: auto; display: block; }
.service-art { display: flex; align-items: center; justify-content: center; }
.service-art img { width: 100%; max-width: 450px; height: auto; }

/* FI home hero on phones: match business page spacing */
@media (max-width: 768px) {
    .hero-sub { margin-top: 1.5em; }
    .hero-sub .hero-lead, .hero-sub .hero-cta-note { max-width: none !important; }
}
/* Banking detail pages */
.detail-grid { list-style: none; padding: 0; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.detail-grid .moment p { color: var(--text-body); font-size: 1rem; }
.page-intro .hero-ctas { margin-top: var(--space-md); }
.detail-meta { font-size: 0.95rem; color: var(--text-muted); }
.detail-body { max-width: 62ch; margin-bottom: var(--space-sm); }
.detail-note { max-width: 62ch; font-size: 0.95rem; color: var(--text-muted); border-left: 3px solid var(--orange); padding-left: var(--space-sm); }
.final-cta > .container > p.detail-back { margin-top: var(--space-md); }
.detail-back a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
/* Banking detail pages: shared components (bk-) */
.bk-hero { padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0; }
.bk-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-lg); align-items: end; }
.bk-hero-aside { position: relative; display: flex; flex-direction: column; align-items: center; }
.bk-hero-art { width: 100%; max-width: 440px; height: auto; }
.bk-price-panel { position: relative; margin-top: -2.5rem; align-self: flex-end; background: var(--forest-dark); color: var(--white); border-radius: var(--radius-lg); padding: 1.5rem 1.75rem; box-shadow: var(--shadow-lg); border-top: 4px solid var(--orange); max-width: 300px; }
.page-intro .bk-price-panel p { color: rgba(255,255,255,0.8); font-size: 0.95rem; margin: 0; }
.page-intro .bk-price-panel .offer-price { font-size: clamp(2.4rem, 2rem + 1.5vw, 3.2rem); color: var(--white); line-height: 1; margin-bottom: 0.6rem; }
.bk-price-panel .price-unit { font-size: 0.45em; opacity: 0.85; }
.bk-split, .bk-agenda, .bk-outcome { padding: clamp(3.5rem, 3rem + 3vw, 6rem) 0; }
.bk-split { background: var(--warm-white); }
.bk-split-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-lg); align-items: center; }
.bk-split-art img { width: 100%; height: auto; }
.bk-split .section-sub { margin-bottom: var(--space-md); }
.bk-situations { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.bk-situations li { background: var(--white); border-radius: var(--radius-md); padding: 1rem 1.25rem 1rem 3rem; position: relative; box-shadow: var(--shadow-sm); }
.bk-situations li::before { content: ""; position: absolute; left: 1.25rem; top: 1.45rem; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--orange-glow); }
.bk-agenda { background: var(--forest-dark); }
.bk-agenda h2 { color: var(--white); margin-bottom: var(--space-md); }
.bk-timeline { list-style: none; padding: 0; counter-reset: bkstep; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-sm); position: relative; }
.bk-timeline-4 { grid-template-columns: repeat(4, 1fr); }
.bk-timeline li { counter-increment: bkstep; position: relative; padding-top: 3.75rem; }
.bk-timeline li::before { content: counter(bkstep, decimal-leading-zero); position: absolute; top: 0; left: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-serif); font-size: 1.1rem; background: var(--orange); color: var(--white); z-index: 1; }
.bk-timeline li:not(:last-child)::after { content: ""; position: absolute; top: 1.375rem; left: 2.75rem; right: calc(-1 * var(--space-sm)); height: 2px; background: rgba(255,255,255,0.2); }
.bk-timeline p { color: rgba(255,255,255,0.85); font-size: 0.98rem; }
.bk-outcome { background: var(--cream); }
.bk-outcome-panel { display: grid; grid-template-columns: 1fr auto; gap: var(--space-lg); align-items: center; background: var(--white); border-radius: var(--radius-lg); padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); box-shadow: var(--shadow-md); border-left: 6px solid var(--orange); }
.bk-outcome-panel h2 { margin-bottom: var(--space-sm); }
.bk-outcome-panel .detail-body { margin-bottom: 0; font-size: 1.1rem; color: var(--text-body); }
.bk-outcome-art { width: 280px; max-width: 100%; height: auto; }
@media (max-width: 900px) {
    .bk-hero-grid, .bk-split-grid, .bk-outcome-panel { grid-template-columns: 1fr; gap: var(--space-md); }
    .bk-hero-art { max-width: 320px; }
    .bk-price-panel { align-self: stretch; max-width: none; }
    .bk-split-art { max-width: 300px; }
    .bk-timeline { grid-template-columns: 1fr; gap: var(--space-md); }
    .bk-timeline li { padding: 0.4rem 0 0 4rem; min-height: 2.75rem; }
    .bk-timeline li:not(:last-child)::after { top: 2.75rem; left: 1.375rem; right: auto; width: 2px; height: calc(100% - 0.75rem); }
    .bk-outcome-art { width: 200px; }
}
.bk-outcome-panel .detail-note { margin-top: var(--space-md); }