/* ─── Ribbon App ─── */
/* Default tenant palette: olive (Lierre), warm cream (Thé au lait), gold
   (Golden Chamomile), dark wood (Bois ancien), muted blue (Bleu fané).
   Workspace owners override --primary/--accent/--bg/--text via brand_config,
   injected in base.html's <style> block. The --ribbon-* tokens below are
   Ribbon's own brand identity (Cierra design, 2026-05) and are NOT
   tenant-overridable — they appear on auth, public, marketing, onboarding,
   and email surfaces where "Ribbon" is the brand being shown. */

:root {
    --primary: #7B774C;         /* Lierre — olive */
    --primary-dark: #5E5B38;
    --primary-light: #A09C75;
    --text: #493F2B;            /* Bois ancien */
    --text-dark: #2E281C;
    --text-muted: #8A8270;
    --accent: #D2BF81;          /* Golden Chamomile */
    --bg: #E1D8C8;              /* Thé au lait */
    --bg-warm: #F0E9DC;
    --bg-white: #FBF8F2;

    /* Ribbon brand identity — fixed, not tenant-overridable. */
    --ribbon-cream: #FFFEED;
    --ribbon-paper: #F1ECE5;
    --ribbon-blue: #97A3C7;
    --ribbon-blue-soft: #C8CFE0;
    --ribbon-terracotta: #6D240D;
    --ribbon-terracotta-deep: #7F4B3E;
    --ribbon-mauve: #A58E88;
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-script: 'Caveat', 'Brush Script MT', cursive;
    /* Derived from --accent so brand overrides cascade automatically.
       Used for kanban column headers, badges, and neutral panels. */
    --light-sage: color-mix(in srgb, var(--accent) 55%, var(--bg-white));
    --highlight: #A3AFB8;       /* Bleu fané — muted blue */
    --highlight-soft: #D8DEE3;
    --border: color-mix(in srgb, var(--accent) 45%, var(--bg));
    --danger: #B8533C;
    --danger-light: #F2DDD4;
    --warning: #C49A4D;
    --warning-light: #FFF3CD;
    --success: #6B8E5A;
    --success-light: #DDE7D6;
    --info: #A3AFB8;            /* same as highlight — Bleu fané */
    --info-light: #E2E6EA;
    --shadow: 0 2px 8px rgba(73, 63, 43, 0.08);
    --shadow-hover: 0 4px 16px rgba(73, 63, 43, 0.14);
    --radius: 8px;
    --radius-sm: 4px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── Ribbon brand utilities ───
   For auth, public, marketing, onboarding, and email surfaces. Used on
   cream/paper backgrounds; never on the in-app olive navbar. */

.ribbon-surface {
    background: var(--ribbon-cream);
    color: var(--ribbon-terracotta);
}
.ribbon-surface-paper { background: var(--ribbon-paper); color: var(--ribbon-terracotta); }
.ribbon-surface-blue  { background: var(--ribbon-blue); color: var(--ribbon-cream); }
.ribbon-surface-mauve { background: var(--ribbon-mauve); color: var(--ribbon-cream); }

.ribbon-wordmark {
    display: inline-block;
    height: 44px;
    width: auto;
}
.ribbon-wordmark-lg { height: 72px; }
.ribbon-wordmark-sm { height: 28px; }

.ribbon-brush {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    opacity: 0.92;
}

.ribbon-display {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.1;
    color: var(--ribbon-terracotta);
}
.ribbon-script {
    font-family: var(--font-script);
    font-weight: 500;
    color: var(--ribbon-terracotta);
}

/* Pill nav button — used on marketing/auth where Cierra's pill nav appears */
.ribbon-pill {
    display: inline-block;
    padding: 6px 18px;
    border: 1px solid var(--ribbon-terracotta);
    border-radius: 999px;
    background: transparent;
    color: var(--ribbon-terracotta);
    font-family: var(--font-display);
    font-size: 16px;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: background 0.18s, color 0.18s;
}
.ribbon-pill:hover { background: var(--ribbon-cream); color: var(--ribbon-terracotta); }
.ribbon-pill.is-active {
    background: var(--ribbon-cream);
    color: var(--ribbon-terracotta);
    text-decoration: none;
}

/* Olive-divider with center ring — section break treatment from Cierra design */
.ribbon-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 40px 0;
}
.ribbon-divider::before, .ribbon-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ribbon-terracotta);
    opacity: 0.5;
}
.ribbon-divider-dot {
    width: 10px;
    height: 10px;
    border: 1px solid var(--ribbon-terracotta);
    border-radius: 50%;
}

/* ─── Ribbon brand surface ───
   Applied as a body class on auth / onboarding / setup / invite surfaces so
   the page reads as "Ribbon" instead of the tenant olive palette. Scoped to
   the body class so in-app pages (dashboard, kanban, settings) are untouched
   and tenant brand_config keeps applying there. */

body.ribbon-brand-surface {
    background: var(--ribbon-cream);
    color: var(--ribbon-terracotta-deep);
}

body.ribbon-brand-surface a {
    color: var(--ribbon-terracotta);
}
body.ribbon-brand-surface a:hover {
    color: var(--ribbon-terracotta-deep);
}

body.ribbon-brand-surface a:focus-visible,
body.ribbon-brand-surface button:focus-visible,
body.ribbon-brand-surface input:focus-visible,
body.ribbon-brand-surface select:focus-visible,
body.ribbon-brand-surface textarea:focus-visible,
body.ribbon-brand-surface [tabindex]:focus-visible {
    outline-color: var(--ribbon-terracotta);
}

/* Primary action button — terracotta pill, matches marketing CTAs. */
body.ribbon-brand-surface .btn-primary,
body.ribbon-brand-surface .btn.btn-primary {
    background: var(--ribbon-terracotta);
    color: var(--ribbon-cream);
    border: 1px solid var(--ribbon-terracotta);
}
body.ribbon-brand-surface .btn-primary:hover,
body.ribbon-brand-surface .btn.btn-primary:hover {
    background: var(--ribbon-terracotta-deep);
    border-color: var(--ribbon-terracotta-deep);
    color: var(--ribbon-cream);
}

/* Outline button — terracotta stroke on cream. */
body.ribbon-brand-surface .btn-outline,
body.ribbon-brand-surface .btn.btn-outline {
    background: transparent;
    color: var(--ribbon-terracotta);
    border: 1px solid var(--ribbon-terracotta);
}
body.ribbon-brand-surface .btn-outline:hover,
body.ribbon-brand-surface .btn.btn-outline:hover {
    background: var(--ribbon-terracotta);
    color: var(--ribbon-cream);
}

/* Form inputs — cream chrome, terracotta focus ring. */
body.ribbon-brand-surface .form-group label {
    color: var(--ribbon-terracotta-deep);
}
body.ribbon-brand-surface input[type="text"],
body.ribbon-brand-surface input[type="email"],
body.ribbon-brand-surface input[type="password"],
body.ribbon-brand-surface input[type="tel"],
body.ribbon-brand-surface input[type="date"],
body.ribbon-brand-surface input[type="number"],
body.ribbon-brand-surface input[type="url"],
body.ribbon-brand-surface select,
body.ribbon-brand-surface textarea {
    border: 1px solid color-mix(in srgb, var(--ribbon-terracotta) 20%, #ddd);
    background: #fff;
    color: var(--ribbon-terracotta-deep);
}
body.ribbon-brand-surface input:focus,
body.ribbon-brand-surface select:focus,
body.ribbon-brand-surface textarea:focus {
    outline: none;
    border-color: var(--ribbon-terracotta);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ribbon-terracotta) 18%, transparent);
}
body.ribbon-brand-surface .form-group small {
    color: var(--ribbon-terracotta-deep);
    opacity: 0.8;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

body {
    font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text-dark);
    line-height: 1.6;
    font-size: 15px;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

/* ─── Navbar ─── */

.navbar {
    background: var(--primary);
    color: var(--bg);
    padding: 0 24px;
    display: flex;
    align-items: center;
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.nav-brand a {
    color: var(--bg-warm);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;
}

.nav-links {
    display: flex;
    gap: 4px;
    margin-left: 40px;
    flex: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: thin;
}
/* Keep the horizontal scrollbar slim but discoverable when links overflow. */
.nav-links::-webkit-scrollbar { height: 4px; }
.nav-links::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
}
.nav-links a { flex-shrink: 0; }

.nav-links a {
    color: var(--light-sage);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 14px;
    transition: background 0.2s;
}

.nav-links a:hover, .nav-links a.active {
    background: rgba(255,255,255,0.15);
    color: var(--bg-warm);
}

.nav-badge {
    background: var(--danger);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 4px;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-username {
    font-size: 13px;
    opacity: 0.8;
}

/* ─── Notification Bell ─── */
.notification-bell {
    position: relative;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px;
    user-select: none;
    /* Reset <button> defaults so it matches its previous <div> appearance */
    background: none;
    border: 0;
    color: inherit;
    font-family: inherit;
}
.notification-bell:focus-visible {
    outline: 2px solid var(--bg-warm);
    outline-offset: 2px;
    border-radius: 4px;
}
.notification-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: #b45309;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    padding: 0 4px;
    font-family: 'Quicksand', sans-serif;
}
.notification-dropdown {
    position: absolute;
    top: 48px;
    right: 16px;
    width: 340px;
    max-height: 400px;
    background: #fff;
    border: 1px solid #e0ddd5;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
    z-index: 1000;
    overflow: hidden;
}
.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e8e0d4;
    font-size: 14px;
}
.notification-list {
    max-height: 340px;
    overflow-y: auto;
}
.notification-item {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid #f0ebe3;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}
.notification-item:hover { background: #faf7f2; }
.notification-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 2px;
}
.notification-item-message {
    font-size: 12px;
    color: #888;
}
.notification-item-time {
    font-size: 11px;
    color: #aaa;
    margin-top: 4px;
}
.notification-empty {
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    color: #999;
}

/* ─── Container ─── */

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
}

/* ─── Buttons ─── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);
    color: var(--bg-warm);
}
.btn-primary:hover { background: var(--primary-dark); color: var(--bg-warm); }

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--border);
}
.btn-outline:hover { border-color: var(--primary); background: var(--highlight); }

/* Navbar sits on var(--primary), so outline buttons there need a light
   contrast color or their text disappears into the bar. */
.navbar .btn-outline {
    color: var(--bg-warm);
    border-color: color-mix(in srgb, var(--bg-warm) 50%, transparent);
}
.navbar .btn-outline:hover {
    background: color-mix(in srgb, var(--bg-warm) 18%, transparent);
    border-color: var(--bg-warm);
    color: var(--bg-warm);
}

.btn-danger {
    background: var(--danger);
    color: white;
}
.btn-danger:hover { background: #a33d3d; }

.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-xs { padding: 4px 10px; font-size: 12px; }
.btn-full { width: 100%; justify-content: center; }

/* ─── Page Headers ─── */

.page-header, .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-header h1, .dashboard-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
}

.subtitle {
    color: var(--text-muted);
    font-size: 14px;
    margin-top: 2px;
}

.breadcrumb {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.breadcrumb a {
    color: var(--primary);
    text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep {
    color: var(--text-muted);
    opacity: 0.6;
    margin: 0 2px;
}
.breadcrumb .current { color: var(--text-dark); font-weight: 600; }

.header-actions {
    display: flex;
    gap: 8px;
}

/* ─── Stats Bar ─── */

.stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow);
}

.stat-card-alert {
    border-color: var(--warning);
    background: var(--warning-light);
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary);
}

.stat-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 4px;
}

/* ─── Kanban Board ─── */

.kanban-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    overflow-x: auto;
}

.kanban-column {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 200px;
    transition: border-color 0.2s;
}

.kanban-column.drag-over {
    border-color: var(--primary);
    background: var(--highlight);
}

.kanban-column-header {
    padding: 12px 16px;
    background: var(--light-sage);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kanban-column-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
}

.kanban-column-count {
    font-size: 12px;
    font-weight: 600;
    background: var(--primary);
    color: var(--bg-warm);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.kanban-cards {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kanban-card {
    background: var(--bg-warm);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    cursor: grab;
    transition: all 0.2s;
}

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

.kanban-card.dragging {
    opacity: 0.5;
}

.kanban-card-link {
    color: var(--text-dark);
    font-size: 13px;
}

.kanban-card-link strong { font-size: 14px; }

/* ─── Sections ─── */

.section {
    margin-bottom: 32px;
}

.section h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 16px;
}

/* ─── Submissions ─── */

.submissions-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.submission-card {
    background: var(--bg-white);
    border: 1px solid var(--warning);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius);
    padding: 16px;
}

.submission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.submission-id {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-muted);
}

.submission-body { font-size: 14px; }
.submission-footer { margin-top: 8px; color: var(--text-muted); }

/* ─── Tables ─── */

.table-container { overflow-x: auto; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin: 12px 0;
    font-size: 14px;
}

.data-table th {
    background: var(--highlight);
    padding: 10px 14px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dark);
}

.data-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.data-table tbody tr { transition: background 0.15s; }
.data-table tbody tr:hover { background: var(--highlight); }
.data-table tfoot td {
    border-top: 2px solid var(--primary);
    background: var(--bg);
}
.clickable-row { cursor: pointer; }

/* ─── Badges ─── */

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-lg { font-size: 13px; padding: 5px 14px; }
.badge-sm { font-size: 10px; padding: 2px 8px; }
.badge-warning { background: var(--warning-light); color: var(--warning); }

/* Status badges */
.badge-inquiry { background: var(--info-light); color: var(--info); }
.badge-quote_sent { background: var(--warning-light); color: var(--warning); }
.badge-booked { background: var(--success-light); color: var(--success); }
.badge-in_progress { background: var(--highlight); color: var(--primary); }
.badge-review { background: #f0e6ff; color: #7b4dbf; }
.badge-complete { background: var(--success-light); color: var(--success); }
.badge-archived { background: #eee; color: #888; }
.badge-quoting { background: var(--warning-light); color: var(--warning); }
.badge-revision { background: #ffe8d6; color: #c47a4d; }
.badge-cancelled { background: var(--danger-light); color: var(--danger); }

/* Direction badges */
.badge-inbound { background: var(--info-light); color: var(--info); }
.badge-outbound { background: var(--highlight); color: var(--primary); }

/* Source badges */
.badge-custom_inquiry { background: var(--highlight); color: var(--primary); }
.badge-printing_quote { background: var(--warning-light); color: var(--warning); }
.badge-contact { background: var(--info-light); color: var(--info); }

/* Type badges */
.badge-type { background: var(--light-sage); color: var(--text); }
.badge-status { }

/* Invoice statuses */
.badge-draft { background: #eee; color: #888; }
.badge-sent { background: var(--info-light); color: var(--info); }
.badge-paid { background: var(--success-light); color: var(--success); }
.badge-overdue { background: var(--danger-light); color: var(--danger); }

/* Quote statuses */
.badge-draft { background: #eee; color: #888; }
.badge-awaiting_response { background: var(--info-light); color: var(--info); }
.badge-reminder { background: #fff3e0; color: #e65100; }
.badge-pending { background: var(--warning-light); color: var(--warning); }
.badge-accepted { background: var(--success-light); color: var(--success); }
.badge-declined { background: var(--danger-light); color: var(--danger); }
.badge-expired { background: #eee; color: #888; }

/* ─── Forms ─── */

.form-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    max-width: 720px;
    box-shadow: var(--shadow);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--text-dark);
    background: var(--bg-warm);
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(97, 101, 54, 0.1);
}

/* Standalone form field, used outside .form-group (compose, proof upload) */
.form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--text-dark);
    background: var(--bg-warm);
    transition: border-color 0.2s;
}
.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(97, 101, 54, 0.1);
}

.form-group small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

/* ─── Filter Bar ─── */

.filters-bar {
    margin-bottom: 20px;
}

.filter-form {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-input, .filter-select {
    padding: 8px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    background: var(--bg-white);
}

.filter-input { min-width: 250px; }

/* ─── Info Card ─── */

.info-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.info-item label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.info-item span {
    display: block;
    font-size: 14px;
    color: var(--text-dark);
    margin-top: 2px;
}

.info-notes {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.info-notes label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
}

.info-notes p {
    margin-top: 4px;
    white-space: pre-wrap;
}

/* ─── Status Bar ─── */

.status-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.status-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
}

.status-select {
    padding: 6px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
}

.status-note {
    padding: 6px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    flex: 1;
    max-width: 300px;
}

textarea.status-note {
    resize: vertical;
    line-height: 1.4;
    min-height: 36px;
}

/* ─── Tabs ─── */

.tabs {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 20px;
}

.tab-btn {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn:hover { color: var(--text-dark); }
.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-content { display: none; }
.tab-content.active { display: block; }

.tab-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.empty-tab {
    text-align: center;
    color: var(--text-muted);
    padding: 40px;
    font-style: italic;
}

/* ─── Card Lists ─── */

.card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.list-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    transition: box-shadow 0.2s;
}

.list-card:hover { box-shadow: var(--shadow-hover); }

.list-card-compact { padding: 10px 14px; }

.list-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.list-card-body {
    margin-top: 6px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-muted);
}

.list-card-actions {
    margin-top: 8px;
}

.comm-preview {
    margin-top: 4px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
}

/* ─── Flash Messages ─── */

.flash-messages {
    margin-bottom: 20px;
}

.flash {
    padding: 12px 18px;
    border-radius: var(--radius);
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    transition: opacity 0.3s;
}

.flash-success { background: var(--success-light); color: var(--success); border: 1px solid var(--success); }
.flash-error { background: var(--danger-light); color: var(--danger); border: 1px solid var(--danger); }
/* Flask's conventional error category is 'danger' — alias it to the same styling as flash-error */
.flash-danger { background: var(--danger-light); color: var(--danger); border: 1px solid var(--danger); }
.flash-info { background: var(--info-light); color: var(--info); border: 1px solid var(--info); }
.flash-warning { background: var(--warning-light); color: var(--warning); border: 1px solid var(--warning); }

.flash-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    opacity: 0.6;
    color: inherit;
}

/* ─── Billing banner ─── */

.billing-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.billing-banner-info { background: var(--info-light); color: var(--info); }
.billing-banner-warning { background: var(--warning-light); color: var(--warning); }

.billing-banner-cta {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

.onboarding-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    background: var(--ribbon-cream);
    color: var(--ribbon-terracotta);
    border-bottom: 1px solid color-mix(in srgb, var(--ribbon-terracotta) 18%, transparent);
}
.onboarding-banner-cta {
    color: var(--ribbon-terracotta);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}
.onboarding-banner-cta:hover { color: var(--ribbon-terracotta-deep); }

.billing-banner-cta:hover {
    opacity: 0.85;
}

/* ─── Auth Pages ─── */

.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

.auth-card {
    background: var(--ribbon-cream);
    border: 1px solid color-mix(in srgb, var(--ribbon-terracotta) 22%, var(--ribbon-cream));
    border-radius: var(--radius);
    padding: 44px 40px 36px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 2px 18px rgba(109, 36, 13, 0.06);
}

.auth-wordmark {
    display: block;
    height: 56px;
    margin: 0 auto 6px;
}

.auth-title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 500;
    color: var(--ribbon-terracotta);
    text-align: center;
    margin-bottom: 4px;
}

.auth-subtitle {
    text-align: center;
    color: var(--ribbon-terracotta-deep);
    font-size: 14px;
    margin-bottom: 28px;
    opacity: 0.85;
}

/* ─── Empty State ─── */

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state p { margin-bottom: 16px; font-size: 16px; }

/* ─── Utilities ─── */

.text-muted { color: var(--text-muted); }
.text-warning { color: var(--warning); }

/* .data-table lives in the Tables section above (consolidated). */

.custom-size-row { background: var(--warning-light); }
.custom-size-notice {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--warning-light);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.quote-grand-total {
    text-align: right;
    font-size: 18px;
    padding: 16px 14px 8px;
    color: var(--primary-dark);
}

/* ─── Filter Tabs ─── */

.filter-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
}

.filter-tab {
    padding: 10px 20px;
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
}

.filter-tab:hover { color: var(--primary); }
.filter-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
}

.inline-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

/* ─── List Card Links ─── */

.list-card-link {
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, transform 0.15s;
}

.list-card-link:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

/* ─── Amounts ─── */

.amount {
    font-weight: 600;
    color: var(--primary-dark);
}

.amount-lg {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-dark);
}

/* ─── Detail Rows ─── */

.detail-row {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid var(--highlight);
}

.detail-row label {
    width: 180px;
    flex-shrink: 0;
    font-weight: 600;
    color: var(--text-dark);
    font-size: 13px;
}

.detail-row span {
    flex: 1;
    color: var(--text);
}

/* ─── Action Card ─── */

.action-card { background: var(--bg); }
.action-card hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 20px 0;
}

.approve-form .form-group { margin-bottom: 14px; }

/* ─── Inline Form ─── */

.inline-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.inline-form label {
    font-weight: 600;
    font-size: 14px;
}

/* ─── Form Row ─── */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ─── Badge variants ─── */

.badge-source { font-size: 11px; }
.badge-custom_inquiry { background: var(--info-light); color: var(--info); }
.badge-printing_quote { background: var(--highlight); color: var(--primary); }
.badge-contact { background: var(--light-sage); color: var(--text-dark); }

.badge-pending { background: var(--warning-light); color: var(--warning); }
.badge-approved { background: var(--success-light); color: var(--success); }
.badge-dismissed { background: #eee; color: #888; }
.badge-draft { background: #eee; color: #888; }
.badge-awaiting_response { background: var(--info-light); color: var(--info); }
.badge-sent { background: var(--info-light); color: var(--info); }
.badge-paid { background: var(--success-light); color: var(--success); }
.badge-overdue { background: var(--danger-light); color: var(--danger); }
.badge-cancelled { background: #eee; color: #888; }
.badge-accepted { background: var(--success-light); color: var(--success); }
.badge-declined { background: var(--danger-light); color: var(--danger); }
.badge-expired { background: #eee; color: #888; }

.btn-success {
    background: var(--success);
    color: white;
    border: none;
}

.btn-success:hover { background: #3d7c3d; }

.btn-danger-outline {
    background: transparent;
    color: var(--danger);
    border-color: var(--danger);
}

.btn-danger-outline:hover {
    background: var(--danger-light);
}

.text-success { color: var(--success); }
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 15px;
}

/* ─── Dashboard Actions ─── */

.dashboard-actions { display: flex; gap: 8px; }

/* ─── My Tasks ─── */

.my-tasks-list { display: flex; flex-direction: column; gap: 8px; }

.task-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
}

.task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.task-header a { color: var(--text-dark); text-decoration: none; }
.task-header a:hover { color: var(--primary); }

.task-meta { display: flex; gap: 12px; align-items: center; font-size: 13px; }

.task-deadline { color: var(--warning); font-weight: 500; }

/* ─── Section Header ─── */

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-header h2 { margin-bottom: 0; }

/* ─── Collapsible Sections ─── */

.section-toggle {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.section-toggle:hover { color: var(--primary); }

.collapse-chevron {
    font-size: 13px;
    color: var(--text-muted);
    transition: transform 0.15s ease;
    display: inline-block;
}

.is-collapsed .collapse-chevron { color: var(--accent); }

/* ─── Kanban Board Variants ─── */

.kanban-board-sm { grid-template-columns: repeat(4, 1fr); }

/* Wide kanban boards (8 columns) with horizontal scroll */
.kanban-board-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

.kanban-board-wide {
    display: grid;
    grid-template-columns: repeat(8, minmax(160px, 1fr));
    gap: 10px;
    min-width: 1300px;
}

.kanban-board-wide .kanban-column-title {
    font-size: 11px;
}

/* Printing board group labels */
.printing-group-label {
    font-size: 14px;
    font-weight: 600;
    margin: 20px 0 8px;
    color: var(--text);
}
.printing-group-label:first-of-type {
    margin-top: 8px;
}
.printing-group-label .text-muted {
    font-weight: 400;
    font-size: 13px;
}

/* Drag-drop visual feedback */
.kanban-column-dragover {
    border-color: var(--primary) !important;
    background: var(--highlight);
}

.kanban-card-dragging {
    opacity: 0.4;
}

/* ─── Incoming Inquiries Section ─── */

.inquiry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.inquiry-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.inquiry-card.is-clickable:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}

/* Stretched link covers the whole card; inner actions stay above it. */
.inquiry-card-stretched-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--radius);
}

.inquiry-card > *:not(.inquiry-card-stretched-link) {
    position: relative;
    z-index: 2;
}

.inquiry-card-submission {
    border-left: 3px solid var(--primary);
}

.reminder-card {
    border-left: 3px solid #e65100;
    position: relative;
}

.dismiss-reminder-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
}

.dismiss-reminder-btn:hover {
    background: var(--bg);
    color: var(--text);
}

.inquiry-card-client {
    border-left: 3px solid var(--accent);
}

.inquiry-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inquiry-date {
    font-size: 12px;
    color: var(--text-muted);
}

.inquiry-card-body {
    flex: 1;
}

.inquiry-card-body a {
    color: var(--text-dark);
    text-decoration: none;
}

.inquiry-card-body a:hover {
    color: var(--primary);
}

.inquiry-amount {
    font-weight: 600;
    color: var(--primary);
    margin-top: 4px;
}

.inquiry-card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

/* ─── Billing Section ─── */

.billing-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.billing-column {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 120px;
}

.billing-cards {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.billing-card {
    background: var(--bg-warm);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

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

.billing-card-overdue {
    border-color: #dc3545;
    border-left: 3px solid #dc3545;
}

.billing-amount {
    font-weight: 600;
    color: var(--primary);
}

/* ─── Filter Tabs ─── */

.filters-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-tabs { display: flex; gap: 4px; }

.filter-tab {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 14px;
    text-decoration: none;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.filter-tab:hover { background: var(--highlight); }
.filter-tab.active { background: var(--primary); color: white; border-color: var(--primary); }

.filter-form { display: flex; gap: 8px; align-items: center; }

/* ─── Project Status Badges ─── */

/* Internal / legacy */
.badge-status-todo        { background: var(--light-sage); color: var(--text-dark); }
.badge-status-in_progress { background: #dbeafe; color: #1e40af; }
.badge-status-review      { background: #fef3c7; color: #92400e; }
.badge-status-complete    { background: #d1fae5; color: #065f46; }
.badge-status-inquiry     { background: var(--highlight); color: var(--text); }
.badge-status-quoting     { background: #ede9fe; color: #5b21b6; }
.badge-status-revision    { background: #fde2e2; color: #991b1b; }
.badge-status-cancelled   { background: #f3f4f6; color: #6b7280; }
.badge-status-backlog     { background: #f3f4f6; color: #6b7280; }
.badge-status-on_hold     { background: #e5e7eb; color: #374151; }

/* Custom Design — New Inquiries (rose) */
.badge-status-new_project { background: #fde8e8; color: #9b1c1c; }

/* Custom Design — Onboarding (amber) */
.badge-status-invoice_sent     { background: #fef3c7; color: #78350f; }
.badge-status-invoice_paid     { background: #fde68a; color: #78350f; }
.badge-status-consult_booked   { background: #fed7aa; color: #7c2d12; }
.badge-status-consult_complete { background: #fdba74; color: #7c2d12; }

/* Custom Design — In Design (blue → teal gradient family) */
.badge-status-working_on_initial_design { background: #dbeafe; color: #1e3a8a; }
.badge-status-initial_design_complete   { background: #bfdbfe; color: #1e3a8a; }
.badge-status-working_on_edits_1        { background: #a5f3fc; color: #164e63; }
.badge-status-edits_1_complete          { background: #67e8f9; color: #164e63; }
.badge-status-working_on_edits_2        { background: #99f6e4; color: #134e4a; }
.badge-status-edits_2_complete          { background: #6ee7b7; color: #065f46; }

/* Custom Design — Delivered (green) */
.badge-status-project_delivered { background: #d1fae5; color: #065f46; }

/* Printing Phases */
.badge-status-waiting_client_files { background: #fef3c7; color: #78350f; }
.badge-status-files_received       { background: #fde68a; color: #78350f; }
.badge-status-order_created        { background: #dbeafe; color: #1e3a8a; }
.badge-status-order_submitted      { background: #a5f3fc; color: #164e63; }
.badge-status-order_shipped        { background: #99f6e4; color: #134e4a; }
.badge-status-order_complete       { background: #d1fae5; color: #065f46; }

.badge-type { background: var(--light-sage); color: var(--text-dark); font-size: 11px; padding: 2px 8px; }
.badge-sm { font-size: 10px; padding: 1px 6px; }

/* ─── Priority Badges ─── */

.badge-priority-high { background: #fde2e2; color: #991b1b; font-size: 11px; padding: 2px 8px; }
.badge-priority-medium { background: #fef3c7; color: #92400e; font-size: 11px; padding: 2px 8px; }
.badge-priority-low { background: #d1fae5; color: #065f46; font-size: 11px; padding: 2px 8px; }
.badge-internal { background: var(--light-sage); color: var(--text); font-size: 11px; padding: 2px 8px; }

/* ─── Project Meta ─── */

.project-meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }

/* ─── Tags ─── */

.tag-list { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-badge {
    background: var(--highlight);
    color: var(--text);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    border: 1px solid var(--border);
}

/* Predefined tag badges */
.badge-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
    padding: 2px 7px;
    white-space: nowrap;
}
.badge-tag-on_hold          { background: #e0e0e0; color: #555; }
.badge-tag-waiting_feedback { background: #fff3cd; color: #856404; }
.badge-tag-stuck            { background: #fce4ec; color: #c62828; }
.badge-tag-rush             { background: #ffe0b2; color: #e65100; }

/* Inline tag editor on project detail */
.tag-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 0 4px;
}
.tag-checkboxes { display: flex; gap: 8px; flex-wrap: wrap; }
.tag-label { display: flex; align-items: center; cursor: pointer; }
.tag-label input[type="checkbox"] { display: none; }
.tag-label input[type="checkbox"]:not(:checked) + .badge-tag { opacity: 0.3; }
.tag-label input[type="checkbox"]:checked + .badge-tag { opacity: 1; }
.tag-label:hover .badge-tag { opacity: 0.75; }

/* ─── Checklist ─── */

.checklist-items { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }

.checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}

.checklist-item:hover { background: var(--bg); }

.checklist-done .checklist-text {
    text-decoration: line-through;
    color: var(--text-muted);
}

.checklist-toggle { display: inline; }

.checklist-checkbox {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    color: var(--primary);
}

.checklist-text { flex: 1; font-size: 14px; }

.checklist-source {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--light-sage);
    border-radius: var(--radius-sm);
    vertical-align: middle;
}

.checklist-delete { margin-left: auto; }

.btn-icon {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    padding: 0 4px;
    line-height: 1;
}
.btn-icon:hover { color: var(--danger); }

.checklist-add {
    display: flex;
    gap: 8px;
    align-items: center;
}

.checklist-input {
    flex: 1;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Quicksand', sans-serif;
}

.checklist-progress {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.progress-bar-container {
    width: 100%;
    height: 6px;
    background: var(--light-sage);
    border-radius: 3px;
    margin-bottom: 12px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* ─── Comment Thread ─── */

.comment-form { margin-bottom: 20px; }

.comment-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Quicksand', sans-serif;
    resize: vertical;
    margin-bottom: 8px;
}

.comment-thread { display: flex; flex-direction: column; gap: 12px; }

.comment-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.comment-author { color: var(--primary); font-size: 14px; }
.comment-time { color: var(--text-muted); font-size: 12px; }
.comment-body { font-size: 14px; line-height: 1.5; white-space: pre-wrap; }

/* ─── Empty State ─── */

.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}

.empty-state p { margin-bottom: 16px; font-size: 16px; }

/* ─── Consult Scheduler ─── */

.consult-scheduler {
    display: flex;
    gap: 24px;
    max-width: 1060px;
    align-items: flex-start;
}

.scheduler-sidebar {
    width: 300px;
    flex-shrink: 0;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    position: sticky;
    top: 76px;
}

.scheduler-main {
    flex: 1;
    min-width: 0;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* Mini calendar */
.mini-cal { margin-bottom: 20px; }

.mini-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
}

.mini-cal-header button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 16px;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
}

.mini-cal-header button:hover { background: var(--highlight); color: var(--text-dark); }

.mini-cal-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.mini-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.mini-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-dark);
    transition: background 0.15s, color 0.15s;
}

.mini-cal-day:hover { background: var(--highlight); }
.mini-cal-day.today { font-weight: 700; border: 2px solid var(--primary); }
.mini-cal-day.selected { background: var(--primary); color: #fff; font-weight: 700; }
.mini-cal-day.selected:hover { background: var(--primary-dark); }
.mini-cal-day.other-month { color: var(--border); }
.mini-cal-day.disabled { opacity: 0.35; pointer-events: none; }
.mini-cal-day.has-slots { position: relative; }
.mini-cal-day.has-slots::after {
    content: '';
    position: absolute;
    bottom: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary);
}
.mini-cal-day.selected.has-slots::after { background: #fff; }

/* Day header */
.day-header {
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.day-header .today-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    cursor: pointer;
    color: var(--text-muted);
}

.day-header .today-btn:hover { background: var(--highlight); color: var(--text-dark); }

/* All-day events banner */
.all-day-banner {
    padding: 8px 20px;
    background: var(--highlight);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.all-day-chip {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-dark);
    background: var(--bg-white);
    border: 1px solid var(--light-sage);
    padding: 2px 10px;
    border-radius: 12px;
}

/* Time grid */
.time-grid-wrapper {
    position: relative;
    max-height: 576px;
    overflow-y: auto;
}

.time-grid-row {
    display: flex;
    height: 48px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.time-grid-row:last-child { border-bottom: none; }

.time-grid-row.half-hour { border-bottom-style: dashed; border-bottom-color: #e8e6e0; }

.time-label {
    width: 72px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 12px 0 12px;
    text-align: right;
    user-select: none;
}

.time-cell {
    flex: 1;
    cursor: pointer;
    position: relative;
    transition: background 0.12s;
    border-left: 1px solid var(--border);
}

.time-cell:hover { background: var(--success-light); }
.time-cell.past { opacity: 0.35; pointer-events: none; cursor: default; }
.time-cell.past:hover { background: none; }
.time-cell.has-event { cursor: default; }
.time-cell.has-event:hover { background: none; }

.time-cell.selected-slot {
    background: var(--primary);
    cursor: default;
}

.time-cell.selected-slot:hover { background: var(--primary); }

.time-cell .slot-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    pointer-events: none;
    white-space: nowrap;
}

/* Event overlays */
.event-overlay {
    position: absolute;
    left: 73px;
    right: 1px;
    background: var(--highlight);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 4px 8px;
    font-size: 12px;
    color: var(--text-dark);
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
}

.event-overlay .event-title {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-overlay .event-time {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Loading */
.scheduler-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
    font-size: 14px;
}

/* Selected slots list */
.selected-slots-section { margin-bottom: 20px; }

.selected-slots-section h3 {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.selected-slots-empty {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
}

.selected-slot-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--highlight);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    font-size: 13px;
}

.selected-slot-item .slot-info { flex: 1; }
.selected-slot-item .slot-date { font-weight: 700; color: var(--text-dark); }
.selected-slot-item .slot-time { color: var(--text-muted); font-size: 12px; }

.selected-slot-item .slot-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--danger);
    font-size: 16px;
    padding: 0 4px;
    line-height: 1;
}

.selected-slot-item .slot-remove:hover { color: #a33; }

/* Duration picker */
.duration-section { margin-bottom: 20px; }

.duration-section label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 6px;
}

.duration-pills {
    display: flex;
    gap: 6px;
}

.duration-pill {
    flex: 1;
    padding: 8px 4px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    cursor: pointer;
    color: var(--text-dark);
    transition: all 0.15s;
}

.duration-pill:hover { border-color: var(--primary); color: var(--primary); }
.duration-pill.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Calendar not configured notice */
.calendar-notice {
    padding: 12px 20px;
    background: var(--warning-light);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--warning);
}

/* ─── Responsive ─── */

@media (max-width: 768px) {
    /* Let the bar wrap so the links get their own full-width row instead of
       being squeezed to 0 width between the brand and the user controls
       (overflow-x:auto on a flex child forces its min-size to 0). */
    .navbar { padding: 8px 12px; height: auto; flex-wrap: wrap; row-gap: 6px; }
    .nav-brand { flex: 1 1 auto; }
    .nav-user { flex: 0 0 auto; }
    .nav-links {
        order: 3;
        flex: 0 0 100%;
        width: 100%;
        margin-left: 0;
        gap: 2px;
    }
    .nav-links a { padding: 6px 10px; font-size: 13px; }
    .nav-username { display: none; }
    .container { padding: 16px; }
    .form-card { padding: 20px; }
    .kanban-board { grid-template-columns: 1fr; }
    .kanban-board-wide { grid-template-columns: repeat(8, minmax(160px, 1fr)); }
    .billing-board { grid-template-columns: repeat(2, 1fr); }
    .inquiry-grid { grid-template-columns: 1fr; }
    .page-header { flex-direction: column; gap: 12px; align-items: flex-start; }
    .status-bar { flex-direction: column; }
    .status-form { flex-wrap: wrap; }
    .filter-form { flex-direction: column; }
    .filter-input { min-width: auto; width: 100%; }
    .consult-scheduler { flex-direction: column; }
    .scheduler-sidebar { width: 100%; position: static; }
}

/* ─── Analytics Dashboard ─── */

.analytics-section {
    margin-bottom: 36px;
}

.analytics-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
}

.pipeline-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.pipeline-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-top: 4px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px 18px;
    box-shadow: var(--shadow);
}

.pipeline-card.pipeline-pending { border-top-color: var(--warning); }
.pipeline-card.pipeline-booked  { border-top-color: var(--primary); }
.pipeline-card.pipeline-earned  { border-top-color: var(--success); }
.pipeline-card.pipeline-lost    { border-top-color: var(--accent); }

.pipeline-amount {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.1;
}

.pipeline-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 4px;
}

.pipeline-count {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

.chart-wrapper {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
}

.funnel-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.funnel-row {
    display: grid;
    grid-template-columns: 160px 1fr 60px 50px;
    align-items: center;
    gap: 14px;
}

.funnel-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
}

.funnel-track {
    background: var(--bg-warm);
    border-radius: 4px;
    height: 10px;
    overflow: hidden;
}

.funnel-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    transition: width 0.4s ease;
}

.funnel-count {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
    text-align: right;
}

.funnel-pct {
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
}

.timeline-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.timeline-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    box-shadow: var(--shadow);
}

.timeline-days {
    font-size: 36px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.timeline-unit {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 2px;
}

.timeline-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 6px;
}

.timeline-na {
    font-size: 22px;
    font-weight: 600;
    color: var(--border);
}

@media (max-width: 900px) {
    .pipeline-grid { grid-template-columns: repeat(2, 1fr); }
    .timeline-grid { grid-template-columns: repeat(2, 1fr); }
    .funnel-row { grid-template-columns: 120px 1fr 50px 44px; }
}

/* ─── Print Production Queue ─── */

.production-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.production-card {
    background: white;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 6px;
    padding: 16px;
    transition: box-shadow 0.2s;
}

.production-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.production-card.urgency-overdue {
    border-left-color: var(--danger);
    background: #fff5f5;
}

.production-card.urgency-urgent {
    border-left-color: #ff6b35;
    background: #fff9f5;
}

.production-card.urgency-soon {
    border-left-color: #ffa500;
}

.production-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.production-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.deadline-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}

.deadline-badge.urgency-overdue {
    background: var(--danger);
    color: white;
}

.deadline-badge.urgency-urgent {
    background: #ff6b35;
    color: white;
}

.deadline-badge.urgency-soon {
    background: #ffa500;
    color: white;
}

.deadline-badge.urgency-normal {
    background: var(--success);
    color: white;
}

.deadline-badge.urgency-no_deadline {
    background: var(--light-sage);
    color: var(--text-muted);
}

.production-details {
    display: flex;
    gap: 16px;
    font-size: 13px;
}

/* ──────────────────────────────────────────────────────────────────────
   Marketing landing page  —  Ribbon brand surface
   ──────────────────────────────────────────────────────────────────────
   Uses the --ribbon-* tokens (cream/terracotta/blue/mauve) defined at
   the top of this file, NOT the tenant tokens. This is a "Ribbon is
   the brand being shown" surface, per the 2026-05 brand drop. The
   stack mirrors Cierra's master mock: cream → blue band → cream →
   paper → blue band → cream, with terracotta as the ink color
   throughout.
*/

.marketing-body {
    background: var(--ribbon-cream);
    color: var(--ribbon-terracotta);
    margin: 0;
}

/* ── Nav ── */
.marketing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    background: var(--ribbon-blue);
    border-bottom: 1px solid var(--ribbon-blue);
}
.marketing-nav-brand { display: inline-flex; align-items: center; }
.marketing-nav-wordmark {
    height: 28px;
    width: auto;
    display: block;
    /* The wordmark.png is terracotta-on-transparent; on the blue nav
       band, swap to a cream tint so it reads at a distance. */
    filter: brightness(0) invert(1) brightness(0.97) sepia(0.05);
}
.marketing-nav-links {
    display: flex;
    align-items: center;
    gap: 12px;
}
.marketing-nav-link {
    display: inline-block;
    padding: 6px 18px;
    border: 1px solid var(--ribbon-cream);
    border-radius: 999px;
    background: transparent;
    color: var(--ribbon-cream);
    font-family: var(--font-display);
    font-size: 16px;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: background 0.18s, color 0.18s;
}
.marketing-nav-link:hover {
    background: var(--ribbon-cream);
    color: var(--ribbon-terracotta);
}
.marketing-nav-cta {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 999px;
    background: var(--ribbon-cream);
    color: var(--ribbon-terracotta);
    border: 1px solid var(--ribbon-cream);
    font-family: var(--font-display);
    font-size: 16px;
    text-decoration: none;
    transition: background 0.18s, color 0.18s;
}
.marketing-nav-cta:hover {
    background: var(--ribbon-paper);
    color: var(--ribbon-terracotta-deep);
}

/* ── Section scaffolding ── */
.marketing-hero-inner,
.marketing-founder-inner,
.marketing-wedge-inner,
.marketing-features-inner,
.marketing-niche-inner,
.marketing-pricing-inner,
.marketing-faq-inner,
.marketing-final-cta-inner,
.marketing-footer-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 40px;
}

.marketing-section-eyebrow {
    font-family: var(--font-script);
    font-weight: 500;
    font-size: 32px;
    color: var(--ribbon-terracotta);
    margin: 0 0 18px 0;
    letter-spacing: 0.5px;
}

.marketing-section-lede {
    font-size: 18px;
    color: var(--ribbon-terracotta-deep);
    margin: 0 0 36px 0;
    max-width: 640px;
}

/* ── Section dividers (terracotta line + center ring, per Cierra) ── */
.marketing-section-divider {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.marketing-section-divider::before,
.marketing-section-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ribbon-terracotta);
    opacity: 0.35;
}
.marketing-section-divider-dot {
    width: 10px;
    height: 10px;
    border: 1px solid var(--ribbon-terracotta);
    border-radius: 50%;
}

/* ── Hero ── */
.marketing-hero {
    background: var(--ribbon-cream);
    padding: 72px 0 88px 0;
}
.marketing-hero-inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
}
.marketing-hero-mark {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 32px;
}
.marketing-hero-brush {
    width: 240px;
    max-width: 60%;
    height: auto;
    display: block;
}
.marketing-hero-wordmark {
    height: 72px;
    width: auto;
}
.marketing-hero-headline {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 60px;
    line-height: 1.05;
    color: var(--ribbon-terracotta);
    margin: 0 0 24px 0;
    letter-spacing: -0.5px;
}
.marketing-hero-sub {
    font-size: 19px;
    line-height: 1.55;
    color: var(--ribbon-terracotta-deep);
    margin: 0 0 32px 0;
    max-width: 520px;
}
.marketing-hero-ctas {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
/* Marketing-specific pill buttons. Live alongside .ribbon-pill but
   sized for hero/CTA use rather than navigation. */
.marketing-cta-primary {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 999px;
    background: var(--ribbon-terracotta);
    color: var(--ribbon-cream);
    border: 1px solid var(--ribbon-terracotta);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.18s, color 0.18s;
}
.marketing-cta-primary:hover {
    background: var(--ribbon-terracotta-deep);
    color: var(--ribbon-cream);
}
.marketing-cta-secondary {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 999px;
    border: 1px solid var(--ribbon-terracotta);
    background: transparent;
    color: var(--ribbon-terracotta);
    font-family: var(--font-display);
    font-size: 16px;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: background 0.18s, color 0.18s;
}
.marketing-cta-secondary:hover {
    background: var(--ribbon-cream);
    color: var(--ribbon-terracotta-deep);
}
.marketing-hero-fine {
    color: var(--ribbon-mauve);
    font-size: 13px;
    margin: 0;
}
.marketing-hero-visual {
    display: flex;
    justify-content: center;
}
.marketing-hero-screenshot-placeholder,
.marketing-hero-screenshot {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    background: var(--ribbon-paper);
    border: 1px solid var(--ribbon-mauve);
    object-fit: cover;
    object-position: top center;
    display: block;
}
.marketing-hero-screenshot-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ribbon-mauve);
    font-size: 14px;
    font-family: var(--font-display);
}

/* ── Founder note ── */
.marketing-founder {
    background: var(--ribbon-paper);
    padding: 80px 0;
    border-top: 1px solid var(--ribbon-mauve);
    border-bottom: 1px solid var(--ribbon-mauve);
}
.marketing-founder-inner { max-width: 720px; }
.marketing-founder-body {
    font-size: 18px;
    line-height: 1.7;
    color: var(--ribbon-terracotta-deep);
    margin: 0 0 18px 0;
}
.marketing-founder-sign {
    font-family: var(--font-script);
    font-size: 30px;
    color: var(--ribbon-terracotta);
    margin: 24px 0 0 0;
}
.marketing-founder-sign a {
    color: var(--ribbon-terracotta);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ── Wedge: how quoting works ── */
.marketing-wedge {
    background: var(--ribbon-cream);
    padding: 80px 0;
}
.marketing-wedge-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.marketing-wedge-step {
    background: var(--ribbon-paper);
    border: 1px solid var(--ribbon-mauve);
    border-radius: var(--radius);
    padding: 28px;
}
.marketing-wedge-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ribbon-terracotta);
    color: var(--ribbon-cream);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}
.marketing-wedge-step h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 24px;
    color: var(--ribbon-terracotta);
    margin: 0 0 10px 0;
    line-height: 1.25;
}
.marketing-wedge-step p {
    color: var(--ribbon-terracotta-deep);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 20px 0;
}
.marketing-wedge-shot {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-sm);
    background: var(--ribbon-cream);
    border: 1px solid var(--ribbon-mauve);
    object-fit: cover;
    object-position: top left;
    display: block;
}

/* ── Legal pages (/terms, /privacy — Termly-embedded) ── */
.marketing-legal {
    background: var(--ribbon-paper);
    padding: 80px 0 120px;
    min-height: 60vh;
}
.marketing-legal-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px;
}
.marketing-legal-title {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ribbon-terracotta);
    font-size: 42px;
    line-height: 1.15;
    margin: 8px 0 32px 0;
}
.marketing-legal-stub {
    background: var(--ribbon-cream);
    border: 1px solid var(--ribbon-mauve);
    border-radius: var(--radius);
    padding: 28px 32px;
    color: var(--ribbon-terracotta-deep);
    font-size: 16px;
    line-height: 1.65;
}
.marketing-legal-stub p { margin: 0 0 14px 0; }
.marketing-legal-stub p:last-child { margin-bottom: 0; }
.marketing-legal-stub a {
    color: var(--ribbon-terracotta);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Feature grid (blue band — mirrors Cierra "Our services") ── */
.marketing-features {
    background: var(--ribbon-blue);
    padding: 80px 0;
    color: var(--ribbon-cream);
}
.marketing-features .marketing-section-eyebrow {
    color: var(--ribbon-cream);
}
.marketing-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 36px;
}
.marketing-feature {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}
.marketing-feature h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 20px;
    color: var(--ribbon-cream);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.marketing-feature p {
    color: var(--ribbon-cream);
    opacity: 0.92;
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

/* ── Niche positioning ── */
.marketing-niche {
    background: var(--ribbon-cream);
    padding: 80px 0;
}
.marketing-niche-inner { max-width: 720px; }
.marketing-niche p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--ribbon-terracotta-deep);
    margin: 0 0 16px 0;
}

/* ── Pricing ── */
.marketing-pricing {
    background: var(--ribbon-paper);
    padding: 80px 0;
    border-top: 1px solid var(--ribbon-mauve);
    border-bottom: 1px solid var(--ribbon-mauve);
}
.marketing-pricing-inner { text-align: center; }
.marketing-pricing-card {
    max-width: 480px;
    margin: 0 auto;
    background: var(--ribbon-cream);
    border: 1px solid var(--ribbon-terracotta);
    border-radius: var(--radius);
    padding: 36px 32px;
    text-align: left;
}
.marketing-pricing-price {
    text-align: center;
    margin-bottom: 24px;
}
.marketing-pricing-dollars {
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 600;
    color: var(--ribbon-terracotta);
    line-height: 1;
}
.marketing-pricing-period {
    font-size: 18px;
    color: var(--ribbon-mauve);
    margin-left: 4px;
}
.marketing-pricing-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}
.marketing-pricing-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--ribbon-mauve);
    color: var(--ribbon-terracotta-deep);
    font-size: 15px;
}
.marketing-pricing-list li:last-child {
    border-bottom: none;
}
.marketing-pricing-founding {
    background: var(--ribbon-blue-soft);
    border: 1px solid var(--ribbon-blue);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin: 0 0 24px 0;
    font-size: 14px;
    color: var(--ribbon-terracotta-deep);
    line-height: 1.5;
}
.marketing-pricing-founding strong { color: var(--ribbon-terracotta); }
.marketing-pricing-founding.sold-out {
    background: var(--ribbon-paper);
    border-color: var(--ribbon-mauve);
}
.marketing-pricing-spots {
    display: block;
    margin-top: 6px;
    font-weight: 600;
    color: var(--ribbon-terracotta);
}
.marketing-pricing-cta {
    display: block;
    width: 100%;
    text-align: center;
}

/* ── FAQ ── */
.marketing-faq {
    background: var(--ribbon-cream);
    padding: 80px 0;
}
.marketing-faq-inner { max-width: 760px; }
.marketing-faq-item {
    padding: 22px 0;
    border-bottom: 1px solid var(--ribbon-mauve);
}
.marketing-faq-item:last-child { border-bottom: none; }
.marketing-faq-item h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    color: var(--ribbon-terracotta);
    margin: 0 0 10px 0;
}
.marketing-faq-item p {
    color: var(--ribbon-terracotta-deep);
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}
.marketing-faq-item p a {
    color: var(--ribbon-terracotta);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Final CTA strip (blue band — mirrors Cierra "Chat with us") ── */
.marketing-final-cta {
    background: var(--ribbon-blue);
    padding: 72px 0;
    text-align: center;
}
.marketing-final-cta-lede {
    font-family: var(--font-display);
    font-size: 30px;
    color: var(--ribbon-cream);
    margin: 0 0 28px 0;
    line-height: 1.35;
}
.marketing-final-cta .marketing-cta-primary {
    background: var(--ribbon-cream);
    color: var(--ribbon-terracotta);
    border-color: var(--ribbon-cream);
}
.marketing-final-cta .marketing-cta-primary:hover {
    background: var(--ribbon-paper);
    color: var(--ribbon-terracotta-deep);
}

/* ── Footer (cream surface, terracotta ink — wordmark stays native) ── */
.marketing-footer {
    background: var(--ribbon-paper);
    color: var(--ribbon-terracotta);
    padding: 40px 0 32px 0;
    border-top: 1px solid var(--ribbon-mauve);
}
.marketing-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.marketing-footer-wordmark {
    height: 24px;
    width: auto;
}
.marketing-footer-tagline {
    color: var(--ribbon-mauve);
    font-size: 13px;
    margin: 6px 0 0 0;
    font-family: var(--font-script);
    font-size: 18px;
}
.marketing-footer-links {
    display: flex;
    gap: 22px;
}
.marketing-footer-links a {
    color: var(--ribbon-terracotta);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.marketing-footer-links a:hover { color: var(--ribbon-terracotta-deep); }
.marketing-footer-meta {
    color: var(--ribbon-mauve);
    font-size: 13px;
}

/* ── Mobile ── */
@media (max-width: 860px) {
    .marketing-nav {
        padding: 16px 20px;
    }
    .marketing-nav-links {
        gap: 14px;
    }
    .marketing-hero-inner,
    .marketing-founder-inner,
    .marketing-wedge-inner,
    .marketing-features-inner,
    .marketing-niche-inner,
    .marketing-pricing-inner,
    .marketing-faq-inner,
    .marketing-final-cta-inner,
    .marketing-footer-inner {
        padding: 0 20px;
    }
    .marketing-hero {
        padding: 40px 0 56px 0;
    }
    .marketing-hero-inner,
    .marketing-wedge-steps,
    .marketing-features-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .marketing-hero-mark {
        gap: 12px;
        margin-bottom: 24px;
    }
    .marketing-hero-brush { width: 160px; }
    .marketing-hero-wordmark { height: 52px; }
    .marketing-hero-headline {
        font-size: 40px;
    }
    .marketing-hero-sub {
        font-size: 17px;
    }
    .marketing-hero-ctas {
        flex-wrap: wrap;
        gap: 14px;
    }
    .marketing-cta-primary {
        padding: 11px 22px;
        font-size: 16px;
    }
    .marketing-section-eyebrow {
        font-size: 28px;
    }
    .marketing-final-cta-lede {
        font-size: 24px;
    }
    .marketing-wedge,
    .marketing-features,
    .marketing-niche,
    .marketing-pricing,
    .marketing-faq {
        padding: 56px 0;
    }
    .marketing-founder {
        padding: 56px 0;
    }
    .marketing-pricing-card {
        padding: 28px 22px;
    }
    .marketing-pricing-dollars {
        font-size: 52px;
    }
    .marketing-final-cta-lede {
        font-size: 22px;
    }
    .marketing-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}