/* ============================================
   Gleo.ai - Main Stylesheet
   shadcn/ui-inspired Modern Aesthetic
   ============================================ */

/* CSS Variables - shadcn/ui color system */
:root {
    /* Colors - shadcn/ui inspired palette */
    --color-primary: hsl(221.2 83.2% 53.3%);
    --color-primary-foreground: hsl(210 40% 98%);
    --color-secondary: hsl(210 40% 96.1%);
    --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
    --color-accent: hsl(210 40% 96.1%);
    --color-accent-foreground: hsl(222.2 47.4% 11.2%);
    --color-muted: hsl(210 40% 96.1%);
    --color-muted-foreground: hsl(215.4 16.3% 46.9%);
    --color-text: hsl(222.2 47.4% 11.2%);
    --color-text-light: hsl(215.4 16.3% 46.9%);
    --color-bg: hsl(0 0% 100%);
    --color-bg-light: hsl(210 40% 98%);
    --color-bg-dark: hsl(222.2 47.4% 11.2%);
    --color-border: hsl(214.3 31.8% 91.4%);
    --color-input: hsl(214.3 31.8% 91.4%);
    --color-ring: hsl(221.2 83.2% 53.3%);
    
    /* Typography */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
    
    /* Spacing - shadcn/ui scale */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Layout */
    --container-width: 1280px;
    --border-radius: 0.5rem;
    --border-radius-sm: 0.375rem;
    --border-radius-lg: 0.75rem;
    
    /* Shadows - shadcn/ui style */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Container */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Page Container */
.main-content {
    min-height: calc(100vh - 4.5rem - 200px);
    padding: var(--spacing-2xl) 0;
}

.page-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.use-case-page-sections {
    padding: 0 0 var(--spacing-2xl);
}

/* Playbooks marketplace section - full-width horizontal carousel, book-cover style */
.playbooks-marketplace {
    padding: var(--spacing-2xl) 0;
    border-top: 1px solid var(--color-border);
}

.playbooks-marketplace-header {
    margin-bottom: var(--spacing-xl);
}

.playbooks-marketplace-intro {
    font-size: 1rem;
    color: var(--color-muted-foreground);
    margin: 0;
}

/* Full viewport width - break out of container */
.playbooks-marketplace-carousel-wrap {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: var(--spacing-md);
}

.playbooks-marketplace-carousel-wrap::-webkit-scrollbar {
    height: 6px;
}

.playbooks-marketplace-carousel-wrap::-webkit-scrollbar-track {
    background: var(--color-muted);
}

.playbooks-marketplace-carousel-wrap::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

.playbooks-marketplace-carousel {
    display: flex;
    gap: var(--spacing-lg);
    padding: 0 var(--spacing-xl);
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--spacing-xl);
    scroll-padding-right: var(--spacing-xl);
}

/* Book-cover style card: portrait flip — front is cover, back reveals detail */
.playbooks-marketplace-card {
    flex: 0 0 160px;
    height: 240px;
    scroll-snap-align: start;
    perspective: 900px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.playbooks-marketplace-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--border-radius-lg);
}

.playbooks-marketplace-card:hover .playbooks-marketplace-card-inner,
.playbooks-marketplace-card:focus-visible .playbooks-marketplace-card-inner {
    transform: rotateY(180deg);
}

.playbooks-marketplace-card-front,
.playbooks-marketplace-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22), 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Front face — book cover */
.playbooks-marketplace-card-front {
    background: var(--cover-bg, hsl(221 83% 35%));
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
}

.playbooks-marketplace-card-front-body {
    flex: 1;
}

.playbooks-marketplace-card-cover-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.3;
    text-align: left;
    display: block;
    word-wrap: break-word;
}

.playbooks-marketplace-card-byline {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding-top: var(--spacing-xs);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.playbooks-marketplace-card-byline-pre {
    font-size: 0.5625rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    letter-spacing: 0.03em;
    line-height: 1;
}

.playbooks-marketplace-card-byline-logo {
    height: 12px;
    width: auto;
    opacity: 0.65;
    display: block;
}

/* Back face — detail */
.playbooks-marketplace-card-back {
    transform: rotateY(180deg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
}

.playbooks-marketplace-card-back-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.playbooks-marketplace-card-back-scroll::-webkit-scrollbar {
    width: 3px;
}

.playbooks-marketplace-card-back-scroll::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

.playbooks-marketplace-card-desc {
    font-size: 0.6875rem;
    line-height: 1.55;
    color: var(--color-text);
    margin: 0;
}

.playbooks-marketplace-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.playbooks-marketplace-card-meta-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.25rem;
}

.playbooks-marketplace-card-meta-label {
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-muted-foreground);
}

.playbooks-marketplace-card-meta-value {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: right;
}

.playbooks-marketplace-card-for {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.playbooks-marketplace-card-for-label {
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-muted-foreground);
}

.playbooks-marketplace-card-for-value {
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--color-text);
}

.playbooks-marketplace-card-cta {
    display: block;
    margin-top: auto;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: 0.01em;
}

/* Playbook interest modal - Forge form for playbook requests until marketplace is ready */
.playbook-interest-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.playbook-interest-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.playbook-interest-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.playbook-interest-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 28rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
}

.playbook-interest-modal-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-muted-foreground);
    background: none;
    border: none;
    cursor: pointer !important;
    border-radius: var(--border-radius);
    transition: color 0.2s, background 0.2s;
}

.playbook-interest-modal-close:hover {
    color: var(--color-text);
    background: var(--color-muted);
}

.playbook-interest-modal-content {
    padding: var(--spacing-2xl);
    padding-top: 2.75rem;
}

.playbook-interest-modal-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.playbook-interest-modal-subtitle {
    font-size: 0.9375rem;
    color: var(--color-muted-foreground);
    line-height: 1.6;
    margin-bottom: var(--spacing-xl);
}

.playbook-interest-modal-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.playbook-interest-modal-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.playbook-interest-modal-field label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
}

.playbook-interest-modal-field input,
.playbook-interest-modal-field textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: border-color 0.2s;
}

.playbook-interest-modal-field input::placeholder,
.playbook-interest-modal-field textarea::placeholder {
    color: var(--color-muted-foreground);
}

.playbook-interest-modal-field input:focus,
.playbook-interest-modal-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.playbook-interest-modal-field textarea {
    resize: vertical;
    min-height: 4rem;
}

.playbook-interest-modal-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-primary-foreground);
    background: var(--color-primary);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer !important;
    font-family: inherit;
    transition: background 0.2s;
}

.playbook-interest-modal-submit:hover {
    background: hsl(221.2 83.2% 47%);
}

/* Playbooks page sections */
.playbooks-page-sections {
    padding: var(--spacing-3xl) 0;
}

.playbooks-section {
    max-width: 720px;
    margin: 0 auto 5rem;
}

.playbooks-section:last-of-type {
    margin-bottom: 0;
}

/* Layout: Image above, full-width */
.playbooks-section-image-top {
    max-width: 100%;
}

.playbooks-section-image-top .playbooks-screenshot-wrap {
    max-width: 1100px;
    margin: 0 auto var(--spacing-xl);
    border-radius: 1.25rem;
    overflow: hidden;
}

.playbooks-section-image-top .playbooks-section-content {
    max-width: 640px;
    margin: 0 auto;
}

/* Layout: Split – image left, text right */
.playbooks-section-split {
    max-width: 1100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: center;
}

.playbooks-section-split.playbooks-section-image-left .playbooks-screenshot-wrap {
    order: 1;
}

.playbooks-section-split.playbooks-section-image-left .playbooks-section-body {
    order: 2;
}

.playbooks-section-split.playbooks-section-image-right .playbooks-screenshot-wrap {
    order: 2;
}

.playbooks-section-split.playbooks-section-image-right .playbooks-section-body {
    order: 1;
}

.playbooks-section-split .playbooks-screenshot-wrap {
    background: #F7F8FB;
    border-radius: 1.25rem;
    padding: 1.5rem;
}

/* Layout: Text only, narrow – for contrast */
.playbooks-section-narrow {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* Layout: Wide with sidebar-ish image */
.playbooks-section-featured {
    max-width: 1100px;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: var(--spacing-3xl);
    align-items: start;
}

.playbooks-section-featured .playbooks-screenshot-wrap {
    position: sticky;
    top: 6rem;
    background: #F7F8FB;
    border-radius: 1.25rem;
    overflow: hidden;
}

.playbooks-section-narrow .playbooks-screenshot-below {
    margin-top: var(--spacing-xl);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    /* display: block; */
}

/* Tools section – logo marquee */
.playbooks-section-tools {
    max-width: 100%;
    text-align: center;
}

.playbooks-section-header-centered {
    text-align: center;
    align-items: center;
}

.playbooks-section-header-centered .playbooks-section-badge {
    margin-left: auto;
    margin-right: auto;
}

.playbooks-tools-intro {
    max-width: 560px;
    margin: 0 auto var(--spacing-xl);
    text-align: center;
    color: var(--color-text-light);
    line-height: 1.7;
}

.playbooks-tools-grid {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
    flex-wrap: wrap;
}

.playbooks-tool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    min-width: 130px;
    max-width: 185px;
}

.playbooks-tool-icons {
    width: 100%;
    aspect-ratio: 1;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
}

.playbooks-tool-icons .tool-icon {
    position: absolute;
    width: 80px;
    height: 80px;
    object-fit: contain;
}

/* 2-icon layout */
.playbooks-tool-icons--2 .tool-icon:nth-child(1) {
    top: 33%;
    left: 42%;
    z-index: 2;
}

.playbooks-tool-icons--2 .tool-icon:nth-child(2) {
    top: 20%;
    left: 21%;
    z-index: 1;
}

/* 3-icon layout */
.playbooks-tool-icons--3 .tool-icon:nth-child(1) {
    top: 35%;
    left: 28%;
    z-index: 2;
}

.playbooks-tool-icons--3 .tool-icon:nth-child(2) {
    top: 18%;
    left: 50%;
    z-index: 3;
}

.playbooks-tool-icons--3 .tool-icon:nth-child(3) {
    top: 15%;
    left: 54%;
    z-index: 1;
}

/* paste into main.css */

/* Calendar apps */
.playbooks-tool-icons--calendar .tool-icon:nth-child(1) {
    top: 26%; left: 37%;
    z-index: 2;
}
.playbooks-tool-icons--calendar .tool-icon:nth-child(2) {
    top: 9%; left: 16%;
    z-index: 1;
}

/* Whiteboards */
.playbooks-tool-icons--whiteboards .tool-icon:nth-child(1) {
    top: 30%; left: 28%;
    z-index: 3;
}
.playbooks-tool-icons--whiteboards .tool-icon:nth-child(2) {
    top: 18%; left: 47%;
    z-index: 2;
}
.playbooks-tool-icons--whiteboards .tool-icon:nth-child(3) {
    top: 12%; left: 10%;
    z-index: 1;
}

/* Meetings */
.playbooks-tool-icons--meetings .tool-icon:nth-child(1) {
    top: 37%; left: 27%;
    z-index: 3;
}
.playbooks-tool-icons--meetings .tool-icon:nth-child(2) {
    top: 11%; left: 44%;
    z-index: 2;
}
.playbooks-tool-icons--meetings .tool-icon:nth-child(3) {
    top: 10%; left: 7%;
    z-index: 1;
}

/* Docs */
.playbooks-tool-icons--docs .tool-icon:nth-child(1) {
    top: 31%; left: 38%;
    z-index: 2;
}
.playbooks-tool-icons--docs .tool-icon:nth-child(2) {
    top: 12%; left: 13%;
    z-index: 1;
}

/* Transcripts */
.playbooks-tool-icons--transcripts .tool-icon:nth-child(1) {
    top: 34%; left: 40%;
    z-index: 2;
}
.playbooks-tool-icons--transcripts .tool-icon:nth-child(2) {
    top: 16%; left: 18%;
    z-index: 1;
}

.playbooks-tool-label {
    font-size: 0.875rem;
    color: var(--color-text-light);
    text-align: center;
    font-weight: 400;
}

@media (max-width: 900px) {
    .playbooks-tools-grid {
        gap: var(--spacing-md);
    }

    .playbooks-tool-card {
        min-width: 100px;
        max-width: 140px;
    }

    .playbooks-tool-icons .tool-icon {
        width: 44px;
        height: 44px;
    }
}

/* Screenshot placeholder – replace with img when adding from Figma */
.playbooks-screenshot-placeholder {
    aspect-ratio: 16 / 10;
    min-height: 200px;
    background: var(--color-muted);
    border: 2px dashed var(--color-border);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted-foreground);
    font-size: 0.875rem;
    text-align: center;
    padding: var(--spacing-lg);
}

.playbooks-screenshot-placeholder span {
    max-width: 240px;
    line-height: 1.5;
}

.playbooks-screenshot-wrap > img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-lg);
}

/* ============================================================
   Session Prep UI — coded component (animatable)
   ============================================================ */

.session-prep-ui {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem;
}

.session-prep-activity-types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.session-prep-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.session-prep-chip:hover {
    border-color: #c7d2fe;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}

.session-prep-chip--session {
    color: #4f46e5;
}

.session-prep-chip--session .session-prep-chip-icon {
    color: #6366f1;
}

.session-prep-chip-icon {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
    color: var(--color-muted-foreground);
    stroke-width: 2;
}

.session-prep-ai-prompt {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0;
    font-size: 0.8125rem;
    color: var(--color-muted-foreground);
}

.session-prep-ai-or {
    font-size: 0.8125rem;
    color: var(--color-muted-foreground);
}

.session-prep-ai-icon {
    width: 0.9rem;
    height: 0.9rem;
    color: #6366f1;
    stroke-width: 2;
    flex-shrink: 0;
}

.session-prep-ai-text {
    color: #4f46e5;
    font-weight: 500;
}

/* Session Prep — scroll-triggered animation */

.session-prep-chip.will-animate {
    opacity: 0;
    transform: scale(0.82) translateY(5px);
}

.session-prep-ai-prompt {
    transition: opacity 0.4s ease;
}

.session-prep-ai-prompt.will-animate {
    opacity: 0;
}

/* ============================================================
   Phases Timeline UI — coded component
   ============================================================ */

.phases-timeline-ui {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    gap: 1.25rem;
}

.phase-item {
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
}

.phase-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    padding-top: 0.125rem;
}

.phase-dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.phase-dot--discovery { background: #3b82f6; }
.phase-dot--design    { background: #8b5cf6; }

.phase-dot--deliver {
    background: #22c55e;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phase-dot-check-icon {
    width: 0.75rem;
    height: 0.75rem;
    color: #fff;
    stroke-width: 3;
    flex-shrink: 0;
}

.phase-connector {
    width: 2px;
    flex: 1;
    background: linear-gradient(to bottom, #bfdbfe, #ddd6fe);
    margin-top: 0.25rem;
    margin-bottom: -1.25rem;
    position: relative;
    z-index: 0;
}

.phase-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1rem 1.125rem;
    flex: 1;
    position: relative;
    z-index: 1;
}

.phase-item--last .phase-card {
    margin-bottom: 0;
}

.phase-card-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}

.phase-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.phase-card-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    stroke-width: 2;
}

.phase-card-icon--discovery { color: #3b82f6; }
.phase-card-icon--design    { color: #8b5cf6; }
.phase-card-icon--deliver   { color: #22c55e; }

.phase-sessions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.phase-session-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.375rem;
}

.phase-session-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.phase-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.625rem;
    background: var(--color-muted);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-muted-foreground);
}

/* Phases Timeline — scroll-triggered animation */

.phase-item {
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.phase-item.will-animate {
    opacity: 0;
    transform: translateX(-20px);
}

.phase-item.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.phase-connector {
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.5s ease 0.3s;
}

.phase-item.is-visible .phase-connector {
    transform: scaleY(1);
}

/* ============================================================
   Session Agenda UI — coded component
   ============================================================ */

.agenda-ui {
    background: hsl(220 20% 97%);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    margin: 1.75rem 0;
}

.agenda-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.625rem;
    padding: 0.625rem 0.875rem;
}

.agenda-item--left {
    max-width: 88%;
    margin-right: auto;
}

.agenda-item--right {
    max-width: 88%;
    margin-left: auto;
}

.agenda-time {
    font-size: 0.6875rem;
    color: var(--color-muted-foreground);
    white-space: nowrap;
    flex-shrink: 0;
    width: 4.25rem;
    font-variant-numeric: tabular-nums;
}

.agenda-duration {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #3b82f6;
    background: #eff6ff;
    padding: 0.125rem 0.4375rem;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.agenda-item-body {
    flex: 1;
    min-width: 0;
}

.agenda-title {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda-desc {
    display: block;
    font-size: 0.6875rem;
    color: var(--color-muted-foreground);
    margin-top: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda-tool {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: var(--color-muted-foreground);
    flex-shrink: 0;
    white-space: nowrap;
}

.agenda-tool-icon {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    stroke-width: 2;
}

/* Arrows between agenda items */

.agenda-arrow {
    display: flex;
    padding: 0.125rem 0;
}

.agenda-arrow--right {
    justify-content: flex-end;
    padding-right: 0.5rem;
}

.agenda-arrow--left {
    justify-content: flex-start;
    padding-left: 0.5rem;
}

.agenda-arrow--down {
    justify-content: center;
}

.agenda-arrow img {
    height: 2.25rem;
    width: auto;
}

.agenda-arrow--down img {
    height: 1.125rem;
}

/* Break pill */

.agenda-break {
    display: flex;
    justify-content: center;
    padding: 0.25rem 0;
}

.agenda-break-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 1.25rem;
    background: rgba(37, 99, 235, 0.1);
    border: 1.5px solid rgba(37, 99, 235, 0.15);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #5864A9;
}

/* Session Agenda — scroll-triggered animation */

.agenda-item,
.agenda-break,
.agenda-arrow {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.agenda-will-animate {
    opacity: 0;
    transform: translateY(10px);
}

.agenda-is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   Post Session UI — coded component
   ============================================================ */

.post-session-ui {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

/* Cards */

.post-session-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.875rem;
    padding: 1rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.post-session-card--questions {
    margin-left: 1.5rem;
}

.post-session-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.post-session-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text);
}

.post-session-card-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    stroke-width: 2;
}

.post-session-card-icon--tasks    { color: #22c55e; }
.post-session-card-icon--questions { color: #f43f5e; }

/* Items within cards */

.post-session-item {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--color-border);
}

.post-session-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.post-session-item-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.post-session-item-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    flex: 1;
    min-width: 0;
}

.post-session-item-meta {
    font-size: 0.6875rem;
    color: var(--color-muted-foreground);
    white-space: nowrap;
    flex-shrink: 0;
}

.post-session-item-bottom {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.post-session-item-person {
    font-size: 0.6875rem;
    color: var(--color-muted-foreground);
    margin-left: auto;
}

.post-session-answer {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #16a34a;
    margin-left: auto;
}

/* Status / tag badges */

.post-session-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.post-session-badge--done    { background: #dcfce7; color: #15803d; }
.post-session-badge--todo    { background: var(--color-muted); color: var(--color-muted-foreground); }
.post-session-badge--manual  { background: #ffedd5; color: #c2410c; }
.post-session-badge--urgent  { background: #fee2e2; color: #dc2626; }
.post-session-badge--ai      { background: #e0e7ff; color: #4338ca; }
.post-session-badge--medium  { background: #fef3c7; color: #92400e; }

/* Post Session — scroll-triggered animation */

.post-session-card {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.ps-will-animate {
    opacity: 0;
    transform: translateY(16px);
}

.ps-is-visible {
    opacity: 1;
    transform: translateY(0);
}

.post-session-item {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.ps-item-will-animate {
    opacity: 0;
    transform: translateX(-10px);
}

.ps-item-is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Stacked playbook cards */
.playbook-cards-stack-wrap {
    background: #F2F4F7;
    border-radius: 1.5rem;
    padding: 2rem;
    overflow: hidden;
}

.playbook-cards-stack {
    position: relative;
    padding-bottom: 82%;
}

/* Higher specificity (.playbook-cards-stack .playbook-stack-card = 0,2,0)
   overrides .playbooks-screenshot-wrap img (0,1,1) */
.playbook-cards-stack .playbook-stack-card {
    position: absolute;
    width: 68%;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 1rem;
}

.playbook-cards-stack .playbook-stack-card--1 {
    left: 0;
    z-index: 3;
    transform: translateY(-50%) scale(1);
    transform-origin: left center;
}

.playbook-cards-stack .playbook-stack-card--2 {
    left: 26%;
    z-index: 2;
    transform: translateY(-50%) scale(0.82);
    transform-origin: left center;
}

.playbook-cards-stack .playbook-stack-card--3 {
    left: 46%;
    z-index: 1;
    transform: translateY(-50%) scale(0.66);
    transform-origin: left center;
}

/* MCP composite screenshot */
.mcp-screenshot-wrap {
    /* Allow absolute children to overflow the wrap's border-radius clip */
    overflow: visible !important;
}

.mcp-screenshot-composite {
    position: relative;
    /* Padding reserves space for icons above terminal, widget below, widget right */
    padding: 13% 5% 26% 1%;
}

/* Prefix all children with .mcp-screenshot-composite (specificity 0,2,0)
   to beat the generic .playbooks-screenshot-wrap img rule (0,1,1) */
.mcp-screenshot-composite .mcp-terminal {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.875rem;
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.20),
        0 4px 16px rgba(0, 0, 0, 0.10);
    position: relative;
    z-index: 1;
}

/* App logos – top-right, overlapping */
.mcp-screenshot-composite .mcp-app-icon {
    position: absolute;
    width: 17%;
    height: auto;
    border-radius: 22%;
    z-index: 4;
}

.mcp-screenshot-composite .mcp-app-icon--claude {
    top: 1%;
    right: 18%;
    transform: rotate(-8deg);
}

.mcp-screenshot-composite .mcp-app-icon--cursor {
    top: 6%;
    right: 4%;
    transform: rotate(6deg);
    z-index: 3;
}

/* Gleo output widgets */
.mcp-screenshot-composite .mcp-widget {
    position: absolute;
    width: 54%;
    height: auto;
    border-radius: 0.875rem;
    z-index: 3;
}

.mcp-screenshot-composite .mcp-widget--code-quality {
    bottom: 10%;
    left: -3%;
}

.mcp-screenshot-composite .mcp-widget--dependency {
    top: 40%;
    right: 1%;
}

@media (max-width: 900px) {
    .playbooks-section-split,
    .playbooks-section-featured {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .playbooks-section-split .playbooks-screenshot-wrap,
    .playbooks-section-split .playbooks-section-body,
    .playbooks-section-featured .playbooks-screenshot-wrap,
    .playbooks-section-featured .playbooks-section-body {
        order: unset;
    }

    .playbooks-section-featured .playbooks-screenshot-wrap {
        position: static;
    }

    .playbooks-section-split .playbooks-screenshot-wrap {
        max-width: 560px;
        margin: 0 auto;
    }
}

.playbooks-section-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.playbooks-section-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: hsl(221.2 83.2% 53.3% / 0.1);
    border-radius: var(--border-radius-sm);
}

.playbooks-section h2 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.playbooks-section-content p {
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

.playbooks-section-lead {
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--color-text);
}

.playbooks-section-list {
    margin-top: var(--spacing-lg);
    padding-left: var(--spacing-xl);
    list-style: none;
}

.playbooks-section-list li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: var(--spacing-sm);
    line-height: 1.7;
}

.playbooks-section-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}

.playbooks-cta-section {
    padding: var(--spacing-3xl) 0;
    text-align: center;
    border-top: 1px solid var(--color-border);
    margin-top: var(--spacing-3xl);
}

.playbooks-cta-text {
    max-width: 42ch;
    margin: 0 auto var(--spacing-lg);
    font-size: 1.125rem;
    color: var(--color-text-light);
}

.contact-us-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.contact-us-email-input {
    padding: 0.875rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--color-text);
    background: #fff;
    width: 18rem;
    max-width: 100%;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-us-email-input::placeholder {
    color: var(--color-muted-foreground);
}

.contact-us-email-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.page-container h1 {
    font-family: 'Libre Baskerville', Georgia, serif;
    margin-bottom: var(--spacing-lg);
    font-size: clamp(2rem, 4vw, 2.5rem);
}

.page-container h2 {
    font-family: 'Libre Baskerville', Georgia, serif;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    font-size: clamp(1.5rem, 3vw, 1.875rem);
}

.page-container h3 {
    font-family: 'Libre Baskerville', Georgia, serif;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}

.page-container p {
    margin-bottom: var(--spacing-md);
    line-height: 1.7;
}

.page-container ul,
.page-container ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-xl);
}

.page-container ul {
    list-style-type: disc;
}

.page-container ul ul {
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    list-style-type: circle;
}

.page-container ul ul ul {
    list-style-type: square;
}

.page-container ol {
    list-style-type: decimal;
}

.page-container ol ol {
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    list-style-type: lower-alpha;
}

.page-container ol ol ol {
    list-style-type: lower-roman;
}

.page-container li {
    margin-bottom: var(--spacing-sm);
    line-height: 1.7;
}

.page-container ol li::marker {
    font-weight: 600;
    color: var(--color-primary);
}

.page-container ul li::marker {
    color: var(--color-primary);
}

.page-container li > p:last-child {
    margin-bottom: 0;
}

/* Blog List - Index page styling */
.blog-list-header {
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
}

.blog-list-header h1 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.blog-list-header .blog-list-desc {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-muted-foreground);
}

.blog-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.blog-list-item {
    display: block;
    padding: var(--spacing-xl) 0;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}

.blog-list-item:last-child {
    border-bottom: none;
}

.blog-list-item:hover {
    background-color: var(--color-bg-light);
}

.blog-list-item:hover .blog-list-item-title {
    color: var(--color-primary);
}

.blog-list-item-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
    transition: color 0.15s ease;
}

.blog-list-item-summary {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-muted-foreground);
    margin-bottom: var(--spacing-sm);
}

.blog-list-item-meta {
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
}

/* Post Article - Blog detail styling */
.post-article .post-breadcrumb {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-muted-foreground);
}

.post-article .post-breadcrumb a {
    color: var(--color-primary);
}

.post-article .post-breadcrumb a:hover {
    opacity: 0.85;
}

.post-article .post-breadcrumb [aria-current="page"] {
    color: var(--color-text);
}

.post-article .post-meta {
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
    margin-bottom: var(--spacing-sm);
}

.post-article .post-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
}

.post-article .post-title,
.post-article .post-body h2 {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.post-article .post-title::after,
.post-article .post-body h2::after {
    content: '';
    position: absolute;
    left: -0.12em;
    right: -0.12em;
    bottom: 0.08em;
    height: 0.24em;
    background: #ff6b35;
    opacity: 0.14;
    z-index: -1;
    transform: rotate(-0.45deg);
    border-radius: 9999px;
}

.post-article .post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.post-article .post-tag {
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    color: var(--color-muted-foreground);
    background: transparent;
}

.post-article .post-cover {
    margin: var(--spacing-2xl) 0;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.post-article .post-body {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-2xl);
    border-top: 1px solid var(--color-border);
}

.post-article .post-body p {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
}

.post-article .post-body p:first-of-type {
    font-size: 1.125rem;
    color: var(--color-text-light);
}

.post-article .post-body p:last-child {
    margin-bottom: 0;
}

.post-article .post-body h2 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.5rem;
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-md);
}

.post-article .post-body ul {
    margin: var(--spacing-lg) 0;
    padding-left: 1.5rem;
    list-style-type: disc;
}

.post-article .post-body ul ul {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    list-style-type: circle;
}

.post-article .post-body ul ul ul {
    list-style-type: square;
}

.post-article .post-body ol {
    margin: var(--spacing-lg) 0;
    padding-left: 1.75rem;
    list-style-type: decimal;
}

.post-article .post-body ol ol {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    list-style-type: lower-alpha;
}

.post-article .post-body ol ol ol {
    list-style-type: lower-roman;
}

.post-article .post-body li {
    margin-bottom: var(--spacing-md);
    line-height: 1.7;
}

.post-article .post-body ol li::marker {
    font-weight: 600;
    color: var(--color-primary);
}

.post-article .post-body ul li::marker {
    color: var(--color-primary);
}

.post-article .post-body li strong {
    display: inline-block;
    margin-right: 0.25rem;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

p {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-light);
}

/* New Navigation - Reference Design - Exact Match */
.nav-header {
    position: sticky;
    top: 0;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    z-index: 1000;
}

.nav-container {
    width: 100%;
}

.nav-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4.5rem;
}

.nav-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000000;
}

.logo-image {
    height: 2rem;
    width: auto;
    display: block;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.nav-item-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.nav-dropdown-caret {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.nav-item-dropdown.open .nav-dropdown-caret {
    transform: rotate(180deg);
}

.nav-dropdown-panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: min(960px, 92vw);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 1100;
}

.nav-dropdown-panel::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.nav-item-dropdown.open .nav-dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
    padding: 1.25rem 1.25rem 1.35rem;
}

.nav-dropdown-grid-2 {
    grid-template-columns: 1fr 1fr;
}

.nav-dropdown-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.nav-dropdown-column,
.nav-dropdown-featured {
    min-width: 0;
}

.nav-dropdown-heading {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: #6b7280;
}

.nav-dropdown-link {
    display: block;
    text-decoration: none;
    color: #111827;
    padding: 0.625rem 0.75rem;
    border-radius: 0.625rem;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.nav-dropdown-link + .nav-dropdown-link {
    margin-top: 0.25rem;
}

.nav-dropdown-link:hover {
    background: #f9fafb;
    border-color: #e5e7eb;
    transform: translateY(-1px);
}

.nav-dropdown-link-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.125rem;
}

.nav-dropdown-link-desc {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #6b7280;
}

.nav-feature-card {
    display: block;
    text-decoration: none;
    color: #111827;
    border-radius: 0.875rem;
    border: 1px solid #f1f5f9;
    background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
    padding: 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.nav-feature-card:hover {
    border-color: #fdba74;
    box-shadow: 0 10px 30px rgba(251, 146, 60, 0.12);
    transform: translateY(-1px);
}

.nav-feature-kicker {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9a3412;
    background: #ffedd5;
    padding: 0.2rem 0.45rem;
    border-radius: 9999px;
    margin-bottom: 0.625rem;
}

.nav-feature-title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.4rem;
}

.nav-feature-desc {
    display: block;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.nav-feature-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ea580c;
}


/* Lead use case – Productised Services highlight */
.nav-feature-card-lead {
    background: linear-gradient(180deg, #fef3c7 0%, #fffbeb 50%, #ffffff 100%);
    border-color: #fcd34d;
}

.nav-feature-card-lead:hover {
    border-color: #f59e0b;
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.15);
}

.nav-feature-kicker-lead {
    background: #f59e0b;
    color: #ffffff;
}

.nav-dropdown-link-cta {
    margin-top: 0.5rem;
}

/* Footer – Productised Services lead highlight */
.footer-use-case-lead {
    margin-bottom: var(--spacing-sm);
}

.footer-link-highlight {
    color: #fcd34d !important;
    font-weight: 600;
}

.footer-link-highlight:hover {
    color: #fef3c7 !important;
}

.nav-link {
    text-decoration: none;
    color: #000000;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 0.15s ease-in-out;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.nav-link:hover {
    color: #000000;
    opacity: 0.7;
}

.nav-cta {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.btn-nav-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    background: #000000;
    color: #ffffff;
    text-decoration: none;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
    border: none;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.btn-nav-primary:hover {
    background: #1a1a1a;
}

/* Hero Section - Reference Design - Exact Match (Amplemarket style) */
.hero-section {
    padding: 5rem 0 6rem;
    background: #ffffff;
    position: relative;
}

/* Studio page hero — dotted bg wraps full hero text + cards graphic */
.studio-hero {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    overflow: hidden;
}

.studio-hero .hero-section {
    background: transparent;
}

.studio-hero-visual-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.studio-hero-img {
    display: block;
    width: 100%;
    max-width: 1160px;
    height: auto;
    margin: 0 auto;
}

/* ─── Produce › Publish › Deploy UI ─────────────────────────────────── */

.ppd-ui {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: start;
    gap: 0 0.875rem;
    padding: 0.25rem 0 0.5rem;
}

/* Column */
.ppd-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Pill headers */
.ppd-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.375rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.ppd-pill--produce { background: #2563eb; }
.ppd-pill--publish { background: #7c3aed; }
.ppd-pill--deploy  { background: #059669; }

.ppd-pill-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    stroke-width: 2.25;
}

/* Arrow between stages */
.ppd-arrow {
    font-size: 1.375rem;
    color: var(--color-muted-foreground);
    line-height: 1;
    padding-top: 0.875rem;
    user-select: none;
}

/* Vertical connector line */
.ppd-line {
    width: 2px;
    height: 1.75rem;
    margin: 0 auto;
    border-radius: 1px;
}

.ppd-line--produce { background: #93c5fd; }
.ppd-line--publish { background: #c4b5fd; }
.ppd-line--deploy  { background: #6ee7b7; }

/* Feature cards */
.ppd-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Feature items */
.ppd-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--color-text);
}

.ppd-item-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

.ppd-item-icon-wrap--produce { background: #dbeafe; }
.ppd-item-icon-wrap--publish { background: #ede9fe; }
.ppd-item-icon-wrap--deploy  { background: #d1fae5; }

.ppd-item-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    stroke-width: 1.75;
}

.ppd-item-icon--produce { color: #2563eb; }
.ppd-item-icon--publish { color: #7c3aed; }
.ppd-item-icon--deploy  { color: #059669; }

/* Animation */
.ppd-col {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.ppd-col.ppd-will-animate {
    opacity: 0;
    transform: translateY(18px);
}

.ppd-col.ppd-is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ppd-arrow {
    transition: opacity 0.35s ease;
}

.ppd-arrow.ppd-arrow-will-animate { opacity: 0; }
.ppd-arrow.ppd-arrow-is-visible   { opacity: 1; }

/* Mobile */
@media (max-width: 720px) {
    .ppd-ui {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ppd-arrow {
        padding: 0.25rem 0;
        text-align: center;
        font-size: 1.5rem;
        transform: rotate(90deg);
        display: block;
    }
}

/* ─── Audience Selector UI ───────────────────────────────────────────── */

.aud-selector {
    background: hsl(210 40% 96.1%);
    border-radius: 1.25rem;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}

.aud-selector-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-left: 0.25rem;
}

.aud-selector-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.aud-selector-subtitle {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    margin: 0;
}

.aud-options {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Individual option row */
.aud-option {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    background: #fff;
    border: 1.5px solid var(--color-border);
    border-radius: 0.875rem;
    padding: 0.875rem 1rem;
}

.aud-option--selected {
    background: #eff6ff;
    border-color: #6366f1;
}

/* Radio button */
.aud-radio {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    flex-shrink: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aud-radio--selected {
    border-color: #4f46e5;
    background: #fff;
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5.5px #4f46e5;
}

/* Icon tile */
.aud-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

.aud-icon-wrap--private { background: #f1f5f9; }
.aud-icon-wrap--company { background: #dbeafe; }
.aud-icon-wrap--public  { background: #d1fae5; }

.aud-icon {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 1.75;
}

.aud-icon--private { color: #94a3b8; }
.aud-icon--company { color: #2563eb; }
.aud-icon--public  { color: #059669; }

/* Option text */
.aud-option-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.aud-option-label {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.aud-option-desc {
    font-size: 0.8125rem;
    color: var(--color-muted-foreground);
    line-height: 1.4;
}

/* Animation */
.aud-option {
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.aud-option.aud-will-animate {
    opacity: 0;
    transform: translateX(14px);
}

.aud-option.aud-is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Studio Workflow Cards — scroll-triggered animation */

.swf-card {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.swf-card.will-animate {
    opacity: 0;
    transform: translateY(16px);
}

.swf-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.swf-card--muted.is-visible {
    opacity: 0.72;
}

.swf-connector {
    transition: opacity 0.4s ease;
}

.swf-connector.will-animate {
    opacity: 0;
}

.swf-connector.is-visible {
    opacity: 1;
}

/* Studio Workflow Cards — coded session flow UI */

.studio-workflow-ui {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 2rem 2.5rem;
}

.swf-card {
    flex: 1;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1.125rem 1.125rem 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

.swf-card--muted {
    opacity: 0.72;
}

.swf-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.swf-session-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
}

.swf-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5625rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: #ede9fe;
    color: #7c3aed;
    white-space: nowrap;
}

.swf-card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}

.swf-card-desc {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-muted-foreground);
    margin: 0;
    flex: 1;
}

.swf-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--color-border);
}

.swf-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--color-muted-foreground);
}

.swf-meta-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    stroke-width: 2;
}

.swf-card-artefacts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.swf-artefact {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.4375rem;
    background: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--color-muted-foreground);
    white-space: nowrap;
}

.swf-artefact--green {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.swf-artefact-icon {
    width: 0.625rem;
    height: 0.625rem;
    flex-shrink: 0;
    stroke-width: 2;
}

.swf-connector {
    flex: 0 0 auto;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
    margin-bottom: 1.5rem;
}

.swf-connector svg {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 900px) {
    .studio-workflow-ui {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0 1.25rem 2rem;
    }

    .swf-connector {
        width: 2rem;
        height: 2.5rem;
        margin: 0 auto;
        transform: rotate(90deg);
    }
}

.hero-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hero-content {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Coming Soon Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    background: #E9D5FF;
    border-radius: 9999px;
    margin-bottom: 2rem;
}

.hero-badge-icon {
    font-size: 0.875rem;
}

.hero-badge-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* AI Callout with Iridescent Texture */
.hero-ai-callout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.5rem;
    margin-bottom: 2rem;
    border-radius: 9999px;
    position: relative;
    overflow: visible;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.2);
    isolation: isolate;
}

/* Animated gradient border - positioned outside */
.hero-ai-callout::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
        45deg,
        #ff6b9d,
        #c44569,
        #f8b500,
        #ff6b9d,
        #c44569
    );
    background-size: 300% 300%;
    border-radius: 9999px;
    z-index: -1;
    animation: gradientBorder 3s ease infinite;
    opacity: 0.8;
}

/* Inner background with texture - creates spacing from border */
.hero-ai-callout::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background-image: url("../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/../images/iridescent-texture.png");
    background-size: 200% 200%;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    border-radius: 9999px;
    z-index: 0;
    animation: iridescentShift 8s ease-in-out infinite;
    backdrop-filter: blur(10px);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
}

.hero-ai-callout-text {
    position: relative;
    z-index: 2;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    animation: textShine 3s ease-in-out infinite;
}

@keyframes textShine {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.2);
    }
}

@keyframes iridescentShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 100% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
}

@keyframes gradientBorder {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes shine {
    0% {
        transform: translateX(-100%) skewX(-15deg);
    }
    50% {
        transform: translateX(200%) skewX(-15deg);
    }
    100% {
        transform: translateX(200%) skewX(-15deg);
    }
}

.hero-headline {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #000000;
    margin-bottom: 1.5rem;
    margin-top: 0;
    font-family: 'Libre Baskerville', Georgia, serif;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.hero-headline br {
    display: block;
}

/* Hand-drawn highlight effect */
.highlight,
.hero-headline .highlight,
.hero-subheadline .highlight {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    z-index: 1;
}

.highlight::after,
.hero-headline .highlight::after,
.hero-subheadline .highlight::after {
    content: '';
    position: absolute;
    left: -0.3em;
    right: -0.3em;
    bottom: 0.1em;
    height: 0.2em;
    background: #ff6b35;
    opacity: 0.25;
    z-index: 0;
    transform: rotate(-0.5deg);
    border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
    animation: drawHighlight 0.6s ease-out forwards;
    animation-delay: 0.8s;
    will-change: opacity;
    pointer-events: none;
}

@keyframes drawHighlight {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.25;
    }
}

.hero-subheadline {
    font-size: 1.125rem;
    color: #000000;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Email CTA Form */
.hero-cta-form {
    margin-bottom: 1rem;
}

.hero-email-form {
    position: relative;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 28rem;
    margin: 0 auto;
}

/* Honeypot — hidden from view; do not use display:none (some bots skip it) */
.hero-form-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hero-email-input {
    flex: 1;
    min-width: 200px;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #000000;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    transition: border-color 0.15s ease-in-out;
}

.hero-email-input:focus {
    outline: none;
    border-color: #3b82f6;
}

.hero-email-input::placeholder {
    color: #9ca3af;
}

.hero-small-text {
    font-size: 0.875rem;
    color: #000000;
    font-weight: 400;
    margin-top: 0.75rem;
    margin-bottom: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.btn-arrow {
    margin-left: 0.5rem;
    display: inline-block;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    background: #000000;
    color: #ffffff;
    text-decoration: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
    border: none;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    white-space: nowrap;
}

.btn-hero-primary:hover {
    background: #1a1a1a;
}

.btn-hero-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #525252;
}

.btn-hero-primary:disabled:hover {
    background: #525252;
}

.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    background: #ffffff;
    color: #111827;
    text-decoration: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.btn-hero-secondary:hover {
    background: #f9fafb;
    border-color: #3b82f6;
    color: #3b82f6;
}

/* Mobile Navigation */
@media (max-width: 968px) {
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 1rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        border-top: 1px solid #e5e7eb;
        gap: 1rem;
        margin: 0;
    }
    
    .nav-menu.active {
        display: flex;
    }

    .nav-item-dropdown {
        width: 100%;
    }

    .nav-dropdown-trigger {
        width: 100%;
        justify-content: space-between;
    }

    .nav-dropdown-panel {
        position: static;
        width: 100%;
        margin-top: 0.625rem;
        transform: none;
        box-shadow: none;
        border-radius: 0.75rem;
        border-color: #e5e7eb;
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: max-height 0.25s ease;
    }

    .nav-item-dropdown.open .nav-dropdown-panel {
        max-height: 900px;
    }

    .nav-dropdown-grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
        padding: 0.875rem;
    }
    
    .nav-cta {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 4px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.5rem;
    }
    
    .mobile-menu-toggle span {
        width: 24px;
        height: 2px;
        background: #000000;
        transition: all 0.3s;
    }
    
    .hero-section {
        padding: 4rem 0 5rem;
    }
    
    .hero-email-form {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
    }
    
    .hero-email-input {
        width: 100%;
    }
    
    .btn-hero-primary {
        width: 100%;
    }
    
    .hero-headline {
        font-size: 2.25rem;
    }
    
    .nav-wrapper {
        padding: 0 1.5rem;
    }
}

/* Header & Navigation - shadcn/ui style (legacy) */
.site-header {
    position: sticky;
    top: 0;
    background: hsl(0 0% 100% / 0.8);
    backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
}

.navbar {
    padding: var(--spacing-md) 0;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.logo-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    color: var(--color-text);
    font-weight: 700;
    font-size: 1.5rem;
}

.logo {
    height: 40px;
    width: auto;
}

.logo-text {
    color: #000000;
    font-weight: 600;
}

.navbar-menu {
    display: flex;
    list-style: none;
    gap: var(--spacing-lg);
    align-items: center;
}

.navbar-menu a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
    transition: color 0.2s;
}

.navbar-menu a:hover {
    color: var(--color-primary);
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
}

.mobile-menu-toggle span {
    width: 25px;
    height: 2px;
    background: #000000;
    transition: all 0.3s;
}

/* Buttons - shadcn/ui style */
.cta-button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0.625rem 1.25rem;
    background: var(--color-primary);
    color: var(--color-primary-foreground);
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: all 0.15s ease-in-out;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.cta-button:hover,
.btn:hover {
    background: hsl(221.2 83.2% 48%);
    box-shadow: var(--shadow);
}

.cta-button:active,
.btn:active {
    transform: scale(0.98);
}

.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-secondary-foreground);
    border: 1px solid var(--color-border);
    box-shadow: none;
}

.btn-secondary:hover {
    background: hsl(210 40% 94%);
    color: var(--color-secondary-foreground);
}

.btn-large {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

/* Hero Section - shadcn/ui style */
.hero {
    padding: var(--spacing-3xl) 0;
    background: var(--color-bg);
    text-align: center;
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.hero h1 {
    margin-bottom: var(--spacing-lg);
    color: var(--color-text);
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    letter-spacing: -0.025em;
    line-height: 1.1;
}


.hero .lead {
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-2xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
    line-height: 1.6;
}

.hero-cta {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-xl);
}

.hero-visual {
    margin-top: var(--spacing-2xl);
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
}

/* Section Styles */
.section {
    padding: var(--spacing-2xl) 0;
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.section-subtitle {
    text-align: center;
    color: var(--color-text-light);
    font-size: 1.125rem;
    max-width: 700px;
    margin: 0 auto var(--spacing-xl);
}

/* Product Demo Section with Persona Switcher */
.product-demo {
    background: var(--color-bg-light);
}

.persona-switcher {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
}

.persona-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

.persona-btn:hover {
    background: var(--color-accent);
    border-color: var(--color-border);
}

.persona-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-foreground);
    box-shadow: var(--shadow);
}

.persona-icon {
    font-size: 1.25rem;
}

.demo-container {
    position: relative;
    min-height: 600px;
}

.demo-content {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
    animation: fadeIn 0.3s ease-in;
}

.demo-content.active {
    display: grid;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.demo-visual {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.demo-description h3 {
    font-family: 'Libre Baskerville', Georgia, serif;
    margin-bottom: var(--spacing-md);
}

.demo-description p {
    margin-bottom: var(--spacing-md);
    font-size: 1.125rem;
}

.feature-list {
    list-style: none;
    margin-top: var(--spacing-md);
}

.feature-list li {
    padding: var(--spacing-xs) 0;
    padding-left: var(--spacing-lg);
    position: relative;
    color: var(--color-text-light);
}

.feature-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: bold;
}

/* Product Showcase */
.product-showcase {
    background: var(--color-bg-light);
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.showcase-card {
    background: var(--color-bg);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease-in-out;
}

.showcase-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.showcase-card-icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--spacing-md);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.showcase-card h3 {
    font-family: 'Libre Baskerville', Georgia, serif;
    margin-bottom: var(--spacing-sm);
}

/* Use Cases Section with Switcher */
.use-cases-section {
    background: var(--color-bg);
}

.use-case-switcher {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: var(--spacing-md);
}

.use-case-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-muted-foreground);
    margin-bottom: -2px;
    padding-bottom: var(--spacing-md);
    position: relative;
}

.use-case-btn:hover {
    color: var(--color-text);
    background: var(--color-accent);
}

.use-case-btn.active {
    color: var(--color-text);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}

.use-case-content-wrapper {
    position: relative;
    min-height: 500px;
}

.use-case-content {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
    animation: fadeIn 0.3s ease-in;
}

.use-case-content.active {
    display: grid;
}

.use-case-visual {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.use-case-details h3 {
    font-family: 'Libre Baskerville', Georgia, serif;
    margin-bottom: var(--spacing-md);
}

.use-case-details p {
    margin-bottom: var(--spacing-md);
    font-size: 1.125rem;
}

.use-case-features {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
}

.feature-item {
    color: var(--color-text-light);
}

.feature-item strong {
    color: var(--color-text);
}

/* Use Cases Grid (fallback) */
.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.use-case-card {
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    background: var(--color-bg);
    transition: all 0.15s ease-in-out;
    box-shadow: var(--shadow-sm);
}

.use-case-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow);
}

/* Social Proof */
.social-proof {
    background: var(--color-bg-light);
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.metric-card {
    text-align: center;
}

.metric-value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

.metric-label {
    color: var(--color-text-light);
    font-size: 1rem;
}

/* Integration Ecosystem */
.integrations-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    justify-content: center;
    align-items: center;
    margin-top: var(--spacing-xl);
}

.integration-logo {
    width: 120px;
    height: 60px;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm);
    transition: all 0.2s;
}

.integration-logo:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.integration-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Integrations Page - Partner Stories Carousel */
.integrations-partner-stories {
    padding: var(--spacing-3xl) 0;
    background: var(--color-bg-light);
}

.partner-stories-heading {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
}

.partner-stories-subheading {
    text-align: center;
    color: var(--color-muted-foreground);
    margin-bottom: var(--spacing-2xl);
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

.partner-carousel {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    overflow: hidden;
}

.partner-carousel-track {
    display: flex;
    transition: transform 0.4s ease-out;
}

.partner-story-card {
    flex: 0 0 100%;
    min-width: 100%;
    padding: 0 var(--spacing-md);
}

.partner-story-content {
    background: var(--color-bg);
    padding: var(--spacing-2xl);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.partner-story-quote {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0 0 var(--spacing-lg);
    font-style: italic;
}


.partner-story-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.partner-story-org {
    font-size: 0.9375rem;
    color: var(--color-muted-foreground);
}

.partner-story-integration {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-primary);
}

.partner-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.partner-carousel-btn {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1.125rem;
    color: var(--color-text);
    transition: all 0.15s ease;
}

.partner-carousel-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-bg-light);
}

.partner-carousel-dots {
    display: flex;
    gap: var(--spacing-sm);
}

.partner-carousel-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    border: none;
    background: var(--color-border);
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
}

.partner-carousel-dot:hover {
    background: var(--color-muted-foreground);
}

.partner-carousel-dot.active {
    background: var(--color-primary);
    transform: scale(1.25);
}

/* Integrations Page - Categorized List */
.integrations-list {
    padding: var(--spacing-3xl) 0;
}

.integrations-list-heading {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
}

.integrations-list-subheading {
    color: var(--color-muted-foreground);
    margin-bottom: var(--spacing-2xl);
}

.integration-category {
    margin-bottom: var(--spacing-2xl);
}

.integration-category-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-muted-foreground);
    margin-bottom: var(--spacing-lg);
    text-transform: uppercase;
}

.integration-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.integration-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    transition: all 0.2s ease;
}

.integration-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow);
}

.integration-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.integration-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
    font-size: 1.125rem;
    font-weight: 600;
}

.integration-card-icon-forge { background: #f97316; color: #fff; }
.integration-card-icon-mcp { background: #6366f1; color: #fff; }
.integration-card-icon-openai { background: #10a37f; color: #fff; }
.integration-card-icon-anthropic { background: #d97706; color: #fff; }
.integration-card-icon-gemini { background: #4285f4; color: #fff; }
.integration-card-icon-mistral { background: #7c3aed; color: #fff; }
.integration-card-icon-mural { background: #ff6b35; color: #fff; }
.integration-card-icon-miro { background: #050038; color: #fff; }
.integration-card-icon-figma { background: #a259ff; color: #fff; }
.integration-card-icon-zoom { background: #2d8cff; color: #fff; }
.integration-card-icon-slack { background: #4a154b; color: #fff; }

.integration-card-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
}

.integration-card-badge-connected {
    background: #dcfce7;
    color: #166534;
}

.integration-card-badge-soon {
    background: var(--color-bg-light);
    color: var(--color-muted-foreground);
}

.integration-card-name {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text);
}

.integration-card-desc {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-muted-foreground);
    margin-bottom: var(--spacing-md);
}

.integration-card-btn {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: all 0.15s ease;
}

.integration-card-btn-primary {
    background: #000;
    color: #fff;
}

.integration-card-btn-primary:hover {
    background: #1a1a1a;
}

.integration-card-btn-secondary {
    background: transparent;
    color: var(--color-muted-foreground);
    border: 1px solid var(--color-border);
}

.integration-card-btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Homepage – Featured Blog Posts Section */
.home-posts-section {
    padding: 5rem 0 6rem;
    background: var(--color-bg);
}

.home-posts-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-md);
    max-width: 1100px;
    margin: 0 auto 2.5rem;
}

.home-posts-kicker {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: hsl(221.2 83.2% 53.3% / 0.1);
    padding: 0.3rem 0.875rem;
    border-radius: var(--border-radius-sm);
    margin-bottom: 0.75rem;
}

.home-posts-heading {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.home-posts-view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.home-posts-view-all:hover {
    opacity: 0.8;
}

.home-posts-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.home-post-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 1.75rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-post-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.home-post-card:hover .home-post-card-title {
    color: var(--color-primary);
}

.home-post-card-body {
    flex: 1;
}

.home-post-card-date {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
    margin-bottom: 0.75rem;
}

.home-post-card-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text);
    margin-bottom: 0.625rem;
    transition: color 0.15s ease;
}

.home-post-card-summary {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-muted-foreground);
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-post-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1.25rem;
}

.home-post-card-tag {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.2em 0.55em;
    background: var(--color-muted);
    color: var(--color-muted-foreground);
    border-radius: 4px;
}

.home-post-card-read {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
    margin-top: auto;
}

@media (max-width: 640px) {
    .home-posts-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-posts-row {
        grid-template-columns: 1fr;
    }
}

/* Homepage – Productised Services Section */
.home-ps-section {
    padding: 5rem 0 6rem;
    background: var(--color-bg-light);
}

.home-ps-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3.5rem;
}

.home-ps-kicker {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: hsl(221.2 83.2% 53.3% / 0.1);
    padding: 0.3rem 0.875rem;
    border-radius: var(--border-radius-sm);
    margin-bottom: 1.25rem;
}

.home-ps-heading {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.home-ps-subheading {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--color-muted-foreground);
    margin: 0;
}

.home-ps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    max-width: 1100px;
    margin: 0 auto;
}

.home-ps-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 2rem 1.75rem 2.25rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-ps-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

/* Scroll-reveal state — JS adds .ps-card-hidden, removes it when in view */
.home-ps-card.ps-card-hidden {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.home-ps-card.ps-card-hidden.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.home-ps-card-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    margin-bottom: 1.25rem;
}

.home-ps-card-icon--playbooks {
    background: hsl(221.2 83.2% 53.3% / 0.1);
    color: var(--color-primary);
}

.home-ps-card-icon--methods {
    background: hsl(142 76% 36% / 0.1);
    color: hsl(142 76% 36%);
}

.home-ps-card-icon--tech {
    background: hsl(24 95% 53% / 0.1);
    color: hsl(24 95% 53%);
}

.home-ps-card-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.home-ps-card-desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-muted-foreground);
    margin-bottom: 1.25rem;
}

.home-ps-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.home-ps-card-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text);
}

.home-ps-card-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.home-ps-card-list--tech li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Methodology scrolling ticker */
.home-ps-method-scroll-wrap {
    position: relative;
}

.home-ps-method-scroll {
    height: 168px;
    overflow: hidden;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 22%,
        black 78%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 22%,
        black 78%,
        transparent 100%
    );
}

.home-ps-method-ticker-track {
    display: flex;
    flex-direction: column;
    animation: methodScrollUp 28s linear infinite;
}

.home-ps-method-scroll:hover .home-ps-method-ticker-track {
    animation-play-state: paused;
}

@keyframes methodScrollUp {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

.home-ps-method-item {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: hsl(142 50% 28%);
    background: hsl(142 76% 36% / 0.08);
    border: 1px solid hsl(142 76% 36% / 0.15);
    border-radius: var(--border-radius-sm);
    padding: 0.3rem 0.75rem;
    margin-bottom: 0.375rem;
    white-space: nowrap;
    width: fit-content;
    letter-spacing: 0.01em;
}

.home-ps-forge-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: hsl(24 95% 53% / 0.06);
    border: 1px solid hsl(24 95% 53% / 0.15);
    border-radius: var(--border-radius);
}

.home-ps-forge-badge-label {
    font-size: 0.75rem;
    color: var(--color-muted-foreground);
}

.home-ps-forge-badge-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: hsl(24 95% 40%);
    letter-spacing: 0.01em;
}

.home-ps-cta {
    text-align: center;
    margin-top: 3rem;
}

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

    .home-ps-section {
        padding: 3.5rem 0 4rem;
    }
}

/* Footer */
.site-footer {
    background: #000000;
    color: white;
    padding: var(--spacing-2xl) 0 var(--spacing-lg);
    margin-top: var(--spacing-2xl);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.footer-logo {
    height: 2rem;
    width: auto;
    margin-bottom: var(--spacing-md);
    display: block;
}

.footer-section h4 {
    font-family: 'Libre Baskerville', Georgia, serif;
    color: white;
    margin-bottom: var(--spacing-md);
}

.footer-section p {
    color: rgba(255, 255, 255, 0.7);
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: var(--spacing-xs);
}

.footer-section a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-section a:hover {
    color: white;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.footer-ask-ai {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.footer-ask-ai-label {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
}

.footer-ask-ai-icons {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.footer-ask-ai-link {
    display: flex;
    align-items: center;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.footer-ask-ai-link:hover {
    opacity: 1;
}

.footer-ask-ai-link img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

@media (max-width: 640px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-ask-ai {
        flex-direction: column;
    }
}

/* Placeholder Styles - shadcn/ui style */
.placeholder-image {
    width: 100%;
    height: 300px;
    background: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted-foreground);
    font-style: italic;
    font-size: 0.875rem;
}

.placeholder-logo {
    width: 100%;
    height: 100%;
    background: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted-foreground);
    font-size: 0.75rem;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }
    
    .navbar-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-bg);
        flex-direction: column;
        padding: var(--spacing-md);
        box-shadow: var(--shadow-lg);
    }
    
    .navbar-menu.active {
        display: flex;
    }
    
    .hero-cta {
        flex-direction: column;
    }
    
    .hero-cta .btn {
        width: 100%;
    }
    
    .demo-content,
    .use-case-content {
        grid-template-columns: 1fr !important;
    }
    
    .demo-visual,
    .use-case-visual {
        order: -1;
    }
    
    .showcase-grid,
    .use-cases-grid {
        grid-template-columns: 1fr;
    }
    
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .use-case-switcher {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: var(--spacing-sm);
    }
    
    .use-case-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

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

/* ============================================================
   PRICING PAGE
   ============================================================ */


/* Pricing Page */
.pricing-hero {
    padding: 5rem 0 3rem;
    text-align: center;
}

.pricing-hero-inner {
    max-width: 640px;
    margin: 0 auto;
}

.pricing-kicker {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: hsl(221.2 83.2% 53.3% / 0.1);
    padding: 0.3rem 0.875rem;
    border-radius: var(--border-radius-sm);
    margin-bottom: 1.25rem;
}

.pricing-headline {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.pricing-subheadline {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--color-muted-foreground);
    margin: 0;
}

.pricing-forge-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.pricing-forge-link:hover {
    text-decoration: underline;
}

/* Billing Toggle */
.pricing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.pricing-toggle-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-muted-foreground);
    cursor: pointer;
    transition: color 0.2s ease;
    user-select: none;
}

.pricing-toggle-label-active {
    color: var(--color-text);
    font-weight: 600;
}

.pricing-toggle-switch {
    position: relative;
    width: 3rem;
    height: 1.625rem;
    background: var(--color-border);
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.pricing-toggle-switch[data-state="annual"] {
    background: var(--color-primary);
}

.pricing-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 1.25rem;
    height: 1.25rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}

.pricing-toggle-switch[data-state="annual"] .pricing-toggle-knob {
    transform: translateX(1.375rem);
}

.pricing-toggle-save {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: hsl(142 76% 30%);
    background: hsl(142 76% 36% / 0.1);
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
}

.pricing-section {
    padding: 3rem 0;
}

.pricing-section-alt {
    background: var(--color-bg-light);
}

.pricing-section-header {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 2.5rem;
}

.pricing-section-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.pricing-section-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-muted-foreground);
    margin: 0;
}

.pricing-grid {
    display: grid;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.pricing-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.pricing-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
}

.pricing-card {
    position: relative;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 2rem 1.75rem 2.25rem;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pricing-card:hover {
    border-color: hsl(221.2 83.2% 53.3% / 0.35);
    box-shadow: var(--shadow-md);
}

.pricing-card-featured {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.pricing-card-featured:hover {
    box-shadow: var(--shadow-lg);
}

.pricing-card-enterprise {
    background: var(--color-bg-dark);
    border-color: transparent;
    color: #fff;
}

.pricing-card-enterprise:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-lg);
}

.pricing-card-enterprise .pricing-card-name {
    color: #fff;
}

.pricing-card-enterprise .pricing-card-desc {
    color: rgba(255, 255, 255, 0.7);
}

.pricing-card-enterprise .pricing-amount {
    color: #fff;
}

.pricing-card-enterprise .pricing-feature-list li {
    color: rgba(255, 255, 255, 0.8);
}

.pricing-card-enterprise .pricing-feature-list li::before {
    background: hsl(221.2 83.2% 65%);
}

.pricing-card-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-primary);
    padding: 0.3rem 0.875rem;
    border-radius: 9999px;
    white-space: nowrap;
}

.pricing-card-header {
    margin-bottom: 1.5rem;
}

.pricing-card-name {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.375rem;
}

.pricing-card-desc {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-muted-foreground);
    margin: 0;
}

.pricing-card-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.pricing-starting-from {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-muted-foreground);
    margin-bottom: 0.25rem;
}

.pricing-amount {
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--color-text);
    line-height: 1;
}

.pricing-amount-custom {
    font-size: 2rem;
}

.pricing-period {
    font-size: 1rem;
    color: var(--color-muted-foreground);
    font-weight: 400;
}

.pricing-card-cta {
    display: block;
    text-align: center;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: all 0.15s ease;
    margin-bottom: 1.75rem;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    font-family: var(--font-primary);
}

.pricing-card-cta:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-bg-light);
}

.pricing-card-cta-featured {
    background: #000;
    color: #fff;
    border-color: #000;
}

.pricing-card-cta-featured:hover {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

.pricing-card-cta-enterprise {
    background: #fff;
    color: var(--color-bg-dark);
    border-color: #fff;
}

.pricing-card-cta-enterprise:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-bg-dark);
    border-color: rgba(255, 255, 255, 0.9);
}

.pricing-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.pricing-feature-list li {
    position: relative;
    padding-left: 1.375rem;
    margin-bottom: 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text);
}

.pricing-feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}

/* Forge Dependency Note */
.pricing-forge-note {
    padding: 3rem 0;
}

.pricing-forge-note-inner {
    display: flex;
    gap: 1.25rem;
    max-width: 720px;
    margin: 0 auto;
    padding: 1.75rem 2rem;
    background: hsl(221.2 83.2% 53.3% / 0.04);
    border: 1px solid hsl(221.2 83.2% 53.3% / 0.15);
    border-radius: var(--border-radius-lg);
}

.pricing-forge-note-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.pricing-forge-note-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.375rem;
}

.pricing-forge-note-desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-muted-foreground);
    margin: 0;
}

.pricing-forge-note-desc a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.pricing-forge-note-desc a:hover {
    text-decoration: underline;
}

/* Pricing FAQ */
.pricing-faq {
    padding: 3rem 0 5rem;
}

.pricing-faq-heading {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    text-align: center;
    color: var(--color-text);
    margin-bottom: 2.5rem;
}

.pricing-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.pricing-faq-item h3 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.pricing-faq-item p {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-muted-foreground);
    margin: 0;
}

@media (max-width: 900px) {
    .pricing-grid-3 {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .pricing-grid-2 {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .pricing-faq-grid {
        grid-template-columns: 1fr;
    }

    .pricing-forge-note-inner {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ============================================
   Documentation / Help Centre
   ============================================ */

/* Docs index — content wrapper (within split layout) */
.docs-index-content {
    max-width: 860px;
}

/* Docs index — header */
.docs-index-header {
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
}

.docs-index-header h1 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.docs-index-desc {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-muted-foreground);
}

/* Docs index — section grouping */
.docs-index-section {
    margin-bottom: var(--spacing-3xl);
}

/* Docs index — section title */
.docs-index-section-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
}

/* Docs index — category cards */
.docs-index-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.docs-category-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.375rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    background: var(--color-bg-light);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.docs-category-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

a.docs-category-card:hover .docs-category-card-title {
    color: var(--color-primary);
}

.docs-category-card-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    transition: color 0.15s ease;
}

.docs-category-card-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-muted-foreground);
    margin: 0;
    flex: 1;
}

.docs-category-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-primary);
    margin-top: 0.25rem;
}

.docs-page-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.docs-page-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: var(--color-bg);
}

.docs-page-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.docs-page-card:hover .docs-page-card-title {
    color: var(--color-primary);
}

.docs-page-card-category {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-primary);
}

.docs-page-card-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text);
    transition: color 0.15s ease;
    margin: 0;
}

.docs-page-card-summary {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-muted-foreground);
    margin: 0;
    flex: 1;
}

.docs-page-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
    margin-top: 0.25rem;
}

/* ============================================
   Docs detail page layout (two-column)
   ============================================ */

body.docs-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.docs-page > footer,
body.docs-page > .footer-section {
    margin-top: auto;
}

.docs-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 868px) 240px minmax(0, 1fr);
    flex: 1;
    min-height: calc(100vh - 64px);
    align-items: start;
}

/* Docs sidebar */
.docs-sidebar {
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
    overflow-y: auto;
    border-right: 1px solid var(--color-border);
    background: var(--color-bg-light);
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.docs-sidebar::-webkit-scrollbar {
    width: 4px;
}

.docs-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.docs-sidebar::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 9999px;
}

.docs-sidebar-inner {
    padding: 1.5rem 1rem;
}

/* Docs sidebar nav */
.docs-sidebar-nav {
    display: flex;
    flex-direction: column;
}

.docs-sidebar-home-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-muted-foreground);
    text-decoration: none;
    padding: 0.375rem 0.5rem;
    border-radius: var(--border-radius-sm);
    margin-bottom: 1rem;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.docs-sidebar-home-link:hover {
    color: var(--color-text);
    background: var(--color-border);
}

.docs-nav-items {
    display: flex;
    flex-direction: column;
}

.docs-nav-category {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
    margin: 0;
}

.docs-nav-group {
    border: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
}

.docs-nav-group:first-child {
    border-top: 0;
}

.docs-nav-group > summary.docs-nav-category {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    border-radius: var(--border-radius-sm);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.docs-nav-group > summary.docs-nav-category::-webkit-details-marker {
    display: none;
}

.docs-nav-group > summary.docs-nav-category::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.18s ease;
    opacity: 0.55;
    flex-shrink: 0;
    margin-right: 0.125rem;
}

.docs-nav-group[open] > summary.docs-nav-category::after {
    transform: rotate(45deg);
}

.docs-nav-group > summary.docs-nav-category:hover,
.docs-nav-group > summary.docs-nav-category:focus-visible {
    color: var(--color-text);
    background: var(--color-muted, hsl(210 40% 96.1%));
    outline: none;
}

.docs-nav-group[open] > summary.docs-nav-category {
    color: var(--color-text);
}

.docs-nav-group-active > summary.docs-nav-category {
    color: var(--color-primary);
}

.docs-nav-group-items {
    display: flex;
    flex-direction: column;
    padding: 0.125rem 0 0.625rem 0;
}

.docs-nav-link {
    display: block;
    padding: 0.4375rem 0.625rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-text-light);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.docs-nav-link:hover {
    color: var(--color-text);
    background: var(--color-muted, hsl(210 40% 96.1%));
}

.docs-nav-link-active,
.docs-nav-link[aria-current="page"],
.docs-nav-link.current-parent {
    color: var(--color-primary);
    background: hsl(221.2 83.2% 53.3% / 0.10);
    font-weight: 600;
}

.docs-nav-link-active:hover,
.docs-nav-link[aria-current="page"]:hover,
.docs-nav-link.current-parent:hover {
    color: var(--color-primary);
    background: hsl(221.2 83.2% 53.3% / 0.14);
}

/* Docs right rail (on this page + feedback) */
.docs-toc-rail {
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
    overflow-y: auto;
    padding: 1.5rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.docs-toc-rail::-webkit-scrollbar {
    width: 4px;
}

.docs-toc-rail::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 9999px;
}

.docs-toc-rail-inner {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.doc-toc-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
    margin: 0 0 0.625rem;
    padding: 0 0.625rem;
}

.doc-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    border-left: 1px solid var(--color-border);
}

.doc-toc-item {
    margin: 0;
    padding: 0;
}

.doc-toc-link {
    display: block;
    padding: 0.375rem 0.75rem;
    margin-left: -1px;
    border-left: 1px solid transparent;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-muted-foreground);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.doc-toc-link:hover {
    color: var(--color-text);
}

.doc-toc-link.is-active {
    color: var(--color-primary);
    font-weight: 600;
    border-left-color: var(--color-primary);
}

.doc-toc-item.is-sub .doc-toc-link {
    padding-left: 1.5rem;
    font-size: 0.8125rem;
}

/* Feedback widget */
.doc-feedback {
    border-top: 1px solid var(--color-border);
    padding: 1.25rem 0.625rem 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.doc-feedback-prompt {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text);
}

.doc-feedback-buttons {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    background: var(--color-bg);
    width: fit-content;
}

.doc-feedback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-muted-foreground);
    border-radius: 9999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.doc-feedback-btn:hover {
    color: var(--color-text);
    background: var(--color-muted, hsl(210 40% 96.1%));
    transform: scale(1.06);
}

.doc-feedback-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.doc-feedback-btn.is-selected[data-rating="positive"] {
    color: hsl(142 71% 35%);
    background: hsl(142 71% 35% / 0.10);
}

.doc-feedback-btn.is-selected[data-rating="neutral"] {
    color: hsl(38 92% 45%);
    background: hsl(38 92% 45% / 0.10);
}

.doc-feedback-btn.is-selected[data-rating="negative"] {
    color: hsl(0 72% 50%);
    background: hsl(0 72% 50% / 0.10);
}

.doc-feedback.is-submitted .doc-feedback-buttons {
    opacity: 0.55;
    pointer-events: none;
}

.doc-feedback-thanks {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-muted-foreground);
}

/* Docs main content area */
.docs-main {
    min-width: 0;
    padding: 3rem 4rem;
}

.docs-content-wrap {
    max-width: 740px;
}

/* Doc article */
.doc-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--color-muted-foreground);
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.doc-breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
}

.doc-breadcrumb a:hover {
    opacity: 0.85;
}

.doc-breadcrumb-sep {
    color: var(--color-border);
    font-size: 0.9375rem;
    margin: 0 0.125rem;
}

.doc-breadcrumb-category {
    color: var(--color-muted-foreground);
}

.doc-breadcrumb [aria-current="page"] {
    color: var(--color-text);
    font-weight: 500;
}

/* Doc header */
.doc-header {
    margin-bottom: var(--spacing-xl);
}

.doc-category-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.625rem;
}

.doc-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1.875rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
    position: relative;
    display: inline-block;
    z-index: 1;
}

.doc-title::after {
    content: '';
    position: absolute;
    left: -0.12em;
    right: -0.12em;
    bottom: 0.08em;
    height: 0.24em;
    background: #ff6b35;
    opacity: 0.12;
    z-index: -1;
    transform: rotate(-0.45deg);
    border-radius: 9999px;
}

.doc-summary {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-muted-foreground);
    margin: 0;
}

/* Doc body — prose styles */
.doc-body {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-2xl);
    border-top: 1px solid var(--color-border);
}

.doc-body p {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
}

.doc-body p:last-child {
    margin-bottom: 0;
}

.doc-body h2 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-md);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
}

.doc-body h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.doc-body h3 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--color-text);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-sm);
}

.doc-body h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-xs);
}

.doc-body ul,
.doc-body ol {
    margin: var(--spacing-lg) 0;
    padding-left: 1.625rem;
}

.doc-body ul {
    list-style-type: disc;
}

.doc-body ol {
    list-style-type: decimal;
}

.doc-body ul ul {
    list-style-type: circle;
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.doc-body li {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.doc-body li:last-child {
    margin-bottom: 0;
}

.doc-body ol li::marker {
    font-weight: 600;
    color: var(--color-primary);
}

.doc-body ul li::marker {
    color: var(--color-primary);
}

.doc-body li strong {
    font-weight: 600;
}

.doc-body a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: hsl(221.2 83.2% 53.3% / 0.35);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.15s ease;
}

.doc-body a:hover {
    text-decoration-color: var(--color-primary);
}

.doc-body strong {
    font-weight: 600;
    color: var(--color-text);
}

.doc-body em {
    font-style: italic;
}

.doc-body code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    padding: 0.125em 0.375em;
    background: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    color: var(--color-text);
}

.doc-body pre {
    background: var(--color-bg-dark);
    border-radius: var(--border-radius-lg);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    margin: var(--spacing-lg) 0;
}

.doc-body pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.9rem;
    color: hsl(210 40% 96.1%);
}

.doc-body blockquote {
    border-left: 3px solid var(--color-primary);
    padding-left: 1.25rem;
    margin: var(--spacing-xl) 0;
    color: var(--color-muted-foreground);
    font-style: italic;
}

.doc-body blockquote p {
    margin-bottom: 0;
    color: var(--color-muted-foreground);
}

/* Checklist style (- [ ] items) */
.doc-body ul li input[type="checkbox"] {
    margin-right: 0.5rem;
    accent-color: var(--color-primary);
}

/* Tables */
.doc-body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-xl) 0;
    font-size: 0.9375rem;
}

.doc-body th {
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
    padding: 0.625rem 1rem;
    border-bottom: 2px solid var(--color-border);
}

.doc-body td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    line-height: 1.6;
}

.doc-body tr:last-child td {
    border-bottom: none;
}

/* Doc footer */
.doc-footer {
    margin-top: var(--spacing-3xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
}

.doc-footer-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-muted-foreground);
    text-decoration: none;
    transition: color 0.15s ease;
}

.doc-footer-back:hover {
    color: var(--color-primary);
}

/* ============================================
   Docs — In-doc components (callouts, grids, related)
   ============================================ */

/* Two-up surface cards (e.g. Studio vs Active Playbooks) */
.doc-body .doc-surface-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: var(--spacing-xl) 0;
}

.doc-body .doc-surface-card {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.5rem;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.doc-body a.doc-surface-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 24px -8px hsl(221.2 83.2% 53.3% / 0.18);
    transform: translateY(-2px);
    text-decoration: none;
}

.doc-body .doc-surface-card-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.doc-body .doc-surface-card-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    padding: 0;
    border: 0;
}

.doc-body .doc-surface-card-desc {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--color-text-light);
    margin: 0;
}

.doc-body .doc-surface-card-meta {
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-muted-foreground);
}

/* Four-up primitive grid (no link) */
.doc-body .doc-primitive-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin: var(--spacing-xl) 0;
}

.doc-body .doc-primitive-card {
    padding: 1.125rem 1.25rem;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md, var(--border-radius-lg));
    border-left: 3px solid var(--color-primary);
}

.doc-body .doc-primitive-card-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.375rem 0;
}

.doc-body .doc-primitive-card-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-light);
    margin: 0;
}

/* Pathway / on-ramp cards (3-up) */
.doc-body .doc-pathway-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.875rem;
    margin: var(--spacing-xl) 0;
}

.doc-body .doc-pathway-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.125rem 1.25rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    text-decoration: none;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.doc-body .doc-pathway-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    text-decoration: none;
}

.doc-body .doc-pathway-card-tag {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-muted-foreground);
}

.doc-body .doc-pathway-card-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.doc-body .doc-pathway-card-desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-light);
    margin: 0;
}

/* Inline callout (key/info/tip) — distinct from blockquote */
.doc-body .doc-callout {
    margin: var(--spacing-xl) 0;
    padding: 1.125rem 1.25rem;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-muted-foreground);
    border-radius: var(--border-radius-md, var(--border-radius-lg));
    color: var(--color-text);
    font-style: normal;
}

.doc-body .doc-callout p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.625rem;
    color: var(--color-text);
}

.doc-body .doc-callout p:last-child {
    margin-bottom: 0;
}

.doc-body .doc-callout-key {
    border-left-color: var(--color-primary);
    background: hsl(221.2 83.2% 53.3% / 0.04);
}

.doc-body .doc-callout-tip {
    border-left-color: hsl(38 92% 50%);
    background: hsl(38 92% 50% / 0.05);
}

/* Mermaid diagram wrapper — sit it like a figure */
.doc-body .mermaid {
    display: block;
    margin: var(--spacing-xl) auto;
    padding: 1.25rem;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    text-align: center;
    overflow-x: auto;
}

/* Related pages footer block */
.doc-body .doc-related {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: var(--spacing-xl) 0 0 0;
}

.doc-body .doc-related-link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem 1rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md, var(--border-radius-lg));
    text-decoration: none;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.doc-body .doc-related-link:hover {
    border-color: var(--color-primary);
    background: hsl(221.2 83.2% 53.3% / 0.03);
    text-decoration: none;
}

.doc-body .doc-related-link-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
}

.doc-body .doc-related-link-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
}

/* Glossary — definition list pattern */
.doc-body .doc-glossary {
    display: flex;
    flex-direction: column;
    margin: var(--spacing-xl) 0;
    border-top: 1px solid var(--color-border);
}

.doc-body .doc-glossary-entry {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: 1.25rem;
    padding: 0.875rem 0.25rem;
    border-bottom: 1px solid var(--color-border);
    scroll-margin-top: 5rem;
}

.doc-body .doc-glossary-term {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.4;
}

.doc-body .doc-glossary-def {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text);
    margin: 0;
}

.doc-body .doc-glossary-def code {
    font-size: 0.8125rem;
}

/* Jump-to-letter index strip */
.doc-body .doc-glossary-index {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: var(--spacing-md) 0 var(--spacing-lg) 0;
    padding: 0.625rem 0.75rem;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md, var(--border-radius-lg));
    font-size: 0.8125rem;
}

.doc-body .doc-glossary-index a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    font-weight: 600;
    color: var(--color-primary);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.doc-body .doc-glossary-index a:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    text-decoration: none;
}

@media (max-width: 640px) {
    .doc-body .doc-glossary-entry {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

/* Opinionated step-by-step checklist (e.g. Day 1, onboarding paths) */
.doc-body .doc-checklist {
    list-style: none;
    counter-reset: doc-checklist-counter;
    padding-left: 0;
    margin: var(--spacing-xl) 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.doc-body .doc-checklist-item {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1rem 1.125rem;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    counter-increment: doc-checklist-counter;
    margin-bottom: 0;
    list-style: none;
}

.doc-body .doc-checklist-item::marker {
    content: none;
}

.doc-body .doc-checklist-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.doc-body .doc-checklist-body {
    min-width: 0;
}

.doc-body .doc-checklist-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.625rem;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.375rem 0;
    border: 0;
    padding: 0;
}

.doc-body .doc-checklist-time {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-family: var(--font-sans, system-ui), sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.doc-body .doc-checklist-desc {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-light);
    margin: 0 0 0.5rem 0;
}

.doc-body .doc-checklist-desc:last-child {
    margin-bottom: 0;
}

.doc-body .doc-checklist-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.875rem;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.doc-body .doc-checklist-links a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px dotted hsl(221.2 83.2% 53.3% / 0.5);
}

.doc-body .doc-checklist-links a:hover {
    border-bottom-style: solid;
}

/* Section header inside the checklist (foundations / path / together) */
.doc-body .doc-checklist-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.25rem;
    margin: 0;
    list-style: none;
}

.doc-body .doc-checklist-section::marker {
    content: none;
}

.doc-body .doc-checklist-section-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
    white-space: nowrap;
}

.doc-body .doc-checklist-section-rule {
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

@media (max-width: 640px) {
    .doc-body .doc-checklist-item {
        grid-template-columns: 1.875rem 1fr;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
    }
    .doc-body .doc-checklist-num {
        width: 1.875rem;
        height: 1.875rem;
        font-size: 0.875rem;
    }
}

/* Video embed placeholder (16:9 responsive) */
.doc-body .doc-video {
    position: relative;
    margin: var(--spacing-xl) 0;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-light);
    border: 1px dashed var(--color-border);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted-foreground);
    font-size: 0.875rem;
}

.doc-body .doc-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--border-radius-lg);
}

/* Responsive collapses */
@media (max-width: 720px) {
    .doc-body .doc-surface-grid,
    .doc-body .doc-primitive-grid,
    .doc-body .doc-pathway-grid,
    .doc-body .doc-related {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Docs — Responsive
   ============================================ */

@media (max-width: 1280px) {
    .docs-layout {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .docs-toc-rail {
        display: none;
    }
}

@media (max-width: 1100px) {
    .docs-main {
        padding: 2.5rem 2rem;
    }

    .docs-index-categories {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .docs-layout {
        grid-template-columns: 1fr;
    }

    .docs-sidebar {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .docs-sidebar-inner {
        padding: 1rem;
    }

    .docs-nav-items {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .docs-nav-category {
        width: 100%;
        padding: 0.75rem 0.5rem 0.25rem;
    }

    .docs-main {
        padding: 2rem 1.25rem;
    }

    .docs-index-categories {
        grid-template-columns: 1fr;
    }

    .docs-page-grid {
        grid-template-columns: 1fr;
    }
}