/**
 * AIFolio Dark — Landing Page Styles
 *
 * Companion to page-landing.php. All dark design tokens come from style.css
 * (:root[data-bs-theme="dark"]) so they are available here without redeclaration.
 *
 * Structure mirrors the 8-section landing layout:
 *   §1  Hero
 *   §2  Proof bar
 *   §3  How It Works
 *   §4  Example Results
 *   §5  Style Preview
 *   §6  Access / CTA
 *   §7  FAQ accordion
 *   §8  Footer
 *   §9  Light/dark toggle
 *
 * Mobile-first: base styles target small screens; breakpoints add layout for md+.
 * Bootstrap's grid handles column layout; these classes handle colour/spacing/effects.
 *
 * @package aifolio-dark
 * @since   0.1.0
 */

/* ── Shared section rhythm ───────────────────────────────────────────────────── */

.aif-hero,
.aif-how-it-works,
.aif-example-results,
.aif-styles,
.aif-faq {
    padding: var(--aif-section-y) 0;
}

.aif-proof-bar,
.aif-access {
    padding: var(--aif-section-y-sm) 0;
}

.aif-section-title {
    font-size:   var(--aif-fs-h2);
    font-weight: var(--aif-fw-bold);
    color:       var(--aif-text);
    margin-bottom: 0.75rem;
}

.aif-section-subtitle {
    font-size:  1.125rem;
    color:      var(--aif-muted);
    max-width:  600px;
    margin:     0 auto;
    line-height: 1.6;
}

/* ── §1 Hero ─────────────────────────────────────────────────────────────────── */

.aif-hero {
    background-color: var(--aif-base);
    position:         relative;
    overflow:         hidden;
    min-height:       90vh;
    display:          flex;
    align-items:      center;
}

/* Subtle grid-dot background texture (pure CSS, no image) */
.aif-hero::before {
    content:          '';
    position:         absolute;
    inset:            0;
    background-image: radial-gradient(circle, var(--aif-border) 1px, transparent 1px);
    background-size:  32px 32px;
    opacity:          0.4;
    pointer-events:   none;
}

/* Radial accent glow behind CTA copy */
.aif-hero::after {
    content:       '';
    position:      absolute;
    top:           20%;
    left:          -10%;
    width:         600px;
    height:        600px;
    background:    radial-gradient(ellipse at center, var(--aif-accent-glow) 0%, transparent 70%);
    pointer-events: none;
}

.aif-hero__copy {
    position: relative;
    z-index:  1;
}

.aif-badge-accent {
    background-color: var(--aif-accent-glow);
    color:            var(--aif-accent-hover);
    border:           1px solid var(--aif-accent);
    font-size:        0.8rem;
    font-weight:      600;
    letter-spacing:   0.05em;
    text-transform:   uppercase;
    padding:          0.35em 0.8em;
    border-radius:    50px;
}

.aif-hero__headline {
    font-size:   var(--aif-fs-h1);
    font-weight: var(--aif-fw-black);
    line-height: 1.15;
    color:       var(--aif-text);
    margin:      1rem 0;
    letter-spacing: -0.02em;
}

.aif-accent-text {
    color:            var(--aif-accent);
    text-shadow:      0 0 30px var(--aif-accent-glow);
}

.aif-hero__subhead {
    font-size:   1.15rem;
    color:       var(--aif-muted);
    line-height: 1.65;
    max-width:   520px;
}

.aif-cta-primary {
    font-size:  1rem;
    box-shadow: 0 4px 20px var(--aif-accent-glow);
}

/* ── Hero headshot grid ──────────────────────────────────────────────────────── */

.aif-hero__grid {
    position: relative;
    z-index:  1;
}

.aif-headshot-grid {
    display:               grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows:    auto auto;
    gap:                   0.75rem;
}

.aif-headshot-cell {
    border-radius: 12px;
    overflow:      hidden;
}

/* Span the "Before" cell across both rows */
.aif-headshot-cell--before {
    grid-row: span 2;
}

.aif-headshot-placeholder {
    height:        260px;
    border-radius: 12px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    position:      relative;
    overflow:      hidden;
    border:        1px solid var(--aif-border);
}

.aif-headshot-cell--before .aif-headshot-placeholder {
    /* Before image — slightly desaturated, lower contrast gradient */
    background: linear-gradient(160deg, #1a1e28 0%, #252c3a 50%, #1a2030 100%);
    height:     100%; /* fill the spanned grid area */
    min-height: 300px;
}

/* Placeholder gradient variants for AI result cells */
.aif-placeholder-2 {
    background: linear-gradient(135deg, #0e1a30 0%, #162040 50%, #1a3050 100%);
    height:     160px;
}
.aif-placeholder-3 {
    background: linear-gradient(135deg, #0e2030 0%, #142840 50%, #1a3850 100%);
    height:     160px;
}
.aif-placeholder-4 {
    background: linear-gradient(135deg, #0e1a3a 0%, #162248 50%, #1a2a58 100%);
    height:     160px;
}

.aif-placeholder-label {
    position:         absolute;
    bottom:           0.75rem;
    left:             50%;
    transform:        translateX(-50%);
    font-size:        0.7rem;
    font-weight:      600;
    letter-spacing:   0.1em;
    text-transform:   uppercase;
    color:            var(--aif-muted);
    background-color: rgba(13, 15, 20, 0.7);
    padding:          0.2em 0.6em;
    border-radius:    50px;
    white-space:      nowrap;
}

/* Hover glow on AI result cells */
.aif-headshot-cell--after .aif-headshot-placeholder {
    transition: box-shadow 0.3s ease;
}
.aif-headshot-cell--after .aif-headshot-placeholder:hover {
    box-shadow: 0 0 20px var(--aif-accent-glow), 0 0 40px var(--aif-accent-glow);
}

/* ── §2 Proof bar ────────────────────────────────────────────────────────────── */

.aif-proof-bar {
    background-color: var(--aif-surface-2);
    border-top:       1px solid var(--aif-border);
    border-bottom:    1px solid var(--aif-border);
}

.aif-proof-stat {
    padding: 1rem 1.5rem;
    position: relative;
}

/* Vertical divider between stats on md+ */
@media (min-width: 768px) {
    .aif-proof-stat + .aif-proof-stat::before {
        content:       '';
        position:      absolute;
        left:          0;
        top:           20%;
        height:        60%;
        width:         1px;
        background:    var(--aif-border);
    }
}

.aif-proof-number {
    font-size:   2rem;
    font-weight: 800;
    color:       var(--aif-accent);
    line-height: 1;
    letter-spacing: -0.02em;
}

.aif-proof-number small {
    font-size:   1rem;
    font-weight: 600;
    color:       var(--aif-accent-hover);
}

.aif-proof-label {
    font-size:  0.875rem;
    color:      var(--aif-muted);
    margin-top: 0.35rem;
    font-weight: 500;
}

/* ── §3 How It Works ─────────────────────────────────────────────────────────── */

.aif-how-it-works {
    background-color: var(--aif-surface);
}

.aif-step-card {
    background-color: var(--aif-surface-2);
    border:           1px solid var(--aif-border);
    border-radius:    16px;
    padding:          2rem 1.75rem;
    position:         relative;
    transition:       border-color 0.2s ease, box-shadow 0.2s ease;
}

.aif-step-card:hover {
    border-color: var(--aif-accent);
    box-shadow:   0 0 0 1px var(--aif-accent-glow), 0 8px 32px rgba(0,0,0,0.3);
}

.aif-step-number {
    font-size:   3.5rem;
    font-weight: 900;
    color:       var(--aif-accent);
    line-height: 1;
    opacity:     0.3;
    position:    absolute;
    top:         1rem;
    right:       1.25rem;
    letter-spacing: -0.04em;
}

.aif-step-icon {
    color:        var(--aif-accent);
    margin-bottom: 1rem;
}

.aif-step-title {
    font-size:   1.2rem;
    font-weight: 700;
    color:       var(--aif-text);
    margin-bottom: 0.75rem;
}

.aif-step-description {
    font-size:  0.95rem;
    color:      var(--aif-muted);
    line-height: 1.65;
    margin:      0;
}

/* ── §4 Example Results ─────────────────────────────────────────────────────── */

.aif-example-results {
    background-color: var(--aif-base);
}

.aif-gallery-item {
    border-radius: 12px;
    overflow:      hidden;
    position:      relative;
    transition:    transform 0.2s ease;
}

.aif-gallery-item:hover {
    transform: translateY(-4px);
}

.aif-gallery-placeholder {
    aspect-ratio:   3 / 4;  /* portrait — typical headshot ratio */
    display:        flex;
    align-items:    center;
    justify-content: center;
    border:         1px solid var(--aif-border);
    border-radius:  12px;
    overflow:       hidden;
    transition:     box-shadow 0.3s ease;
}

.aif-gallery-item:hover .aif-gallery-placeholder {
    box-shadow: 0 0 20px var(--aif-accent-glow), 0 8px 32px rgba(0,0,0,0.4);
    border-color: var(--aif-accent);
}

.aif-gallery-placeholder__inner {
    color:   var(--aif-border);
    opacity: 0.6;
}

.aif-gallery-label {
    text-align:      center;
    font-size:       0.8rem;
    font-weight:     600;
    color:           var(--aif-muted);
    padding:         0.5rem 0;
    letter-spacing:  0.04em;
    text-transform:  uppercase;
}

/* ── §5 Style Preview ────────────────────────────────────────────────────────── */

.aif-styles {
    background-color: var(--aif-surface);
}

.aif-style-card {
    background-color: var(--aif-surface-2);
    border:           1px solid var(--aif-border);
    border-radius:    12px;
    padding:          1.5rem 1rem;
    transition:       border-color 0.2s ease, transform 0.2s ease;
    cursor:           default;
}

.aif-style-card:hover {
    border-color: var(--aif-accent);
    transform:    translateY(-3px);
}

.aif-style-icon {
    font-size:     2rem;
    margin-bottom: 0.5rem;
    line-height:   1;
}

.aif-style-name {
    font-size:  0.875rem;
    font-weight: 600;
    color:       var(--aif-text);
    margin-bottom: 0.25rem;
}

.aif-style-count {
    font-size: 0.75rem;
    color:     var(--aif-muted);
}

/* ── §6 Access / CTA ─────────────────────────────────────────────────────────── */

.aif-access {
    background-color: var(--aif-base);
    /* Subtle radial glow to draw the eye */
    background-image: radial-gradient(ellipse at center, rgba(var(--aif-accent-rgb), 0.06) 0%, transparent 70%);
}

.aif-access-card {
    background-color: var(--aif-surface);
    border:           1px solid var(--aif-border);
    border-radius:    20px;
    padding:          3rem 2.5rem;
    box-shadow:       0 8px 48px rgba(0,0,0,0.4);
}

.aif-access-icon {
    color:         var(--aif-accent);
    margin-bottom: 1.25rem;
}

.aif-access-title {
    font-size:   1.75rem;
    font-weight: 800;
    color:       var(--aif-text);
    margin-bottom: 0.75rem;
}

.aif-access-description {
    color:       var(--aif-muted);
    font-size:   1rem;
    line-height: 1.65;
}

.aif-access-input-group {
    display:   flex;
    gap:       0.5rem;
    flex-wrap: wrap;
}

@media (min-width: 576px) {
    .aif-access-input-group {
        flex-wrap: nowrap;
    }
}

.aif-access-input {
    background-color: var(--aif-surface-2);
    border-color:     var(--aif-border);
    color:            var(--aif-text);
    font-size:        1rem;
    flex:             1 1 auto;
}

.aif-access-input:focus {
    background-color: var(--aif-surface-2);
    border-color:     var(--aif-accent);
    box-shadow:       0 0 0 0.25rem var(--aif-accent-glow);
    color:            var(--aif-text);
}

.aif-access-input::placeholder {
    color: var(--aif-muted);
}

.aif-access-submit {
    white-space: nowrap;
    flex-shrink: 0;
}

.aif-access-message {
    font-size:    0.9rem;
    font-weight:  500;
    padding:      0.75rem 1rem;
    border-radius: 8px;
}

.aif-access-message.is-error {
    background-color: rgba(239, 68, 68, 0.1);
    border:           1px solid var(--aif-danger);
    color:            var(--aif-danger);
}

.aif-access-message.is-success {
    background-color: rgba(34, 197, 94, 0.1);
    border:           1px solid var(--aif-success);
    color:            var(--aif-success);
}

.aif-access-footnote {
    color:     var(--aif-muted);
    font-size: 0.875rem;
}

/* ── §7 FAQ accordion ───────────────────────────────────────────────────────── */

.aif-faq {
    background-color: var(--aif-surface);
}

.aif-accordion__item {
    background-color: var(--aif-surface-2);
    border:           1px solid var(--aif-border);
    border-radius:    10px !important;
    margin-bottom:    0.75rem;
    overflow:         hidden;
}

/* Reset Bootstrap's default accordion border handling */
.aif-accordion .accordion-item + .accordion-item {
    border-top: 1px solid var(--aif-border);
}

.aif-accordion__button {
    background-color: var(--aif-surface-2);
    color:            var(--aif-text);
    font-weight:      600;
    font-size:        0.95rem;
    padding:          1.25rem 1.5rem;
}

.aif-accordion__button:not(.collapsed) {
    background-color: var(--aif-surface-2);
    color:            var(--aif-accent);
    box-shadow:       none;
}

/* Accent-coloured chevron when open */
.aif-accordion__button::after {
    filter: invert(51%) sepia(97%) saturate(1350%) hue-rotate(200deg) brightness(100%) contrast(100%);
}

.aif-accordion__button:focus {
    box-shadow: 0 0 0 0.2rem var(--aif-accent-glow);
    outline:    none;
}

.aif-accordion__body {
    background-color: var(--aif-surface-2);
    color:            var(--aif-muted);
    font-size:        0.95rem;
    line-height:      1.7;
    padding:          1rem 1.5rem 1.5rem;
}

/* ── §8 Landing footer ───────────────────────────────────────────────────────── */

.aif-landing-footer {
    background-color: var(--aif-surface);
    border-top:       1px solid var(--aif-border);
    padding:          2.5rem 0;
}

.aif-footer__brand {
    font-size:       1.25rem;
    font-weight:     800;
    color:           var(--aif-text);
    text-decoration: none;
    letter-spacing:  -0.02em;
}

.aif-footer__brand:hover {
    color: var(--aif-accent);
}

.aif-footer__tagline {
    font-size:    0.8rem;
    color:        var(--aif-muted);
    margin:       0.25rem 0 0;
}

.aif-footer__links {
    display:    flex;
    flex-wrap:  wrap;
    gap:        1.25rem;
    justify-content: center;
}

.aif-footer__links a {
    color:           var(--aif-muted);
    text-decoration: none;
    font-size:       0.875rem;
    transition:      color 0.15s ease;
}

.aif-footer__links a:hover {
    color: var(--aif-accent);
}

.aif-footer__legal {
    font-size: 0.8rem;
    color:     var(--aif-muted);
    margin:    0;
}

/* ── §9 Light/Dark toggle button ────────────────────────────────────────────── */

.aif-theme-toggle {
    position:         fixed;
    bottom:           2rem;
    right:            2rem;
    width:            46px;
    height:           46px;
    border-radius:    50%;
    background-color: var(--aif-surface-2);
    border:           1px solid var(--aif-border);
    color:            var(--aif-text);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    cursor:           pointer;
    z-index:          9999;
    transition:       background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow:       0 4px 16px rgba(0, 0, 0, 0.4);
}

.aif-theme-toggle:hover {
    background-color: var(--aif-surface);
    border-color:     var(--aif-accent);
    box-shadow:       0 4px 20px var(--aif-accent-glow);
}

.aif-theme-toggle:focus {
    outline:    none;
    box-shadow: 0 0 0 3px var(--aif-accent-glow);
}

/* Icon visibility: sun shown in dark mode; moon shown in light mode */
[data-bs-theme="dark"]  .aif-theme-toggle .icon-sun  { display: block; }
[data-bs-theme="dark"]  .aif-theme-toggle .icon-moon { display: none;  }
[data-bs-theme="light"] .aif-theme-toggle .icon-sun  { display: none;  }
[data-bs-theme="light"] .aif-theme-toggle .icon-moon { display: block; }

/* ── Light mode overrides ────────────────────────────────────────────────────── */
/*
 * When the user switches to light mode (data-bs-theme="light" on <html>),
 * Bootstrap's built-in light palette takes over. These overrides ensure our
 * custom tokens still apply in light mode for components that use them directly.
 * This is intentionally minimal — dark is the primary brand mode.
 */

[data-bs-theme="light"] {
    --aif-base:      #f8f9fa;
    --aif-surface:   #ffffff;
    --aif-surface-2: #f1f3f5;
    --aif-border:    #dee2e6;
    --aif-text:      #1a1b1f;
    --aif-muted:     #6c757d;
    /* Accent colours remain the same in light mode */
}

[data-bs-theme="light"] .aif-hero::before {
    opacity: 0.1;
}

[data-bs-theme="light"] .aif-hero::after {
    opacity: 0.15;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §3  What You Can Create — shot-type cards + variety strip
   Added: AIF-03b portfolio repositioning
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section wrapper reuses shared padding rule — add to the rhythm list */
.aif-shot-types {
    padding:          var(--aif-section-y) 0;
    background-color: var(--aif-surface);
}

/* ── Shot-type cards ────────────────────────────────────────────────────── */

.aif-shot-card {
    background-color: var(--aif-surface-2);
    border:           1px solid var(--aif-border);
    border-radius:    16px;
    overflow:         hidden;
    transition:       border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    display:          flex;
    flex-direction:   column;
}

.aif-shot-card:hover {
    border-color: var(--aif-accent);
    box-shadow:   0 0 0 1px var(--aif-accent-glow), 0 8px 32px rgba(0,0,0,0.3);
    transform:    translateY(-4px);
}

/* Visual area — placeholder gradient, replaced by real image in Phase 2 */
.aif-shot-card__visual {
    position:        relative;
    aspect-ratio:    4 / 3;
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
}

/* Gradient tints per shot type */
.aif-shot-visual--headshot  { background: linear-gradient(145deg, #0e1a30 0%, #1a2a4a 100%); }
.aif-shot-visual--fullbody  { background: linear-gradient(145deg, #0e2030 0%, #162840 100%); }
.aif-shot-visual--lifestyle { background: linear-gradient(145deg, #1a200e 0%, #2a3818 100%); }
.aif-shot-visual--selfie    { background: linear-gradient(145deg, #1a0e2a 0%, #2a1840 100%); }

.aif-shot-card__placeholder {
    opacity: 0.7;
}

/* Shot-type label tag on the visual */
.aif-shot-card__tag {
    position:         absolute;
    top:              0.75rem;
    left:             0.75rem;
    font-size:        0.7rem;
    font-weight:      700;
    letter-spacing:   0.08em;
    text-transform:   uppercase;
    color:            var(--aif-accent);
    background-color: rgba(13, 15, 20, 0.75);
    border:           1px solid var(--aif-accent-glow);
    padding:          0.2em 0.6em;
    border-radius:    50px;
}

/* Text body below the visual */
.aif-shot-card__body {
    padding:    1.25rem 1.5rem 1.5rem;
    flex:       1 1 auto;
    display:    flex;
    flex-direction: column;
}

.aif-shot-card__title {
    font-size:     1rem;
    font-weight:   700;
    color:         var(--aif-text);
    margin-bottom: 0.5rem;
}

.aif-shot-card__desc {
    font-size:  0.875rem;
    color:      var(--aif-muted);
    line-height: 1.65;
    margin:     0;
}

/* ── Variety strip (outfit + background callout below the cards) ────────── */

.aif-variety-strip {
    background-color: var(--aif-surface-2);
    border:           1px solid var(--aif-border);
    border-radius:    16px;
    padding:          1.75rem 2rem;
}

.aif-variety-badge {
    display:     inline-flex;
    align-items: baseline;
    gap:         0.5rem;
}

.aif-variety-number {
    font-size:   2rem;
    font-weight: 800;
    color:       var(--aif-accent);
    line-height: 1;
    letter-spacing: -0.02em;
}

.aif-variety-label {
    font-size:  0.9rem;
    color:      var(--aif-muted);
    font-weight: 500;
}

.aif-variety-divider {
    font-size: 1.5rem;
    color:     var(--aif-border);
}

.aif-variety-outfit-list {
    margin-bottom: 0;
    line-height:   1.7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hero portfolio grid (replaces old 2-col headshot grid)
   Added: AIF-03b portfolio repositioning
   ═══════════════════════════════════════════════════════════════════════════ */

.aif-portfolio-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows:    1fr 1fr;
    gap:                   0.75rem;
}

.aif-portfolio-cell {
    border-radius: 12px;
    overflow:      hidden;
}

.aif-portfolio-placeholder {
    aspect-ratio:  3 / 4;
    border-radius: 12px;
    display:       flex;
    align-items:   flex-end;
    justify-content: center;
    position:      relative;
    overflow:      hidden;
    border:        1px solid var(--aif-border);
    transition:    box-shadow 0.3s ease;
    padding-bottom: 0.75rem;
}

/* Per-cell gradient tints matching shot types */
.aif-pph-1 { background: linear-gradient(145deg, #0e1a30 0%, #1a2a4a 100%); }
.aif-pph-2 { background: linear-gradient(145deg, #0e2030 0%, #162840 100%); }
.aif-pph-3 { background: linear-gradient(145deg, #1a200e 0%, #2a3818 100%); }
.aif-pph-4 { background: linear-gradient(145deg, #1a0e2a 0%, #2a1840 100%); }

.aif-portfolio-placeholder:hover {
    box-shadow: 0 0 20px var(--aif-accent-glow), 0 0 40px var(--aif-accent-glow);
}

/* Reuse the existing .aif-placeholder-label styles for portfolio labels */

/* ═══════════════════════════════════════════════════════════════════════════
   PRICING PAGE STYLES (page-pricing.php)
   Added: AUTO-5 site content — pricing page
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Pricing Hero ─────────────────────────────────────────────────────── */

.aif-pricing-hero {
    padding:    var(--aif-section-y) 0 3rem;
    background: var(--aif-bg);
}

.aif-pricing-home-link {
    text-decoration: none;
}

.aif-pricing-brand {
    font-size:   1.6rem;
    font-weight: 700;
    color:       var(--aif-accent);
    letter-spacing: -0.01em;
}

.aif-pricing-headline {
    font-size:   2.8rem;
    font-weight: 700;
    line-height: 1.2;
    color:       var(--aif-text);
}

@media (max-width: 576px) {
    .aif-pricing-headline { font-size: 2rem; }
}

.aif-pricing-subhead {
    font-size:  1.1rem;
    color:      var(--aif-muted);
    max-width:  640px;
    margin:     1.25rem auto 0;
    line-height: 1.65;
}

.aif-pricing-note {
    margin-top: 0.75rem;
    color:      var(--aif-muted);
}

/* ── Pricing Tiers ────────────────────────────────────────────────────── */

.aif-pricing-tiers {
    padding: var(--aif-section-y-sm) 0 var(--aif-section-y);
}

.aif-tier-card {
    background:    var(--aif-surface);
    border:        1px solid var(--aif-border);
    border-radius: 16px;
    padding:       2rem 1.75rem;
    display:       flex;
    flex-direction: column;
    position:      relative;
    transition:    border-color 0.25s ease, box-shadow 0.25s ease;
}

.aif-tier-card:hover {
    border-color: var(--aif-border-hover);
    box-shadow:   0 4px 24px rgba(0,0,0,0.35);
}

.aif-tier-card--featured {
    border-color: var(--aif-accent);
    box-shadow:   0 0 0 1px var(--aif-accent), 0 8px 32px rgba(var(--aif-accent-rgb),0.15);
}

.aif-tier-card--featured:hover {
    box-shadow: 0 0 0 1px var(--aif-accent), 0 12px 40px rgba(var(--aif-accent-rgb),0.25);
}

.aif-tier-badge {
    position:      absolute;
    top:           -0.75rem;
    left:          50%;
    transform:     translateX(-50%);
    background:    var(--aif-accent);
    color:         #fff;
    font-size:     0.75rem;
    font-weight:   700;
    padding:       0.25rem 1rem;
    border-radius: 20px;
    white-space:   nowrap;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.aif-tier-header {
    margin-bottom: 1.5rem;
    text-align:    center;
}

.aif-tier-name {
    font-size:   1.1rem;
    font-weight: 600;
    color:       var(--aif-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

.aif-tier-price {
    line-height: 1;
    margin-bottom: 0.35rem;
}

.aif-tier-currency {
    font-size:      1.5rem;
    font-weight:    700;
    vertical-align: super;
    color:          var(--aif-text);
}

.aif-tier-amount {
    font-size:   3.25rem;
    font-weight: 800;
    color:       var(--aif-text);
    letter-spacing: -0.02em;
}

.aif-tier-card--featured .aif-tier-amount {
    color: var(--aif-accent);
}

.aif-tier-credits {
    font-size:   1rem;
    color:       var(--aif-muted);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.aif-tier-tagline {
    font-size:  0.9rem;
    color:      var(--aif-muted);
    margin:     0;
    line-height: 1.4;
}

.aif-tier-features {
    flex:        1;
    margin:      0 0 1.5rem;
    padding:     0;
}

.aif-tier-features li {
    padding:       0.4rem 0;
    color:         var(--aif-text);
    font-size:     0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
}

.aif-tier-features li:last-child {
    border-bottom: none;
}

.aif-feat-check {
    color:       var(--aif-muted);
    font-size:   0.85rem;
    flex-shrink: 0;
}

.aif-feat-check--accent {
    color: var(--aif-accent);
}

.aif-tier-btn {
    font-weight: 600;
}

/* ── Credits Explainer ────────────────────────────────────────────────── */

.aif-credits-explainer {
    padding:    var(--aif-section-y) 0;
    background: var(--aif-surface-2, var(--aif-surface));
}

.aif-credit-step {
    padding: 1.5rem 1rem;
}

.aif-credit-step__num {
    width:         2.75rem;
    height:        2.75rem;
    border-radius: 50%;
    background:    var(--aif-accent);
    color:         #fff;
    font-size:     1.1rem;
    font-weight:   700;
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin:        0 auto 1rem;
}

.aif-credit-step__title {
    font-size:   1rem;
    font-weight: 700;
    color:       var(--aif-text);
    margin-bottom: 0.5rem;
}

.aif-credit-step__body {
    font-size:  0.9rem;
    color:      var(--aif-muted);
    line-height: 1.65;
    margin:     0;
}

/* ── Comparison Table ─────────────────────────────────────────────────── */

.aif-comparison {
    padding: var(--aif-section-y) 0;
}

.aif-compare-table {
    color:          var(--aif-text);
    font-size:      0.9rem;
    border-color:   var(--aif-border);
}

.aif-compare-table thead th {
    background:    var(--aif-surface);
    color:         var(--aif-muted);
    border-color:  var(--aif-border);
    font-weight:   600;
    padding:       0.85rem 1rem;
    font-size:     0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.aif-compare-table th.aif-compare-us,
.aif-compare-table td.aif-compare-us {
    background: rgba(var(--aif-accent-rgb),0.06);
    color:      var(--aif-text);
    border-left:  1px solid rgba(var(--aif-accent-rgb),0.2);
    border-right: 1px solid rgba(var(--aif-accent-rgb),0.2);
}

.aif-compare-table thead th.aif-compare-us {
    color:      var(--aif-accent);
    background: rgba(var(--aif-accent-rgb),0.1);
}

.aif-compare-table tbody tr {
    border-color: var(--aif-border);
}

.aif-compare-table tbody td {
    padding:      0.75rem 1rem;
    border-color: var(--aif-border);
    color:        var(--aif-muted);
    vertical-align: middle;
}

.aif-compare-table tbody td:first-child {
    color:      var(--aif-text);
    font-weight: 500;
}

.aif-check-yes {
    color:       var(--aif-accent);
    font-weight: 700;
}

.aif-check-no {
    color:   var(--aif-muted);
    opacity: 0.5;
}

/* ── Pricing FAQ ──────────────────────────────────────────────────────── */

.aif-pricing-faq {
    padding:    var(--aif-section-y) 0;
    background: var(--aif-surface-2, var(--aif-surface));
}

/* ── Final CTA ────────────────────────────────────────────────────────── */

.aif-pricing-final-cta {
    padding:    var(--aif-section-y-sm) 0 var(--aif-section-y);
    background: var(--aif-bg);
}

/* ── Ensure aifolio-pricing body uses same base bg ───────────────────── */
body.aifolio-pricing {
    background: var(--aif-bg);
    color:      var(--aif-text);
}

/* ── §6 Style tabs + industry outfit cards ────────────────────────────────────
 * Added: AUTO-FREE-1 style variety expansion.
 * Tab switcher: Outfits / Backgrounds. JS toggles .d-none on panels.
 * Industry cards show named outfit list per vertical + attire description.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Tab buttons */
.aif-styles-tabs {
    gap: 0.5rem;
}

.aif-tab-btn {
    background:    var(--aif-surface-2);
    border:        1px solid var(--aif-border);
    border-radius: 8px;
    color:         var(--aif-muted);
    cursor:        pointer;
    font-size:     0.875rem;
    font-weight:   600;
    padding:       0.5rem 1.25rem;
    transition:    border-color 0.2s, color 0.2s, background 0.2s;
    display:       inline-flex;
    align-items:   center;
    gap:           0.4rem;
}

.aif-tab-btn:hover {
    border-color: var(--aif-accent);
    color:        var(--aif-text);
}

.aif-tab-btn.active {
    background:   var(--aif-accent);
    border-color: var(--aif-accent);
    color:        #fff;
}

.aif-tab-badge {
    background:    rgba(255,255,255,0.18);
    border-radius: 20px;
    font-size:     0.7rem;
    font-weight:   700;
    padding:       0.1rem 0.45rem;
    letter-spacing: 0.02em;
}

.aif-tab-btn:not(.active) .aif-tab-badge {
    background: rgba(255,255,255,0.07);
}

/* Industry outfit cards */
.aif-industry-card {
    background-color: var(--aif-surface-2);
    border:           1px solid var(--aif-border);
    border-radius:    12px;
    padding:          1.25rem 1.25rem 1rem;
    height:           100%;
    display:          flex;
    flex-direction:   column;
    gap:              0.6rem;
    transition:       border-color 0.2s, transform 0.2s;
}

.aif-industry-card:hover {
    border-color: var(--aif-accent);
    transform:    translateY(-2px);
}

.aif-industry-card--custom {
    border-style: dashed;
    border-color: var(--aif-border);
}

.aif-industry-card--custom:hover {
    border-color: var(--aif-accent);
    border-style: dashed;
}

.aif-industry-header {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    flex-wrap:   wrap;
}

.aif-industry-icon {
    font-size:   1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.aif-industry-label {
    font-size:   0.85rem;
    font-weight: 700;
    color:       var(--aif-text);
    flex:        1;
}

.aif-industry-count {
    font-size:     0.7rem;
    font-weight:   600;
    color:         var(--aif-accent);
    background:    rgba(var(--aif-accent-rgb),0.10);
    border-radius: 20px;
    padding:       0.1rem 0.5rem;
    white-space:   nowrap;
}

.aif-industry-styles {
    list-style:  none;
    margin:      0;
    padding:     0;
    display:     flex;
    flex-wrap:   wrap;
    gap:         0.3rem;
}

.aif-industry-styles li {
    font-size:     0.72rem;
    font-weight:   500;
    color:         var(--aif-muted);
    background:    var(--aif-surface);
    border:        1px solid var(--aif-border);
    border-radius: 6px;
    padding:       0.15rem 0.5rem;
    white-space:   nowrap;
}

.aif-industry-attire {
    font-size:   0.72rem;
    color:       var(--aif-muted);
    font-style:  italic;
    margin:      0;
    margin-top:  auto;
    padding-top: 0.4rem;
    border-top:  1px solid var(--aif-border);
}

.aif-industry-custom-desc {
    font-size:  0.8rem;
    color:      var(--aif-muted);
    margin:     0;
    line-height: 1.5;
}

/* Panel show/hide (JS-driven) */
.aif-styles-panel.d-none {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FRONTEND OVERHAUL — feat/frontend-overhaul
   Added: sticky nav, hero image grid, shot-card images, gallery images,
          smooth scroll, scroll-margin anchors, CTA hover shimmer.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Global polish ─────────────────────────────────────────────────────── */

/* Smooth scroll behaviour for anchor links */
html {
    scroll-behavior: smooth;
}

/* Offset all section anchors by sticky nav height so they aren't hidden */
section[id] {
    scroll-margin-top: 70px;
}

/* Gold shimmer hover on primary CTA buttons */
.btn-aif-accent {
    position:   relative;
    overflow:   hidden;
    transition: box-shadow 0.25s ease, transform 0.15s ease;
}

.btn-aif-accent::after {
    content:    '';
    position:   absolute;
    top:        0;
    left:       -75%;
    width:      50%;
    height:     100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 100%
    );
    transform:  skewX(-20deg);
    transition: left 0.4s ease;
}

.btn-aif-accent:hover::after {
    left: 125%;
}

.btn-aif-accent:hover {
    box-shadow: 0 6px 28px var(--aif-accent-glow), 0 2px 8px rgba(0,0,0,0.3);
    transform:  translateY(-1px);
}

/* ── Top Navigation ─────────────────────────────────────────────────────── */

/*
 * Sticky top nav bar for the landing page.
 * The landing page builds its own full HTML document and does not call
 * get_header(), so this nav is injected directly at the top of <body>.
 * Uses Bootstrap navbar classes + custom aif- BEM overrides.
 */

.aif-topnav {
    background:       rgba(10, 10, 10, 0.92);
    backdrop-filter:  blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom:    1px solid rgba(255, 255, 255, 0.07);
    z-index:          1050; /* above Bootstrap modals (z: 1055 is modal itself) */
    padding-top:      0;
    padding-bottom:   0;
}

/* Override Bootstrap's default navbar padding */
.aif-topnav .navbar-brand {
    font-size:      1.3rem;
    font-weight:    800;
    color:          var(--aif-accent) !important;
    letter-spacing: -0.02em;
    text-decoration: none;
    padding:        0.6rem 0;
    line-height:    1;
    transition:     opacity 0.2s ease;
}

.aif-topnav .navbar-brand:hover {
    opacity: 0.85;
}

.aif-topnav .navbar-brand span {
    /* "AI" portion in slightly brighter gold */
    color: var(--aif-accent-hover);
}

/* Nav links */
.aif-topnav .nav-link {
    color:          rgba(232, 232, 232, 0.8) !important;
    font-size:      0.875rem;
    font-weight:    500;
    padding:        1rem 0.875rem !important;
    transition:     color 0.15s ease;
}

.aif-topnav .nav-link:hover,
.aif-topnav .nav-link:focus {
    color: #E8E8E8 !important;
}

/* "Get Access" nav item — small gold outlined button */
.aif-topnav .aif-nav-cta {
    color:         var(--aif-accent) !important;
    border:        1px solid var(--aif-accent);
    border-radius: 6px;
    padding:       0.45rem 1rem !important;
    margin-left:   0.5rem;
    font-weight:   600;
    font-size:     0.8rem;
    letter-spacing: 0.02em;
    transition:    background 0.2s ease, color 0.2s ease;
}

.aif-topnav .aif-nav-cta:hover {
    background: var(--aif-accent);
    color:      #0A0A0A !important;
}

/* Hamburger toggler — use light colour so it shows on dark bg */
.aif-topnav .navbar-toggler {
    border-color: rgba(var(--aif-accent-rgb), 0.4);
    padding:      0.35rem 0.55rem;
}

.aif-topnav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(212, 175, 55, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.aif-topnav .navbar-toggler:focus {
    box-shadow:  0 0 0 0.2rem rgba(var(--aif-accent-rgb), 0.3);
    outline:     none;
}

/* Mobile collapse menu */
.aif-topnav .navbar-collapse {
    background: rgba(10, 10, 10, 0.97);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

@media (min-width: 768px) {
    .aif-topnav .navbar-collapse {
        background: transparent;
        border-top: none;
    }
}

/* Mobile stacked nav links */
@media (max-width: 767.98px) {
    .aif-topnav .nav-link {
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .aif-topnav .aif-nav-cta {
        margin: 0.5rem 1rem 0.75rem;
        display: inline-block;
    }
}

/* Add top padding to hero so content starts below sticky nav */
.aif-hero {
    padding-top: 80px;
}

/* ── Hero image grid ─────────────────────────────────────────────────────── */

/*
 * Real AIFolio sample outputs fill each cell (object-fit: cover).
 * Each cell is a relative container; the img fills it with object-fit: cover.
 * A gradient overlay at the bottom carries the shot-type label.
 */

.aif-portfolio-cell {
    position: relative;
}

.aif-portfolio-img-wrap {
    position:      relative;
    aspect-ratio:  3 / 4;
    border-radius: 12px;
    overflow:      hidden;
    border:        1px solid var(--aif-border);
    transition:    box-shadow 0.3s ease;
}

.aif-portfolio-img-wrap:hover {
    box-shadow: 0 0 20px var(--aif-accent-glow), 0 0 40px var(--aif-accent-glow);
}

.aif-portfolio-img-wrap img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    object-position: center top;
    display:     block;
    transition:  transform 0.4s ease;
}

.aif-portfolio-img-wrap:hover img {
    transform: scale(1.04);
}

/* Dark gradient overlay at the bottom for the label */
.aif-portfolio-img-overlay {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     40%;
    background: linear-gradient(to top, rgba(10,10,10,0.85) 0%, transparent 100%);
    border-radius: 0 0 12px 12px;
    display:    flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0.6rem;
}

/* ── Shot-type card images (Section 3) ────────────────────────────────────── */

/*
 * Replaces the SVG icon placeholders in each card's visual area.
 * The image fills the existing .aif-shot-card__visual container (aspect-ratio 4/3).
 */

.aif-shot-card__img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center top;
    display:         block;
    position:        absolute;
    inset:           0;
    transition:      transform 0.4s ease;
}

.aif-shot-card:hover .aif-shot-card__img {
    transform: scale(1.05);
}

/* Darken the image slightly on the card visual for contrast with the tag */
.aif-shot-card__visual::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to bottom,
        rgba(10,10,10,0.15) 0%,
        rgba(10,10,10,0.05) 50%,
        rgba(10,10,10,0.45) 100%
    );
    pointer-events: none;
    z-index:    1;
}

/* Keep the tag label above the overlay */
.aif-shot-card__tag {
    z-index: 2;
}

/* ── Example Gallery — real AIFolio sample outputs (Section 5) ────────────── */

/*
 * Replaces the CSS-gradient placeholder divs in the PHP foreach loop.
 * .aif-gallery-img-wrap replaces .aif-gallery-placeholder inside each cell.
 */

.aif-gallery-img-wrap {
    aspect-ratio:  3 / 4;
    border-radius: 12px;
    overflow:      hidden;
    border:        1px solid var(--aif-border);
    cursor:        pointer;
    position:      relative;
    transition:    box-shadow 0.3s ease, border-color 0.3s ease;
}

.aif-gallery-img-wrap img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    object-position: center top;
    display:     block;
    transition:  transform 0.35s ease;
}

.aif-gallery-img-wrap:hover {
    box-shadow:   0 0 20px var(--aif-accent-glow), 0 8px 32px rgba(0,0,0,0.4);
    border-color: var(--aif-accent);
}

.aif-gallery-img-wrap:hover img {
    transform: scale(1.03);
}

/* Shot-type badge on each gallery image */
.aif-gallery-img-badge {
    position:    absolute;
    bottom:      0.5rem;
    left:        0.5rem;
    font-size:   0.65rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:       var(--aif-accent);
    background:  rgba(10,10,10,0.78);
    border:      1px solid rgba(var(--aif-accent-rgb),0.3);
    padding:     0.18em 0.55em;
    border-radius: 50px;
}

/* ═══════════════════════════════════════════════════════════════════════
   MARKETING-POSITIONING-STYLES-SPLIT additions
   Section 3B (Who It's For), Section 5B (Prints), Section 5C (Testimonials),
   plus Signature-styles teaser card + tier badge accents.
   Reuses existing --aif-* custom properties; no new palette introduced.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Section 3B: Who It's For — segment entry cards ──────────────────────── */

.aif-segments {
    padding:          var(--aif-section-y) 0;
    background-color: var(--aif-surface-2);
}

.aif-segment-card {
    background-color: var(--aif-surface);
    border:           1px solid var(--aif-border);
    border-radius:    16px;
    padding:          1.75rem 1.5rem;
    display:          flex;
    flex-direction:   column;
    gap:              0.5rem;
    transition:       border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.aif-segment-card:hover {
    border-color: var(--aif-accent);
    box-shadow:   0 0 0 1px var(--aif-accent-glow), 0 8px 32px rgba(0,0,0,0.3);
    transform:    translateY(-4px);
}

.aif-segment-card__icon {
    font-size:     1.75rem;
    line-height:   1;
    margin-bottom: 0.25rem;
}

.aif-segment-card__title {
    font-size:     0.75rem;
    font-weight:   700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:         var(--aif-accent);
    margin:        0;
}

.aif-segment-card__lede {
    font-size:     0.95rem;
    font-weight:   600;
    color:         var(--aif-text);
    margin:        0;
    line-height:   1.4;
}

.aif-segment-card__desc {
    font-size:   0.875rem;
    color:       var(--aif-muted);
    line-height: 1.65;
    margin:      0;
    flex:        1 1 auto;
}

.aif-segment-card__cta {
    font-size:      0.875rem;
    font-weight:    700;
    color:          var(--aif-accent);
    text-decoration: none;
    margin-top:     0.5rem;
}

.aif-segment-card__cta:hover {
    color:           var(--aif-accent-hover);
    text-decoration: underline;
}

/* ── Section 5B: From Screen to Wall (prints) ─────────────────────────────── */

.aif-prints {
    padding:          var(--aif-section-y) 0;
    background-color: var(--aif-surface);
}

.aif-prints-list li {
    color:        var(--aif-muted);
    padding:      0.35rem 0;
    font-size:    0.95rem;
}

.aif-prints-note {
    margin-top: 0.75rem;
}

.aif-prints-visual {
    position:      relative;
    border-radius: 16px;
    overflow:      hidden;
    border:        1px solid var(--aif-border);
    aspect-ratio:  5 / 4;
    background:    linear-gradient(145deg, #16110e 0%, #2a1f18 100%);
}

.aif-prints-visual__placeholder {
    position: absolute;
    inset:    0;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 12px);
}

.aif-prints-visual__badge {
    position:         absolute;
    top:              0.85rem;
    left:             0.85rem;
    font-size:        0.7rem;
    font-weight:      700;
    letter-spacing:   0.08em;
    text-transform:   uppercase;
    color:            var(--aif-accent);
    background-color: rgba(13, 15, 20, 0.75);
    border:           1px solid var(--aif-accent-glow);
    padding:          0.2em 0.6em;
    border-radius:    50px;
}

/* ── Section 5C: Testimonials (placeholder social proof) ─────────────────── */

.aif-testimonials {
    padding:          var(--aif-section-y) 0;
    background-color: var(--aif-surface-2);
}

.aif-testimonial-card {
    background-color: var(--aif-surface);
    border:           1px dashed var(--aif-border);
    border-radius:    16px;
    padding:          1.5rem;
    display:          flex;
    flex-direction:   column;
    gap:              0.75rem;
}

.aif-testimonial-card__stars {
    color:      var(--aif-accent);
    font-size:  0.9rem;
    letter-spacing: 0.1em;
}

.aif-testimonial-card__quote {
    color:       var(--aif-muted);
    font-size:   0.9rem;
    line-height: 1.6;
    font-style:  italic;
    margin:      0;
    flex:        1 1 auto;
}

.aif-testimonial-card__author {
    display:        flex;
    flex-direction: column;
}

.aif-testimonial-card__name {
    font-weight: 700;
    color:       var(--aif-text);
    font-size:   0.875rem;
}

.aif-testimonial-card__role {
    color:     var(--aif-muted);
    font-size: 0.75rem;
}

/* ── §5C Before/after showcase (real synthetic-persona gallery) ───────────────
 * Replaces the placeholder before/after scaffold. Reuses the dark-theme tokens
 * (--aif-surface, --aif-border, --aif-accent, …). Two parts:
 *   1. .aif-ba-people   — per-person "before → grid-of-afters" featured cards.
 *   2. .aif-ba-gallery  — vanilla-JS tabbed full gallery (all 8 afters/person).
 * ─────────────────────────────────────────────────────────────────────────── */

.aif-ba-showcase {
    border-top:  1px solid var(--aif-border);
    padding-top: 3rem;
    margin-top:  3rem;
}

.aif-ba-showcase__title {
    color:       var(--aif-text);
    font-size:   var(--aif-fs-h3);
    font-weight: var(--aif-fw-bold);
    margin-bottom: 0.75rem;
}

.aif-ba-showcase__intro {
    color:      var(--aif-muted);
    max-width:  46rem;
    margin:     0 auto;
    font-size:  0.95rem;
    line-height: 1.6;
}

/* ── 1. Per-person featured cards ─────────────────────────────────────────── */
.aif-ba-people {
    display:        grid;
    grid-template-columns: repeat(2, 1fr);
    gap:            1.25rem;
    margin-bottom:  3.5rem;
}

.aif-ba-person {
    background:    var(--aif-surface);
    border:        1px solid var(--aif-border);
    border-radius: var(--aif-radius);
    padding:       1rem;
}

.aif-ba-person__head {
    margin-bottom: 0.75rem;
}

.aif-ba-person__who {
    color:          var(--aif-text);
    font-weight:    600;
    font-size:      0.95rem;
}

.aif-ba-person__body {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
}

.aif-ba-before {
    flex:   0 0 34%;
    margin: 0;
    position: relative;
}

.aif-ba-arrow {
    color:      var(--aif-accent);
    font-size:  1.5rem;
    font-weight: 700;
    flex:       0 0 auto;
}

.aif-ba-afters {
    flex:    1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:     0.5rem;
    margin:  0;
}

.aif-ba-after {
    margin:   0;
    position: relative;
}

/* Shared image framing for every before/after figure. */
.aif-ba-before img,
.aif-ba-after img,
.aif-ba-cell img {
    width:         100%;
    height:        auto;
    aspect-ratio:  3 / 4;
    object-fit:    cover;
    border-radius: var(--aif-radius-sm);
    display:       block;
    background:    var(--aif-surface-2);
}

/* Corner tag / caption on each image. */
.aif-ba-tag {
    position:       absolute;
    left:           0.4rem;
    bottom:         0.4rem;
    background:     rgba(13, 15, 20, 0.78);
    color:          var(--aif-text);
    font-size:      0.65rem;
    font-weight:    700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding:        0.15rem 0.45rem;
    border-radius:  var(--aif-radius-pill);
}

.aif-ba-tag--before {
    background: rgba(122, 132, 153, 0.9);
    color:      #fff;
}

.aif-ba-after .aif-ba-tag,
.aif-ba-cell:not(.aif-ba-cell--before) .aif-ba-tag {
    background: rgba(var(--aif-accent-rgb), 0.9);
    color:      #1a1200;
}

/* ── 2. Tabbed full gallery ───────────────────────────────────────────────── */
.aif-ba-gallery__title {
    color:       var(--aif-text);
    font-size:   1.05rem;
    font-weight: 600;
    text-align:  center;
    margin-bottom: 1.25rem;
}

.aif-ba-tabs {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             0.5rem;
    margin-bottom:   1.5rem;
}

/* Tab buttons mirror the §6 .aif-tab-btn styling for consistency. */
.aif-ba-tab {
    background:    var(--aif-surface-2);
    border:        1px solid var(--aif-border);
    border-radius: 8px;
    color:         var(--aif-muted);
    cursor:        pointer;
    font-size:     0.8rem;
    font-weight:   600;
    padding:       0.4rem 0.9rem;
    transition:    border-color 0.2s, color 0.2s, background 0.2s;
}

.aif-ba-tab:hover {
    border-color: var(--aif-accent);
    color:        var(--aif-text);
}

.aif-ba-tab.active {
    background:   var(--aif-accent);
    border-color: var(--aif-accent);
    color:        #1a1200;
}

.aif-ba-panel__who {
    color:      var(--aif-muted);
    text-align: center;
    font-size:  0.9rem;
    margin-bottom: 1.25rem;
}

.aif-ba-panel__who strong {
    color: var(--aif-text);
}

.aif-ba-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   0.75rem;
}

.aif-ba-cell {
    margin:   0;
    position: relative;
}

.aif-ba-cell--before img {
    outline: 2px solid var(--aif-border);
    outline-offset: -2px;
}

/* ── Disclaimer — always visible, never hidden. ───────────────────────────── */
.aif-ba-disclaimer {
    margin-top:  2.25rem;
    text-align:  center;
    font-size:   0.8rem;
    color:       var(--aif-muted);
    font-style:  italic;
}

/* ── Responsive: stack the people grid + shrink the gallery grid on mobile. ── */
@media (max-width: 767.98px) {
    .aif-ba-people {
        grid-template-columns: 1fr;
    }
    .aif-ba-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Signature styles accents (industry card teaser + tier badge) ────────── */

.aif-industry-card--signature {
    border-style: dashed;
    border-color: var(--aif-accent-glow);
}

.aif-industry-card--signature:hover {
    border-color: var(--aif-accent);
    border-style: dashed;
}

.aif-industry-count--premium {
    color: var(--aif-accent);
}

.aif-tier-badge--signature {
    background: var(--aif-surface-2);
    color:      var(--aif-accent);
    border:     1px solid var(--aif-accent);
}

.aif-tier-footnote {
    text-align:    center;
    margin-top:    -0.5rem;
    margin-bottom: 1rem;
}

/* ─────────────────────────────────────────────────────────────────────────
 * For-Teams example imagery (page-for-teams.php §1 hero, §3 tier + strip).
 * AI-generated team/group photos illustrating "one consistent look across the
 * whole group". Dark-aesthetic framing consistent with .aif-ba-* media.
 * ───────────────────────────────────────────────────────────────────────── */

.aif-team-hero-media {
    max-width: 900px;
    margin:    2.5rem auto 0;
}

.aif-team-hero-media img {
    display:       block;
    width:         100%;
    height:        auto;
    border-radius: var(--aif-radius-lg);
    border:        1px solid var(--aif-border);
    box-shadow:    var(--aif-shadow);
}

.aif-team-tier-media {
    max-width: 620px;
    margin:    0 auto 2rem;
}

.aif-team-tier-media img {
    display:       block;
    width:         100%;
    height:        auto;
    border-radius: var(--aif-radius);
    border:        1px solid var(--aif-border);
    box-shadow:    var(--aif-shadow-sm);
}

.aif-team-strip {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1rem;
    max-width:             960px;
    margin:                1.5rem auto 0;
}

.aif-team-strip figure {
    margin: 0;
}

.aif-team-strip img {
    display:       block;
    width:         100%;
    height:        auto;
    border-radius: var(--aif-radius);
    border:        1px solid var(--aif-border);
    box-shadow:    var(--aif-shadow-sm);
}

.aif-team-disclaimer {
    margin-top: 1.25rem;
    text-align: center;
    font-size:  0.8rem;
    color:      var(--aif-muted);
    font-style: italic;
}

@media (max-width: 767.98px) {
    .aif-team-strip {
        grid-template-columns: 1fr 1fr;
    }
}

/* AIF-BETA — muted "(beta)" tag after the wordmark in the top nav (soft-launch). */
.aif-topnav .navbar-brand .aif-beta {
  font-size: 0.62em;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.6;
  vertical-align: super;
  margin-left: 0.15em;
}