/* === v2.css — additions for the /v2/ preview pages === */
/* Loaded AFTER shared.css — only contains net-new styles for the v2 visual experiments. */

/* Preview banner — sits above the nav so reviewers know they're on a v2 page */
.v2-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    background: #1e1b4b; color: #c7d2fe;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
    padding: 0.4rem 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap;
}
.v2-banner-label { white-space: nowrap; }
.v2-banner-label strong { color: #fff; font-weight: 700; }
.v2-banner-nav { display: flex; gap: 0.875rem; flex-wrap: wrap; }
.v2-banner-nav a { color: #c7d2fe; text-decoration: none; opacity: 0.7; transition: opacity 0.2s ease; }
.v2-banner-nav a:hover { opacity: 1; color: #fff; }
.v2-banner-nav a.active { color: #fff; opacity: 1; }
.v2-banner-live { color: #fff; text-decoration: underline; white-space: nowrap; }
body.v2-body { padding-top: 32px; }
body.v2-body .nav { top: 32px; }
body.v2-body .mobile-menu { top: calc(var(--nav-h) + 32px); }

/* Mobile: banner becomes single row with scrollable nav */
@media (max-width: 720px) {
    .v2-banner {
        font-size: 0.6875rem; padding: 0.375rem 0.625rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .v2-banner::-webkit-scrollbar { display: none; }
    .v2-banner-label { display: none; }
    .v2-banner-nav { gap: 0.875rem; flex-wrap: nowrap; flex: 1; }
    .v2-banner-nav a { white-space: nowrap; font-size: 0.6875rem; }
    .v2-banner-live { font-size: 0.625rem; opacity: 0.8; }
    body.v2-body { padding-top: 32px; }
    body.v2-body .nav { top: 32px; }
    body.v2-body .mobile-menu { top: calc(var(--nav-h) + 32px); }
}

/* === Eyebrow + serif heading rhythm === */
.eyebrow-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--cta); margin-bottom: 1rem; display: block;
}
.eyebrow-mono.muted { color: var(--text-muted); }
.eyebrow-mono.on-dark { color: rgba(255,255,255,0.55); }

.editorial-h2 {
    font-size: clamp(2rem, 4vw, 3rem); font-weight: 700;
    letter-spacing: -0.025em; line-height: 1.1;
    margin-bottom: 1.25rem;
}
.editorial-h2 em { font-style: italic; font-weight: 600; color: var(--cta); }
.section-dark .editorial-h2 em { color: #a5b4fc; }

/* === Mockup frame (macOS-style chrome) === */
.mockup-frame {
    border: 1px solid var(--border); border-radius: var(--radius);
    background: #fff; overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(20,20,40,0.25), 0 8px 20px -12px rgba(20,20,40,0.15);
}
.mockup-chrome {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.625rem 1rem;
    background: var(--bg-gray);
    border-bottom: 1px solid var(--border);
}
.mockup-dots { display: flex; gap: 0.375rem; }
.mockup-dots span { width: 10px; height: 10px; border-radius: 50%; }
.mockup-dots span:nth-child(1) { background: #ff5f57; }
.mockup-dots span:nth-child(2) { background: #febc2e; }
.mockup-dots span:nth-child(3) { background: #28c840; }
.mockup-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--text-muted);
}
.mockup-body { padding: 1.5rem; }

/* === Mockup: Goals === */
.mu-goals-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.mu-goals-head h4 { font-size: 0.9375rem; font-weight: 600; color: var(--text); margin: 0; }
.mu-goals-status { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.mu-goals-list { list-style: none; }
.mu-goals-list li { border-top: 1px solid var(--border); padding: 1rem 0; }
.mu-goals-list li:first-child { border-top: 0; padding-top: 0; }
.mu-goals-row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.mu-goals-title { font-size: 0.875rem; font-weight: 500; color: var(--text); }
.mu-goals-pct { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.mu-goals-row2 { display: flex; align-items: center; gap: 0.75rem; }
.mu-goals-bar { height: 6px; flex: 1; background: var(--bg-gray); border-radius: 100px; overflow: hidden; }
.mu-goals-fill { height: 100%; background: var(--cta); border-radius: 100px; }
.mu-avatars { display: flex; }
.mu-avatars span {
    display: grid; place-items: center;
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid #fff;
    font-size: 0.625rem; font-weight: 700; color: var(--text);
    margin-left: -6px;
}
.mu-avatars span:first-child { margin-left: 0; }

/* === Mockup: Agents === */
.mu-agents-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.mu-agents-head h4 { font-size: 0.9375rem; font-weight: 600; color: var(--text); margin: 0; }
.mu-agents-tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.mu-agents-list { list-style: none; display: flex; flex-direction: column; gap: 0.875rem; }
.mu-agents-list li { display: flex; align-items: flex-start; gap: 0.75rem; }
.mu-check {
    display: grid; place-items: center; flex-shrink: 0;
    width: 20px; height: 20px; margin-top: 0.125rem;
    border-radius: 50%; background: rgba(5, 150, 105, 0.12); color: var(--agents);
}
.mu-check svg { width: 12px; height: 12px; }
.mu-agents-body { flex: 1; min-width: 0; }
.mu-agents-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.mu-agents-title { font-size: 0.8125rem; font-weight: 500; color: var(--text); }
.mu-agents-time { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.6875rem; color: var(--text-muted); }
.mu-agents-note { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.125rem; }

/* === Mockup: Context (decisions log) === */
.mu-ctx-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.mu-ctx-head h4 { font-size: 0.9375rem; font-weight: 600; color: var(--text); margin: 0; }
.mu-ctx-tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.mu-ctx-list { display: flex; flex-direction: column; gap: 0.75rem; }
.mu-ctx-item { background: var(--bg-gray); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.875rem 1rem; }
.mu-ctx-row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.375rem; }
.mu-ctx-title { font-size: 0.8125rem; font-weight: 500; color: var(--text); }
.mu-ctx-date { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.6875rem; color: var(--text-muted); }
.mu-ctx-why { font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 0.625rem; }
.mu-ctx-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.mu-ctx-pill {
    font-size: 0.625rem; font-weight: 600;
    padding: 0.125rem 0.5rem; border-radius: 100px;
}
.mu-ctx-pill.pricing { background: #ede7ff; color: #4b33a8; }
.mu-ctx-pill.growth { background: #fff1db; color: #8a5500; }
.mu-ctx-pill.strategy { background: #e1eeff; color: #1f4f99; }
.mu-ctx-pill.hiring { background: #ffe3eb; color: #9f2444; }
.mu-ctx-pill.ops { background: #e2f5e1; color: #2a6b2a; }

/* === Mockup: Knowledge (tiers) === */
.mu-kn-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.mu-kn-head h4 { font-size: 0.9375rem; font-weight: 600; color: var(--text); margin: 0; }
.mu-kn-tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.mu-kn-list { display: flex; flex-direction: column; gap: 0.625rem; }
.mu-kn-tier { padding: 0.875rem 1rem; border-radius: var(--radius-sm); }
.mu-kn-tier.tier-1 { background: #ede7ff; }
.mu-kn-tier.tier-2 { background: #e1eeff; }
.mu-kn-tier.tier-3 { background: #fff1db; }
.mu-kn-tier-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.mu-kn-tier-name { font-size: 0.8125rem; font-weight: 600; color: var(--text); }
.mu-kn-tier-note { font-size: 0.6875rem; color: var(--text-muted); }
.mu-kn-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.mu-kn-chip {
    background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.6);
    font-size: 0.6875rem; font-weight: 500; color: var(--text);
    padding: 0.25rem 0.5rem; border-radius: 6px;
}

/* === Pillar zigzag (used on home, ace) === */
.pillar-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
    padding: 4rem 0;
}
.pillar-row + .pillar-row { border-top: 1px solid var(--border); }
.pillar-row.reverse .pillar-copy { order: 2; }
.pillar-row.reverse .pillar-mock { order: 1; }
.pillar-mock { max-width: 480px; width: 100%; margin: 0 auto; }
.pillar-copy h3 { font-size: clamp(1.625rem, 2.5vw, 2.25rem); font-weight: 700; line-height: 1.15; margin-bottom: 1rem; letter-spacing: -0.02em; }
.pillar-copy p { font-size: 1rem; color: var(--text-sec); line-height: 1.65; max-width: 460px; }
.pillar-callout {
    margin-top: 1.5rem; padding-left: 1rem;
    border-left: 2px solid var(--cta);
}
.pillar-callout-label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 0.25rem; display: block; }
.pillar-callout-text { font-size: 1rem; font-weight: 500; color: var(--text); font-style: italic; }

@media (max-width: 900px) {
    .pillar-row { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0; }
    .pillar-row.reverse .pillar-copy { order: 1; }
    .pillar-row.reverse .pillar-mock { order: 2; }
}

/* === Synthesis section (dark) === */
.synthesis-section {
    background: #0f172a; color: #f1f5f9;
    padding: 6rem 0;
}
.synthesis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.synthesis-copy h2 { color: #f1f5f9; }
.synthesis-copy p { color: rgba(241, 245, 249, 0.7); font-size: 1.0625rem; line-height: 1.65; max-width: 480px; margin: 1.25rem 0 2rem; }
@media (max-width: 900px) {
    .synthesis-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .synthesis-section { padding: 4rem 0; }
}

/* === Engagement / 4-step editorial === */
.engagement-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
    margin-top: 3rem;
}
.engagement-card {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.3s var(--ease);
}
.engagement-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.engagement-illus {
    aspect-ratio: 4 / 5;
    background: linear-gradient(135deg, var(--bg-gray) 0%, #e2e8f0 100%);
    display: grid; place-items: center;
    position: relative; overflow: hidden;
}
.engagement-illus svg { width: 80px; height: 80px; opacity: 0.6; color: var(--text-muted); }
.engagement-illus.tone-1 { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); }
.engagement-illus.tone-1 svg { color: #b45309; opacity: 0.55; }
.engagement-illus.tone-2 { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); }
.engagement-illus.tone-2 svg { color: #1d4ed8; opacity: 0.55; }
.engagement-illus.tone-3 { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); }
.engagement-illus.tone-3 svg { color: #047857; opacity: 0.55; }
.engagement-illus.tone-4 { background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); }
.engagement-illus.tone-4 svg { color: #6d28d9; opacity: 0.55; }
.engagement-card-body { padding: 1.25rem 1.5rem 1.75rem; }
.engagement-card-step { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.6875rem; color: var(--cta); letter-spacing: 0.1em; }
.engagement-card-body h4 { font-size: 1.125rem; margin: 0.375rem 0 0.5rem; }
.engagement-card-body p { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; margin: 0; }

@media (max-width: 1024px) { .engagement-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .engagement-grid { grid-template-columns: 1fr; } }

/* === Hero with stacked mockups === */
.hero-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; min-height: 480px; }
.hero-split-copy h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 1.25rem; }
.hero-split-copy h1 em { font-style: italic; font-weight: 700; color: var(--cta); }
.hero-split-copy .lede { font-size: 1.125rem; color: var(--text-sec); line-height: 1.6; max-width: 480px; margin-bottom: 2rem; }
.hero-stacks { position: relative; min-height: 460px; }
.hero-stacks .mockup-frame { position: absolute; width: 88%; }
.hero-stacks .mockup-frame:nth-child(1) { top: 0; right: 0; transform: rotate(-1.5deg); z-index: 1; }
.hero-stacks .mockup-frame:nth-child(2) { bottom: 0; left: 0; transform: rotate(1.5deg); z-index: 2; }

@media (max-width: 900px) {
    .hero-split { grid-template-columns: 1fr; gap: 2rem; }
    .hero-stacks { min-height: 0; max-width: 420px; margin: 0 auto; }
    .hero-stacks .mockup-frame { position: relative; width: 100%; transform: none; }
    .hero-stacks .mockup-frame + .mockup-frame { margin-top: -2rem; }
}

/* === Services packages grid === */
.pkg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.pkg-grid.pkg-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 1100px) { .pkg-grid.pkg-grid-3 { grid-template-columns: 1fr 1fr; } }
.pkg-card {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 2rem;
    display: flex; flex-direction: column;
    transition: all 0.3s var(--ease);
}
.pkg-card:hover { border-color: var(--border-hover); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.pkg-card.accent { background: #0f172a; border-color: #1e293b; color: #f1f5f9; }
.pkg-card.accent .pkg-eyebrow { color: rgba(255,255,255,0.55); }
.pkg-card.accent h3 { color: #fff; }
.pkg-card.accent .pkg-body { color: rgba(241, 245, 249, 0.75); }
.pkg-card.accent .pkg-meta { color: rgba(241, 245, 249, 0.55); }
.pkg-card.accent .pkg-includes li { color: rgba(241, 245, 249, 0.85); }
.pkg-card.accent .pkg-includes svg { color: #a5b4fc; }
.pkg-card.accent .pkg-cta { background: #fff; color: #0f172a; }
.pkg-card.accent .pkg-cta:hover { background: #e2e8f0; }
.pkg-eyebrow { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--cta); margin-bottom: 0.5rem; display: block; }
.pkg-card h3 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 0.5rem; }
.pkg-meta { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 1.25rem; display: flex; gap: 0.625rem; flex-wrap: wrap; }
.pkg-meta span { white-space: nowrap; }
.pkg-body { font-size: 0.9375rem; color: var(--text-sec); line-height: 1.6; margin-bottom: 1.5rem; }
.pkg-includes { list-style: none; display: flex; flex-direction: column; gap: 0.625rem; flex: 1; margin-bottom: 1.5rem; }
.pkg-includes li { display: flex; gap: 0.625rem; font-size: 0.875rem; color: var(--text); line-height: 1.5; }
.pkg-includes svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 0.1875rem; color: var(--cta); }
.pkg-cta {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.625rem 1.125rem;
    background: #0f172a; color: #fff;
    font-size: 0.8125rem; font-weight: 600;
    border-radius: 100px; text-decoration: none;
    transition: all 0.2s ease;
}
.pkg-cta:hover { background: #1e293b; transform: translateY(-1px); }

@media (max-width: 900px) { .pkg-grid { grid-template-columns: 1fr; } }

/* === About hero with portrait === */
.about-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center; }
.about-portrait {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid var(--border);
    max-width: 360px;
    margin-left: auto;
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-portrait-caption {
    margin-top: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--text-muted); text-align: right;
}
@media (max-width: 900px) {
    .about-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
    .about-portrait { margin: 0 auto; max-width: 280px; }
    .about-portrait-caption { text-align: center; }
}

/* === Principles grid === */
.principles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; }
.principle { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.principle .num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; color: var(--cta); }
.principle h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; margin: 0.375rem 0 0.5rem; }
.principle p { font-size: 0.9375rem; color: var(--text-sec); line-height: 1.6; }
@media (max-width: 768px) { .principles-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

/* === Field notes home preview === */
.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2.5rem; }
.note-card { display: block; text-decoration: none; color: inherit; }
.note-cover {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius); border: 1px solid var(--border);
    background: var(--bg-gray);
    overflow: hidden;
    display: grid; place-items: center;
    transition: all 0.3s var(--ease);
}
.note-cover svg { width: 56px; height: 56px; opacity: 0.45; }
.note-cover.tone-amber { background: linear-gradient(135deg, #fffbeb, #fde68a); }
.note-cover.tone-amber svg { color: #b45309; }
.note-cover.tone-rose { background: linear-gradient(135deg, #fff1f2, #fecdd3); }
.note-cover.tone-rose svg { color: #be123c; }
.note-cover.tone-violet { background: linear-gradient(135deg, #f5f3ff, #ddd6fe); }
.note-cover.tone-violet svg { color: #6d28d9; }
.note-cover.tone-blue { background: linear-gradient(135deg, #eff6ff, #bfdbfe); }
.note-cover.tone-blue svg { color: #1d4ed8; }
.note-cover.tone-slate { background: linear-gradient(135deg, #f8fafc, #cbd5e1); }
.note-cover.tone-slate svg { color: #475569; }
.note-card:hover .note-cover { transform: translateY(-4px); border-color: var(--border-hover); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.note-meta { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-top: 1rem; display: block; }
.note-card h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; margin-top: 0.5rem; transition: color 0.2s ease; }
.note-card:hover h4 { color: var(--cta); }
.note-desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; margin-top: 0.5rem; }
@media (max-width: 1024px) { .notes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .notes-grid { grid-template-columns: 1fr; } }

/* === Section header (left-aligned, eyebrow + heading) === */
.v2-section-header { max-width: 640px; margin-bottom: 3rem; }
.v2-section-header.with-aside { display: grid; grid-template-columns: 1.6fr 1fr; gap: 3rem; align-items: end; max-width: none; }
.v2-section-header.with-aside .aside { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.6; max-width: 360px; }
@media (max-width: 768px) { .v2-section-header.with-aside { grid-template-columns: 1fr; } }

/* === Closing CTA (centered, restrained) === */
.v2-closing { text-align: center; padding: 6rem 0; border-top: 1px solid var(--border); }
.v2-closing h2 { font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; max-width: 640px; margin: 0 auto 1rem; }
.v2-closing p { font-size: 1.0625rem; color: var(--text-sec); max-width: 460px; margin: 0 auto 2rem; }

/* === Director gates (kept from live, lightly restyled for v2) === */
.gates-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.gate-card { padding: 1.25rem 1.5rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); border-top-width: 3px; }
.gate-card.human { border-top-color: #f59e0b; }
.gate-card.review { border-top-color: #2563eb; }
.gate-card.auto { border-top-color: #059669; }
.gate-card .label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.5rem; }
.gate-card.human .label { color: #b45309; }
.gate-card.review .label { color: #1d4ed8; }
.gate-card.auto .label { color: #047857; }
.gate-card p { font-size: 0.8125rem; color: var(--text-sec); line-height: 1.5; margin: 0; }
@media (max-width: 768px) { .gates-grid { grid-template-columns: 1fr; } }

/* === Logo wall (faux, until we have real logos) === */
.logo-wall {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem 2rem;
    align-items: center; padding: 1.5rem 0;
}
.logo-wall span {
    text-align: center; font-size: 0.9375rem;
    color: var(--text-muted); opacity: 0.85;
}
.logo-wall .lw-serif { font-family: Georgia, serif; font-style: italic; }
.logo-wall .lw-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.2em; font-size: 0.8125rem; text-transform: uppercase; }
.logo-wall .lw-sans-bold { font-weight: 800; letter-spacing: -0.02em; }
.proof-strip { background: var(--bg-gray); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 2.5rem 0; }
.proof-strip-label { text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted); margin-bottom: 1.5rem; }
@media (max-width: 768px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }

/* === Day-30 / snapshot pattern (used on Ace) === */
.snapshot-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: center; }
.snapshot-list { list-style: none; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.625rem; }
.snapshot-list li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.9375rem; color: var(--text); line-height: 1.5; }
.snapshot-list li::before { content: "→"; color: var(--cta); font-weight: 700; flex-shrink: 0; }
@media (max-width: 900px) { .snapshot-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ==========================================================================
   MOBILE TIGHTENING — applied at 600px and again at 420px.
   Goal: every v2 page feels intentional on a phone, not "scaled-down desktop."
   ========================================================================== */

@media (max-width: 600px) {
    /* Hero typography — kill the big clamps on small screens */
    .hero h1,
    .hero-split-copy h1 { font-size: 1.875rem !important; line-height: 1.12 !important; letter-spacing: -0.025em !important; }
    .hero .lede,
    .hero-split-copy .lede { font-size: 1rem !important; line-height: 1.55 !important; margin-bottom: 1.5rem !important; }
    .hero p,
    .hero-split-copy p { font-size: 1rem !important; line-height: 1.55 !important; }

    /* Section headings */
    .editorial-h2 { font-size: 1.625rem !important; line-height: 1.18 !important; }
    .pillar-copy h3 { font-size: 1.375rem !important; }
    .pkg-card h3 { font-size: 1.5rem !important; }
    .v2-closing h2 { font-size: 1.625rem !important; }

    /* Section padding — tighter */
    .section { padding: 2.75rem 0 !important; }
    .v2-closing { padding: 3.5rem 0 !important; }
    .synthesis-section { padding: 3.25rem 0 !important; }

    /* Section header gap */
    .v2-section-header { margin-bottom: 1.75rem; }
    .v2-section-header.with-aside { gap: 1rem; }
    .v2-section-header.with-aside .aside { font-size: 0.875rem; }

    /* Mockup density */
    .mockup-body { padding: 1.125rem !important; }
    .mockup-chrome { padding: 0.5rem 0.875rem; }
    .mockup-label { font-size: 0.625rem; }
    .mu-goals-list li { padding: 0.75rem 0; }
    .mu-goals-title { font-size: 0.8125rem; }
    .mu-agents-list { gap: 0.75rem; }
    .mu-ctx-list { gap: 0.5rem; }
    .mu-ctx-item { padding: 0.75rem 0.875rem; }
    .mu-ctx-why { font-size: 0.6875rem; }
    .mu-kn-list { gap: 0.5rem; }
    .mu-kn-tier { padding: 0.75rem 0.875rem; }

    /* Pillar zigzag — reduce gap, smaller mockup max-width */
    .pillar-row { padding: 2rem 0 !important; gap: 1.5rem !important; }
    .pillar-mock { max-width: 100%; }

    /* Engagement / deploy cards — go HORIZONTAL on mobile (image left, text right) so cards are compact strips */
    .engagement-grid { gap: 0.75rem; margin-top: 1.5rem; }
    .engagement-card { display: grid; grid-template-columns: 100px 1fr; align-items: stretch; }
    .engagement-illus { aspect-ratio: auto !important; height: 100%; min-height: 92px; }
    .engagement-illus svg { width: 36px !important; height: 36px !important; }
    .engagement-card-body { padding: 0.75rem 1rem; }
    .engagement-card-body h4 { font-size: 0.9375rem; margin: 0.125rem 0 0.25rem; }
    .engagement-card-body p { font-size: 0.75rem; line-height: 1.45; }
    .engagement-card-step { font-size: 0.625rem !important; }

    /* Field-notes covers go horizontal too on mobile — image left, text + meta stacked right */
    /* Only applies to standard 3-child note-cards (cover, meta, h4). OSS card has its own .note-card-stacked class. */
    .notes-grid { gap: 0.75rem; margin-top: 1.5rem; }
    .note-card:not(.note-card-stacked) {
        display: grid;
        grid-template-columns: 100px 1fr;
        grid-template-rows: 1fr auto;
        align-items: stretch;
        border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
        background: var(--bg); min-height: 92px;
    }
    .note-card:not(.note-card-stacked) > .note-cover { grid-row: 1 / span 2; aspect-ratio: auto !important; height: 100%; border-radius: 0 !important; border: 0 !important; }
    .note-card:not(.note-card-stacked) > .note-cover svg { width: 32px !important; height: 32px !important; }
    .note-card:not(.note-card-stacked) > .note-meta { font-size: 0.625rem !important; margin: 0 !important; padding: 0.75rem 1rem 0.125rem; align-self: end; }
    .note-card:not(.note-card-stacked) > h4 { font-size: 0.9375rem; line-height: 1.3; margin: 0; padding: 0 1rem 0.75rem; align-self: start; }

    /* OSS / dark card stays stacked but with shorter cover. Note: desktop SVG is inline 56x56, must override BOTH dimensions on mobile. */
    .note-card-stacked .note-cover { aspect-ratio: 16 / 9 !important; min-height: 0; border: 0 !important; border-radius: 0 !important; }
    .note-card-stacked .note-cover svg { width: 40px !important; height: 40px !important; }
    .note-card-stacked > div:not(.note-cover) { padding: 1rem 1.25rem 1.25rem !important; }
    .note-card-stacked h4 { font-size: 1rem !important; margin-top: 0.375rem !important; }
    .note-card-stacked p { font-size: 0.75rem !important; }

    /* Hide note descriptions on mobile horizontal cards — meta + title only for compactness */
    .note-card:not(.note-card-stacked) .note-desc { display: none; }

    /* Synthesis section */
    .synthesis-grid { gap: 2rem; }
    .synthesis-copy p { font-size: 0.9375rem; margin: 1rem 0 1.5rem; }

    /* Day-30 snapshot */
    .snapshot-grid { gap: 1.75rem; }
    .snapshot-list li { font-size: 0.875rem; }

    /* Package cards — compact strips on mobile */
    .pkg-grid, .pkg-grid.pkg-grid-3 { gap: 0.875rem; grid-template-columns: 1fr !important; }
    .pkg-card { padding: 1.25rem 1.375rem; }
    .pkg-card h3 { font-size: 1.375rem !important; margin-bottom: 0.375rem; }
    .pkg-meta { font-size: 0.6875rem; margin-bottom: 0.875rem; }
    .pkg-body { font-size: 0.875rem; line-height: 1.5; margin-bottom: 1rem; }
    .pkg-includes { gap: 0.5rem; margin-bottom: 1rem; }
    .pkg-includes li { font-size: 0.8125rem; line-height: 1.45; }
    .pkg-includes svg { width: 14px; height: 14px; margin-top: 0.125rem; }
    .pkg-eyebrow { font-size: 0.625rem; margin-bottom: 0.375rem; }
    .pkg-cta { padding: 0.5rem 0.875rem; font-size: 0.75rem; }

    /* Hero stacks: hide the top (agents) mockup on mobile, show only goals — keeps the visual without a 500px stack */
    .hero-stacks .mockup-frame:first-child { display: none; }
    .hero-stacks { min-height: 0; max-width: 360px; margin: 0 auto; }
    .hero-stacks .mockup-frame:nth-child(2) { transform: none; margin-top: 0; }

    /* Pillar mockups: tighter internals — chrome shorter, body padding less */
    .pillar-mock .mockup-body { padding: 1rem !important; }
    .pillar-mock .mockup-chrome { padding: 0.4rem 0.75rem; }
    .pillar-mock .mu-goals-head h4,
    .pillar-mock .mu-agents-head h4,
    .pillar-mock .mu-ctx-head h4,
    .pillar-mock .mu-kn-head h4 { font-size: 0.875rem; }
    .pillar-mock .mu-goals-title { font-size: 0.75rem; }
    .pillar-mock .mu-agents-title { font-size: 0.75rem; }
    .pillar-mock .mu-agents-note { font-size: 0.6875rem; }
    .pillar-mock .mu-ctx-title { font-size: 0.75rem; }
    .pillar-mock .mu-kn-tier-name { font-size: 0.75rem; }

    /* Snapshot mockup density */
    .snapshot-grid .mockup-body { padding: 1rem !important; }
    .snapshot-grid .mockup-chrome { padding: 0.4rem 0.75rem; }

    /* Synthesis section mockup density */
    .synthesis-grid .mockup-body { padding: 1rem !important; }

    /* Principles */
    .principles-grid { gap: 1.25rem; }
    .principle h3 { font-size: 1.125rem; }
    .principle p { font-size: 0.875rem; }

    /* About hero portrait — smaller */
    .about-portrait { max-width: 220px; }
    .about-portrait-caption { text-align: center; font-size: 0.625rem; }

    /* Closing CTA */
    .v2-closing p { font-size: 0.9375rem; margin-bottom: 1.5rem; }

    /* Director gates */
    .gates-grid { gap: 0.75rem; }
    .gate-card { padding: 1rem 1.125rem; }
    .gate-card .label { font-size: 0.6875rem; }
    .gate-card p { font-size: 0.75rem; }

    /* Container padding bump on phones */
    body.v2-body .container { padding: 0 1.25rem; }
}

@media (max-width: 420px) {
    /* Even tighter */
    .hero h1,
    .hero-split-copy h1 { font-size: 1.625rem !important; }
    .editorial-h2 { font-size: 1.5rem !important; }
    .pillar-copy h3 { font-size: 1.25rem !important; }
    .pkg-card h3 { font-size: 1.375rem !important; }
    .v2-closing h2 { font-size: 1.5rem !important; }

    .section { padding: 2.25rem 0 !important; }
    .synthesis-section { padding: 2.5rem 0 !important; }
    .v2-closing { padding: 3rem 0 !important; }

    .pillar-row { padding: 1.5rem 0 !important; }

    /* Mockup chrome: hide label entirely on tiny screens — traffic lights enough */
    .mockup-label { display: none; }

    /* Engagement cards: make illustration smaller still */
    .engagement-illus { aspect-ratio: 5 / 2 !important; }
    .engagement-illus svg { width: 40px !important; height: 40px !important; }

    /* Note covers */
    .note-cover { aspect-ratio: 5 / 2 !important; }
    .note-cover svg { width: 40px !important; height: 40px !important; }

    body.v2-body .container { padding: 0 1rem; }
}