:root {
    /* ---- YMS360-aligned design tokens. Single source of truth for the
       whole app; the per-tenant branding override in layouts/app.twig only
       touches --accent (legacy) so the rest of the palette stays consistent.
       Values mirror the cloned-site CSS verbatim — note that --teal here is
       actually the YMS360 brand blue (#146cf3); the token name is kept for
       parity with the source so future merges stay drop-in. */

    /* Surfaces */
    --bg: #07111E;
    --surface: #0C1E35;
    --surface2: #102843;
    --border: rgba(255, 255, 255, 0.1);
    --navy: #07111E;
    --navy-2: #0C1E35;
    --navy-3: #102843;
    --ink: #1E293B;
    --card: #0C1E35;
    --card-fg: #e2e8f0;

    /* Typography */
    --text: #e2e8f0;
    --fg: #e2e8f0;              /* legacy alias */
    --muted: #94A3B8;
    --dark-gray: #334155;
    --white: #FFFFFF;
    --off-white: #F8F9FB;
    --light: #F1F5F9;
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Brand accent (blue, exposed as --teal/--blue/--cta/--accent for parity) */
    --teal: #146cf3;
    --teal-dim: #0f57cc;
    --teal-10: rgba(20, 108, 243, 0.10);
    --teal-25: rgba(20, 108, 243, 0.25);
    --blue: #146cf3;
    --cta: #146cf3;
    --cta-hover: #0f57cc;
    --accent: #146cf3;
    /* Hyperlink text — a lighter blue than --teal so plain `a` reads on the
       dark-navy app background. Components that own their colour (.btn-*,
       .badge-*, focus rings) keep using --teal. */
    --link: #7db8ff;
    --link-hover: #b3d4ff;

    /* Status */
    --success: #10B981;
    --warning: #f59e0b;
    --amber: #f59e0b;
    --danger: #EF4444;
    --error-bg: rgba(239, 68, 68, 0.12);
    --error-fg: #fecaca;
    --info-bg: rgba(94, 234, 212, 0.12);
    --info-fg: #5EEAD4; /* teal — readable on dark theme */

    /* Geometry */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius: 12px;             /* legacy alias */
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.15);

    /* ===== UI SYSTEM TOKENS (2026 standardization — see site/docs/APP_UI_GUIDE.md) ===== */
    /* Spacing scale — use instead of magic-number px gaps/padding */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;

    /* Type scale — the only font sizes app UI should use */
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 13px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 18px;     /* page + record titles (reconciled) */
    --text-2xl: 22px;
    --text-3xl: 28px;

    /* Containers + controls */
    --container-list: 1200px;    /* index / list pages */
    --container-record: 1280px;  /* record_shell only — has a 280px sticky rail */
    --container-form: 760px;     /* centered standalone forms */
    --drawer-w: 460px;
    --drawer-w-wide: 880px;          /* detail-drawer with rail + main */
    --control-h: 34px;           /* canonical field + default button height */

    /* Field controls — single source for inputs/selects/textareas */
    --field-pad-y: 7px;
    --field-pad-x: 10px;

    /* Overlay elevation */
    --drawer-shadow: -8px 0 40px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* All headings use Montserrat; body copy uses Inter. Matches the cloned-
   site's typographic split (h1-h6{font-family:'Montserrat','Inter',...}). */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', var(--font-sans);
    line-height: 1.2;
}

/* App-wide link colour. Brighter than --teal so plain `a` reads on the dark
   navy background. Component classes (.btn-*, .badge-*, .website-pill,
   .linked-name, .app-nav-item, .brand, etc.) own their own colour and win
   on specificity — only bare or generic anchors pick this up. */
a { color: var(--link); }
a:hover { color: var(--link-hover); }

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.brand {
    font-weight: 700;
    color: var(--fg);
    text-decoration: none;
}

nav a, nav button.link {
    color: var(--fg);
    text-decoration: none;
    margin-left: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    padding: 0;
}

nav a:hover, nav button.link:hover { color: var(--accent); }

form.inline { display: inline; }

/* Default <main> for anonymous/auth pages (login, register, password reset)
   stays as a narrow centered column. Authed-shell pages override below. */
main {
    max-width: 480px;
    width: 100%;
    margin: 2rem auto;
    padding: 0 1rem;
}

main h1 { margin-top: 0; }

form { display: flex; flex-direction: column; gap: 1rem; }

label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: var(--fg);
}

input {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
    color: var(--fg);
    font: inherit;
}

/* Default styling for bare submit buttons (login, register, etc. — forms
   that don't opt into the .btn design system). Scoped via :not(.btn) so
   any button with the .btn class keeps the design-system styling intact;
   without this scope, [type="submit"] would beat `.btn-sm` on specificity
   and inflate padding + border on every toolbar submit button. */
button[type="submit"]:not(.btn):not(.marketing-btn):not(.tag-x):not(.link) {
    padding: 0.6rem 1rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

button[type="submit"]:not(.btn):not(.marketing-btn):not(.tag-x):not(.link):hover { filter: brightness(1.1); }

.flash {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    max-width: 480px;
    margin: 1rem auto;
}

.flash-error { background: var(--error-bg); color: var(--error-fg); }
.flash-info { background: var(--info-bg); color: var(--info-fg); }

.hero {
    text-align: center;
    padding: 2rem 0;
}

.site-footer {
    text-align: center;
    padding: 1rem;
    color: var(--muted);
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* =========================================================================
   Marketing (apex landing) — namespaced under .marketing-* so the existing
   tenant-app chrome above is untouched. Loaded via views/layouts/marketing.twig.

   Theme: light yms360.com mimic — bright white hero with a subtle blue
   grid-dot pattern, navy section flip for emphasis strips, blue #146cf3 CTA,
   Inter body / Montserrat headings.  All overrides are scoped to
   `body.marketing-body` so the authenticated tenant app shell (which lives
   on the same stylesheet) stays dark.
   ========================================================================= */

:root {
    /* Legacy marketing aliases retained for any tenant-side code that may
       reference them; mapped onto the dark tokens above for backwards-compat. */
    --bg-deep: var(--bg);
    --surface-2: var(--surface2);
    --accent-glow: var(--teal-25);
    --text-muted: var(--muted);
}

/* Marketing-scoped tokens — light palette, only applied under .marketing-body */
body.marketing-body {
    --marketing-bg: #FFFFFF;
    --marketing-surface: #F1F5F9;          /* yms360 --light */
    --marketing-surface-navy: #07111E;     /* yms360 --navy */
    --marketing-surface-navy-2: #0C1E35;   /* yms360 --navy-2 */
    --marketing-ink: #1E293B;              /* yms360 --ink */
    --marketing-text: #334155;             /* yms360 --dark-gray */
    --marketing-muted: #64748b;
    --marketing-muted-navy: #B0BCCD;       /* yms360 --muted, used on navy strips */
    --marketing-cta: #146cf3;
    --marketing-cta-hover: #0f57cc;
    --marketing-cta-10: rgba(20, 108, 243, 0.10);
    --marketing-cta-25: rgba(20, 108, 243, 0.25);
    --marketing-border: rgba(0, 0, 0, 0.06);
    --marketing-border-navy: rgba(255, 255, 255, 0.08);
    --marketing-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.10);
    --marketing-nav-height: 72px;
    --marketing-container-max: 1280px;
    --marketing-radius-sm: 6px;
    --marketing-radius-md: 12px;
    --marketing-radius-lg: 20px;
}

html { scroll-behavior: smooth; }

body.marketing-body {
    display: block;
    background: var(--marketing-bg);
    color: var(--marketing-ink);
    line-height: 1.6;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.marketing-body main { max-width: none; margin: 0; padding: 0; }

/* Heading defaults for the marketing scope. Specificity stays at (0,1,1) so
   later overrides like `.marketing-section-navy h3` (also (0,1,1)) win on
   source order — adding a `body` type selector here would inflate this to
   (0,1,2) and silently override the navy-section white-text rule. */
.marketing-body h1,
.marketing-body h2,
.marketing-body h3,
.marketing-body h4,
.marketing-body h5,
.marketing-body h6 {
    font-family: 'Montserrat', 'Inter', sans-serif;
    line-height: 1.15;
    color: var(--marketing-ink);
}

/* ---------- Skip-nav (a11y) ---------- */

.skip-nav {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    background: var(--marketing-cta);
    color: #fff;
    font-weight: 600;
    border-radius: var(--marketing-radius-sm);
    text-decoration: none;
}

.skip-nav:focus { top: 1rem; }

.marketing-container {
    max-width: var(--marketing-container-max);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2.5rem);
}

/* ---------- Header ---------- */

.marketing-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--marketing-nav-height);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
}

.marketing-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

.marketing-brand {
    display: inline-flex;
    align-items: center;
    gap: 0;
    color: var(--marketing-ink);
    text-decoration: none;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.01em;
}

.marketing-brand-dot {
    color: var(--marketing-cta);
    font-weight: 800;
}

.marketing-brand-tail { color: var(--marketing-muted); font-weight: 500; }

.marketing-nav-center {
    display: flex;
    gap: 2rem;
    flex: 1;
    justify-content: center;
    align-items: center;
}

.marketing-nav-center a {
    position: relative;
    color: var(--marketing-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 0.5rem 0;
    transition: color 0.2s ease;
}

.marketing-nav-center a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--marketing-cta);
    transition: width 0.3s ease;
}

.marketing-nav-center a:hover { color: var(--marketing-cta); }
.marketing-nav-center a:hover::after { width: 100%; }

.marketing-nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ---------- Buttons ---------- */

.marketing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    border-radius: var(--marketing-radius-sm);
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    line-height: 1.4;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
    white-space: nowrap;
}

.marketing-btn-primary {
    background: var(--marketing-cta);
    color: #fff;
    border-color: var(--marketing-cta);
}

.marketing-btn-primary:hover {
    background: var(--marketing-cta-hover);
    border-color: var(--marketing-cta-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(20, 108, 243, 0.35);
}

.marketing-btn-ghost {
    background: transparent;
    color: var(--marketing-ink);
    border-color: rgba(0, 0, 0, 0.2);
}

.marketing-btn-ghost:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.35);
    color: var(--marketing-ink);
}

/* On navy strips the ghost button needs to invert */
.marketing-on-navy .marketing-btn-ghost,
.marketing-section-navy .marketing-btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.marketing-on-navy .marketing-btn-ghost:hover,
.marketing-section-navy .marketing-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.marketing-btn-lg { font-size: 16px; padding: 0.9rem 2rem; }

.marketing-btn-block { display: flex; width: 100%; }

/* ---------- Typography ---------- */

.marketing-eyebrow {
    display: inline-block;
    margin: 0 0 1.25rem;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--marketing-cta);
}

.marketing-eyebrow-center { display: block; text-align: center; }

.marketing-h1 {
    margin: 0 0 1.25rem;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--marketing-ink);
}

.marketing-h1-accent {
    color: var(--marketing-cta);
}

.marketing-h2 {
    margin: 0 0 1rem;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--marketing-ink);
}

.marketing-h2-center { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.marketing-h2-tight { margin-bottom: 4px; }

.marketing-lede {
    max-width: 640px;
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    color: var(--marketing-text);
    line-height: 1.7;
    margin: 0 0 2rem;
}

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

/* Inverted text inside navy sections */
.marketing-section-navy,
.marketing-section-navy .marketing-h2,
.marketing-section-navy h2,
.marketing-section-navy h3 {
    color: #fff;
}

.marketing-section-navy .marketing-lede,
.marketing-section-navy p,
.marketing-section-navy li {
    color: var(--marketing-muted-navy);
}

.marketing-section-navy .marketing-eyebrow {
    color: var(--marketing-cta);
}

/* ---------- Hero ---------- */

.marketing-hero {
    position: relative;
    background: var(--marketing-bg);
    padding: calc(var(--marketing-nav-height) + 2.5rem) 0 4rem;
    overflow: hidden;
}

.marketing-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(20, 108, 243, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 108, 243, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

.marketing-hero-compact {
    padding-top: calc(var(--marketing-nav-height) + 3rem);
    padding-bottom: 3rem;
}

/* Hero variant that fills the viewport so the next section sits below the
   fold — pricing uses this to focus the visitor on the plan-shape decision
   before the plan grid scrolls into view. `svh` keeps it correct on iOS
   Safari, where `100vh` overshoots when the URL bar collapses. */
.marketing-hero-fullscreen {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--marketing-nav-height);
    padding-bottom: 2rem;
}

.marketing-hero-glow { display: none; }

.marketing-hero-inner { position: relative; z-index: 1; }

.marketing-hero-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

.marketing-hero-ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.marketing-hero-fineprint {
    color: var(--marketing-muted);
    font-size: 13px;
    margin: 0;
}

/* ---------- Sections ---------- */

.marketing-section { padding: clamp(3rem, 6vw, 6rem) 0; }

.marketing-section-tinted,
.marketing-section-light {
    background: var(--marketing-surface);
}

.marketing-section-navy {
    background: var(--marketing-surface-navy);
}

.marketing-prose-center { text-align: center; max-width: 720px; margin: 0 auto; }

/* ---------- Legal pages (Privacy, Terms) ---------- */
.marketing-legal { max-width: 820px; margin: 0 auto; }
.marketing-legal .marketing-h1 { margin-bottom: 0.25rem; }
.marketing-legal-meta { color: var(--marketing-text); font-size: 14px; margin: 0 0 2.5rem; }
.marketing-legal-toc {
    background: var(--marketing-surface);
    border: 1px solid var(--marketing-border);
    border-radius: var(--marketing-radius-md);
    padding: 1.25rem 1.5rem;
    margin: 0 0 2.5rem;
}
.marketing-legal-toc h2 {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--marketing-ink);
    margin: 0 0 0.75rem;
}
.marketing-legal-toc ol { margin: 0; padding-left: 1.25rem; }
.marketing-legal-toc li { margin: 0.25rem 0; font-size: 15px; }
.marketing-legal a,
.marketing-legal-toc a {
    color: var(--marketing-cta);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.marketing-legal a:hover,
.marketing-legal-toc a:hover { color: var(--marketing-cta-hover); }
.marketing-legal section { margin-bottom: 2.5rem; scroll-margin-top: 5rem; }
.marketing-legal section > h2 {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 1.5rem;
    color: var(--marketing-ink);
    margin: 0 0 0.75rem;
}
.marketing-legal h3 {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 1.125rem;
    color: var(--marketing-ink);
    margin: 1.5rem 0 0.5rem;
}
.marketing-legal p,
.marketing-legal li { color: var(--marketing-text); font-size: 16px; line-height: 1.7; }
.marketing-legal p { margin: 0 0 1rem; }
.marketing-legal ul,
.marketing-legal ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.marketing-legal li { margin: 0.35rem 0; }
.marketing-legal .marketing-legal-placeholder {
    background: #fff7d6;
    color: #6b4f00;
    padding: 0.05em 0.4em;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.95em;
}
.marketing-legal table.marketing-legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.25rem;
    font-size: 15px;
}
.marketing-legal table.marketing-legal-table th,
.marketing-legal table.marketing-legal-table td {
    border: 1px solid var(--marketing-border);
    padding: 0.6rem 0.75rem;
    text-align: left;
    vertical-align: top;
}
.marketing-legal table.marketing-legal-table th { background: var(--marketing-surface); }
@media (max-width: 720px) {
    .marketing-legal { padding: 0 0.25rem; }
    .marketing-legal table.marketing-legal-table,
    .marketing-legal table.marketing-legal-table tbody,
    .marketing-legal table.marketing-legal-table tr,
    .marketing-legal table.marketing-legal-table td,
    .marketing-legal table.marketing-legal-table th { display: block; width: 100%; }
    .marketing-legal table.marketing-legal-table tr { margin-bottom: 1rem; }
}

/* ---------- Value props ---------- */

.marketing-valueprops {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.marketing-valueprop {
    background: var(--marketing-bg);
    border: 1px solid var(--marketing-border);
    border-radius: var(--marketing-radius-md);
    padding: 1.75rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.marketing-valueprop:hover {
    transform: translateY(-4px);
    box-shadow: var(--marketing-shadow-lg);
}

.marketing-vp-eyebrow {
    margin: 0 0 0.5rem;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--marketing-ink);
}

.marketing-vp-body { margin: 0; color: var(--marketing-text); font-size: 15px; line-height: 1.65; }

/* Light value props on navy section invert */
.marketing-section-navy .marketing-valueprop {
    background: var(--marketing-surface-navy-2);
    border-color: var(--marketing-border-navy);
}

.marketing-section-navy .marketing-vp-eyebrow { color: #fff; }
.marketing-section-navy .marketing-vp-body { color: var(--marketing-muted-navy); }

/* ---------- Feature grid ---------- */

.marketing-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

/* 2x2 variant — for grids that hold exactly four cards. Caps width so the
   cards stay readable on wide viewports instead of stretching edge-to-edge. */
.marketing-feature-grid.marketing-feature-grid-two-up {
    grid-template-columns: repeat(2, 1fr);
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.marketing-feature-card {
    background: var(--marketing-bg);
    border: 1px solid var(--marketing-border);
    border-radius: var(--marketing-radius-md);
    padding: 1.75rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.marketing-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--marketing-shadow-lg);
}

.marketing-feature-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--marketing-cta-10);
    color: var(--marketing-cta);
    border-radius: var(--marketing-radius-sm);
    font-size: 20px;
    margin-bottom: 1rem;
}

.marketing-feature-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--marketing-ink);
}

.marketing-feature-card p {
    margin: 0;
    color: var(--marketing-text);
    font-size: 14px;
    line-height: 1.65;
}

/* ---------- White-label callout ---------- */

.marketing-callout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(2rem, 4vw, 3rem);
    background: var(--marketing-surface-navy-2);
    border: 1px solid var(--marketing-border-navy);
    border-radius: var(--marketing-radius-lg);
    color: #fff;
}

.marketing-callout .marketing-eyebrow { color: #fff; }
.marketing-callout .marketing-h2 { color: #fff; }
.marketing-callout .marketing-link-arrow,
.marketing-callout .marketing-link-arrow:hover { color: #fff; }
.marketing-callout .marketing-link-arrow:hover { text-decoration: underline; }

.marketing-callout-body {
    color: var(--marketing-muted-navy);
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 1.25rem;
}

.marketing-link-arrow {
    color: var(--marketing-cta);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
}

.marketing-link-arrow:hover { text-decoration: underline; }

/* ---------- Hero illustration (inline SVG depicting /vessels) ---------- */

.marketing-callout-preview {
    display: flex;
    justify-content: center;
    align-items: center;
}

.marketing-hero-svg {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 14px;
    filter: drop-shadow(0 18px 40px rgba(15, 23, 42, 0.14));
}

/* ---------- Product-tour bands (/platform) ---------- */

.marketing-band {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

/* Alternate the screenshot to the left without touching source order. */
.marketing-band-reverse .marketing-band-media { order: -1; }

.marketing-band-copy { max-width: 34rem; }

/* Bands live in a ~half-width column, so keep the heading a touch smaller than
   a full-width section h2 — one line at desktop, per the 1-line-heading rule. */
.marketing-band-copy .marketing-h2 {
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    line-height: 1.15;
}

.marketing-band-lede {
    color: var(--marketing-text);
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    line-height: 1.65;
    margin: 0.75rem 0 1.5rem;
}

.marketing-band-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.marketing-band-bullets li {
    position: relative;
    padding-left: 2rem;
    color: var(--marketing-text);
    font-size: 0.98rem;
    line-height: 1.5;
}

.marketing-band-bullets li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: -1px;
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--marketing-cta-10);
    color: var(--marketing-cta);
    font-size: 0.72rem;
    font-weight: 700;
}

/* Framed screenshot — browser chrome over a real app grab. */
.marketing-band-frame {
    margin: 0;
    width: 100%;
    background: var(--marketing-bg);
    border: 1px solid var(--marketing-border);
    border-radius: var(--marketing-radius-md);
    overflow: hidden;
    box-shadow: var(--marketing-shadow-lg);
}

.marketing-band-shot {
    display: block;
    width: 100%;
    height: auto;
}

.marketing-section-navy .marketing-band-frame { border-color: var(--marketing-border-navy); }

/* Two-column tour: sticky left "Modules" nav + right column of module
   sections (mimics yms360.com/platform). platform-tour.js toggles is-active. */
.tour-shell { padding-top: clamp(2rem, 4vw, 3.5rem); }

.tour-layout { display: block; }

@media (min-width: 1024px) {
    .tour-layout {
        display: grid;
        grid-template-columns: 232px minmax(0, 1fr);
        gap: clamp(2rem, 4vw, 3.5rem);
        align-items: start;
    }
}

/* Sticky left modules card */
.tour-modules {
    display: none;
    position: sticky;
    top: calc(var(--marketing-nav-height) + 1.25rem);
    align-self: start;
    background: var(--marketing-bg);
    border: 1px solid var(--marketing-border);
    border-radius: var(--marketing-radius-lg);
    box-shadow: var(--marketing-shadow-lg);
    padding: 1.1rem 0.85rem;
}

@media (min-width: 1024px) { .tour-modules { display: block; } }

.tour-modules-title {
    margin: 0 0 0.6rem;
    padding-left: 0.6rem;
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--marketing-cta);
}

.tour-modules ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tour-modules a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: 9px;
    text-decoration: none;
    color: var(--marketing-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    transition: background 0.12s ease, color 0.12s ease;
}

.tour-modules a:hover { background: var(--marketing-surface); }

.tour-modules-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: transparent;
    opacity: 0.45;
    transition: all 0.12s ease;
}

.tour-modules a.is-active {
    background: var(--marketing-cta-10);
    color: var(--marketing-cta);
    font-weight: 600;
}

.tour-modules a.is-active .tour-modules-dot {
    background: var(--marketing-cta);
    border-color: var(--marketing-cta);
    opacity: 1;
}

/* Right column module sections — alternating card backgrounds. */
.tour-band {
    scroll-margin-top: calc(var(--marketing-nav-height) + 1rem);
    padding: clamp(1.75rem, 3.5vw, 3rem);
    border-radius: var(--marketing-radius-lg);
    border: 1px solid var(--marketing-border);
}

.tour-band + .tour-band { margin-top: 1.5rem; }

.tour-band:nth-child(odd) { background: var(--marketing-surface); }
.tour-band:nth-child(even) {
    background: var(--marketing-bg);
    box-shadow: var(--marketing-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06));
}

@media (max-width: 1023px) {
    .marketing-band { grid-template-columns: 1fr; gap: 2rem; }
    /* Screenshot always sits above the copy when stacked. */
    .marketing-band-media,
    .marketing-band-reverse .marketing-band-media { order: -1; }
    .marketing-band-copy { max-width: none; }
}

/* ---------- Browser mockup (still used by the white-label callout) ---------- */

.marketing-mock-window {
    width: 100%;
    max-width: 560px;
    background: var(--marketing-bg);
    border: 1px solid var(--marketing-border);
    border-radius: var(--marketing-radius-md);
    overflow: hidden;
    box-shadow: var(--marketing-shadow-lg);
}

.marketing-mock-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: #F8F9FB;
    border-bottom: 1px solid var(--marketing-border);
}

.marketing-mock-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}
.marketing-mock-dot:nth-child(1) { background: #ef4444; }
.marketing-mock-dot:nth-child(2) { background: #f59e0b; }
.marketing-mock-dot:nth-child(3) { background: #10b981; }

.marketing-mock-url {
    margin-left: 12px;
    color: var(--marketing-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

.marketing-mock-body { padding: 0; }

.marketing-mock-line {
    height: 8px;
    border-radius: 4px;
    background: #e2e8f0;
}

.marketing-mock-line-1 { width: 38%; }
.marketing-mock-line-2 { width: 60%; }
.marketing-mock-line-3 { width: 30%; }
.marketing-mock-line-accent { background: var(--marketing-cta); opacity: 0.85; }

/* ---------- Trust bar ---------- */

.marketing-trust-bar {
    padding: 1.5rem 0;
}

.marketing-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.marketing-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 500;
}

.marketing-trust-glyph {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--marketing-cta);
    font-size: 18px;
    flex-shrink: 0;
}

/* ---------- How it works (4 steps on navy) ---------- */

.marketing-how-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.marketing-how-step {
    background: var(--marketing-surface-navy-2);
    border: 1px solid var(--marketing-border-navy);
    border-radius: var(--marketing-radius-md);
    padding: 1.75rem;
    position: relative;
}

.marketing-how-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--marketing-cta);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 1rem;
}

.marketing-how-step h3 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.marketing-how-step p {
    margin: 0;
    color: var(--marketing-muted-navy);
    font-size: 14px;
    line-height: 1.6;
}

/* ---------- FAQ ---------- */

.marketing-faq {
    max-width: 760px;
    margin: 2.5rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.marketing-faq-item {
    background: var(--marketing-bg);
    border: 1px solid var(--marketing-border);
    border-radius: var(--marketing-radius-md);
    padding: 0;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.marketing-faq-item[open] {
    border-color: rgba(20, 108, 243, 0.3);
    box-shadow: var(--marketing-shadow-lg);
}

.marketing-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 1.25rem;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--marketing-ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.marketing-faq-item summary::-webkit-details-marker { display: none; }

.marketing-faq-item summary::after {
    content: '+';
    color: var(--marketing-cta);
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 400;
    transition: transform 0.2s ease;
}

.marketing-faq-item[open] summary::after {
    content: '−';
}

.marketing-faq-answer {
    padding: 0 1.25rem 1.1rem;
    color: var(--marketing-text);
    font-size: 15px;
    line-height: 1.7;
}

.marketing-faq-answer p { margin: 0 0 0.75rem; }
.marketing-faq-answer p:last-child { margin: 0; }

/* ---------- Prefooter CTA band ---------- */

.marketing-prefooter {
    background: var(--marketing-surface-navy);
    padding: clamp(3rem, 5vw, 5rem) 0;
    text-align: center;
}

.marketing-prefooter h2 {
    color: #fff;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin: 0 auto 1rem;
}

.marketing-prefooter p {
    color: var(--marketing-muted-navy);
    max-width: 560px;
    margin: 0 auto 1.75rem;
    font-size: 1.05rem;
    line-height: 1.65;
}

.marketing-prefooter-ctas {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ---------- Pricing CTA strip ---------- */

.marketing-pricing-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    background: var(--marketing-surface);
    border: 1px solid var(--marketing-border);
    border-radius: var(--marketing-radius-lg);
    padding: 2.25rem 2.5rem;
}

.marketing-pricing-sub {
    margin: 0;
    color: var(--marketing-text);
}

.marketing-pricing-ctas {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ---------- Plan grid (pricing page) ---------- */

.marketing-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.marketing-plan {
    background: var(--marketing-bg);
    border: 1px solid var(--marketing-border);
    border-radius: var(--marketing-radius-md);
    padding: 2rem;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.marketing-plan:hover {
    transform: translateY(-4px);
    box-shadow: var(--marketing-shadow-lg);
}

.marketing-plan-featured {
    border-color: var(--marketing-cta);
    border-width: 2px;
    box-shadow: 0 12px 40px rgba(20, 108, 243, 0.18);
}

.marketing-plan-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 6px 14px;
    background: var(--marketing-cta);
    color: #fff;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.marketing-plan-name {
    margin: 0 0 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--marketing-cta);
}

.marketing-plan-price {
    margin: 0 0 1rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--marketing-ink);
    line-height: 1;
}

.marketing-plan-price-unit {
    font-size: 14px;
    font-weight: 500;
    color: var(--marketing-muted);
}

.marketing-plan-description {
    margin: 0 0 1.5rem;
    color: var(--marketing-text);
    font-size: 14px;
    line-height: 1.65;
    flex: 1;
}

/* ---------- Forms (signup / login-helper) ---------- */

.marketing-form-wrap {
    max-width: 520px;
    margin: 0 auto;
    background: var(--marketing-bg);
    border: 1px solid var(--marketing-border);
    border-radius: var(--marketing-radius-md);
    padding: 2rem;
}

.marketing-form-wrap-narrow { max-width: 420px; }

.marketing-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.marketing-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.marketing-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.marketing-field-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--marketing-ink);
    letter-spacing: 0.01em;
}

.marketing-field input,
.marketing-field textarea {
    padding: 0.75rem 0.9rem;
    border-radius: var(--marketing-radius-sm);
    border: 1px solid #cbd5e1;
    background: #fff;
    color: var(--marketing-ink);
    font: inherit;
    font-size: 15px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.marketing-field textarea {
    resize: vertical;
    min-height: 96px;
    line-height: 1.55;
}

.marketing-field input:focus,
.marketing-field textarea:focus {
    outline: none;
    border-color: var(--marketing-cta);
    box-shadow: 0 0 0 3px var(--marketing-cta-25);
}

.marketing-field-optional {
    color: var(--marketing-muted);
    font-weight: 400;
    font-size: 12px;
    margin-left: 4px;
}

.marketing-required {
    color: var(--marketing-cta);
    margin-left: 2px;
}

/* Honeypot — visually hidden from humans but kept in the DOM for bots. */
.marketing-honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Contact page — two-column intro + form on desktop, stacked on tablet/mobile. */
.marketing-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.marketing-contact-intro {
    text-align: center;
}

@media (max-width: 1023px) {
    .marketing-contact-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.marketing-field-hint { font-size: 12px; color: var(--marketing-muted); }
.marketing-field-error { font-size: 12px; color: #dc2626; }

.marketing-form-foot {
    margin: 0.5rem 0 0;
    color: var(--marketing-text);
    font-size: 14px;
    text-align: center;
}

.marketing-form-foot a { color: var(--marketing-cta); text-decoration: none; font-weight: 600; }
.marketing-form-foot a:hover { text-decoration: underline; }

.marketing-code {
    background: var(--marketing-surface);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    color: var(--marketing-cta);
}

/* Code chip looks lighter on the navy callout */
.marketing-callout .marketing-code {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
}

/* ---------- Features dropdown — CSS-only, uses <details>/<summary> ---------- */

.marketing-nav-features {
    position: relative;
    display: inline-block;
}

.marketing-nav-features > summary {
    list-style: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
    padding: 0.25rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.marketing-nav-features > summary::-webkit-details-marker { display: none; }
.marketing-nav-features > summary::after {
    content: '▾';
    font-size: 0.7em;
    opacity: 0.7;
    transition: transform 150ms;
}
.marketing-nav-features[open] > summary::after { transform: rotate(180deg); }

.marketing-nav-menu {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: var(--marketing-ink);
    min-width: 320px;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(12, 30, 53, 0.18);
    padding: 0.6rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
    z-index: 50;
}

.marketing-nav-menu a {
    display: block;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    transition: background 120ms;
}
.marketing-nav-menu a:hover { background: var(--marketing-surface); }

.marketing-nav-menu-title {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
}

.marketing-nav-menu-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--marketing-muted);
    line-height: 1.3;
}

@media (max-width: 720px) {
    .marketing-nav-menu {
        position: static;
        transform: none;
        box-shadow: none;
        min-width: 0;
        padding: 0.25rem 0;
    }
}

/* ---------- Stat strip — exactly 3 stats per STYLE_GUIDE.md ---------- */

.marketing-stat-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1080px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--marketing-surface);
    border-radius: 16px;
}

.marketing-stat { text-align: center; }

.marketing-stat-number {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    line-height: 1;
    color: var(--marketing-ink);
    letter-spacing: -0.02em;
}

.marketing-stat-label {
    margin-top: 0.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--marketing-ink);
}

.marketing-stat-context {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--marketing-muted);
}

.marketing-section-navy .marketing-stat-strip {
    background: rgba(255, 255, 255, 0.06);
}
.marketing-section-navy .marketing-stat-number,
.marketing-section-navy .marketing-stat-label { color: #fff; }
.marketing-section-navy .marketing-stat-context { color: var(--marketing-muted-navy); }

@media (max-width: 720px) {
    .marketing-stat-strip {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }
}

/* ---------- Comparison row — us vs. most general tools ---------- */

.marketing-compare-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--marketing-surface);
    border-radius: 12px;
    margin-bottom: 0.75rem;
}

.marketing-compare-label {
    grid-column: 1 / -1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--marketing-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.marketing-compare-ours,
.marketing-compare-theirs {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem;
    border-radius: 8px;
    background: #fff;
}

.marketing-compare-theirs { background: rgba(0, 0, 0, 0.02); }

.marketing-compare-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--marketing-cta);
}

.marketing-compare-tag-muted { color: var(--marketing-muted); }

.marketing-compare-body {
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--marketing-ink);
}

.marketing-section-navy .marketing-compare-row { background: rgba(255, 255, 255, 0.04); }
.marketing-section-navy .marketing-compare-ours,
.marketing-section-navy .marketing-compare-theirs { background: rgba(255, 255, 255, 0.04); }
.marketing-section-navy .marketing-compare-body { color: #fff; }
.marketing-section-navy .marketing-compare-label { color: var(--marketing-muted-navy); }

@media (max-width: 720px) {
    .marketing-compare-row { grid-template-columns: 1fr; }
}

/* ---------- Flash ---------- */

.marketing-flash-wrap {
    max-width: 720px;
    margin: 20px auto 0;
    padding: 0 24px;
}

.marketing-flash-wrap .flash { max-width: none; margin: 0 0 8px; }

/* ---------- Footer ---------- */

.marketing-footer {
    background: var(--marketing-surface-navy);
    color: var(--marketing-muted-navy);
    padding: 3.5rem 0 1.5rem;
}

.marketing-footer .marketing-brand,
.marketing-footer .marketing-brand-dot {
    color: #fff;
}

.marketing-footer .marketing-brand-tail { color: var(--marketing-muted-navy); }

.marketing-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}

.marketing-footer-tagline {
    margin: 0.75rem 0 0;
    color: var(--marketing-muted-navy);
    font-size: 14px;
    max-width: 320px;
    line-height: 1.65;
}

.marketing-footer-heading {
    margin: 0 0 1rem;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.marketing-footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.marketing-footer-links a {
    color: var(--marketing-muted-navy);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.marketing-footer-links a:hover { color: var(--marketing-cta); }

.marketing-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--marketing-muted-navy);
    font-size: 12px;
    padding-top: 1.5rem;
    border-top: 1px solid var(--marketing-border-navy);
}

.marketing-footer-meta { color: var(--marketing-muted-navy); }

/* ---------- Auth pages (login / register / forgot / reset) ----------
   The auth layout reuses .marketing-form-wrap / .marketing-field / .marketing-btn
   from the marketing block above; these rules add only what the auth flow
   needs on top — vertical centering of the form card and a slightly smaller
   heading inside the card than the landing-page H1/H2. */

body.auth-body {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

body.auth-body .auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    padding: clamp(2rem, 6vh, 4rem) 0;
}

.marketing-form-wrap h1 {
    margin: 0 0 0.4rem;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--marketing-ink);
}

.marketing-form-sub {
    margin: 0 0 1.5rem;
    color: var(--marketing-text);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
    .marketing-hero-split { grid-template-columns: 1fr; }
    .marketing-hero-split .marketing-callout-preview { order: -1; }
    .marketing-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .marketing-plan-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
    .marketing-callout { grid-template-columns: 1fr; }
    .marketing-pricing-strip { flex-direction: column; align-items: flex-start; padding: 2rem; }
    .marketing-pricing-ctas { justify-content: flex-start; }
    .marketing-trust-grid { grid-template-columns: repeat(2, 1fr); }
    .marketing-how-grid { grid-template-columns: repeat(2, 1fr); }
    .marketing-valueprops { grid-template-columns: 1fr; }
    .marketing-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .marketing-nav-center { display: none; }
    .marketing-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .marketing-footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
}

@media (max-width: 640px) {
    .marketing-feature-grid { grid-template-columns: 1fr; }
    .marketing-field-row { grid-template-columns: 1fr; }
    .marketing-hero { padding: calc(var(--marketing-nav-height) + 1.5rem) 0 3rem; }
    .marketing-hero-compact { padding: calc(var(--marketing-nav-height) + 1rem) 0 2rem; }
    .marketing-section { padding: 3rem 0; }
    .marketing-form-wrap { padding: 1.5rem; }
    .marketing-brand-tail { display: none; }
    .marketing-hero-ctas { flex-direction: column; align-items: stretch; }
    .marketing-hero-ctas .marketing-btn { width: 100%; }
    .marketing-trust-grid { grid-template-columns: 1fr; }
    .marketing-how-grid { grid-template-columns: 1fr; }
    .marketing-prefooter-ctas { flex-direction: column; align-items: stretch; }
}

/* ---------- Scaffold page classes ----------
   Used by older form / show pages that don't fit the canonical
   .table-wrap / .stats-row layout. All sized at modal scale (480-720px
   centered column, 18px page title, 12-13px form labels) to match the
   .modal / .ve-field / .form-group conventions everywhere else. */

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}
.page-head .page-title,
h2.page-title {
    margin: 0 0 4px;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: var(--text-2xl);   /* reconciled with .record-title */
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.005em;
}
.page-head .page-subtitle,
p.page-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}
.page-head .page-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Modal-scale form page — same column width as .modal (480) / .modal-lg (720) */
.page-form {
    max-width: 480px;
    margin: 8px auto;
}
.page-form.is-wide { max-width: 720px; }

/* Show/detail page — full content width but modal-scaled type */
.page-show {
    max-width: 880px;
    margin: 8px auto;
}

/* Vertical form column. Used by ~14 scaffolds via class="form-stack".
   Bare <label>name <input/></label> children get .ve-field-style sizing
   automatically; no twig changes needed for fields that opt into this. */
.form-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 16px;
}
.form-stack > label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.form-stack > label > input,
.form-stack > label > select,
.form-stack > label > textarea,
.form-stack > input,
.form-stack > select,
.form-stack > textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.form-stack > label > input:focus,
.form-stack > label > select:focus,
.form-stack > label > textarea:focus,
.form-stack > input:focus,
.form-stack > select:focus,
.form-stack > textarea:focus {
    outline: none;
    border-color: var(--teal, #146cf3);
    background: var(--surface);
}
.form-stack > label > small,
.form-stack .field-hint {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
}
.form-stack .actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.form-stack > p.error,
.form-stack .field-error {
    margin: -8px 0 0;
    color: var(--danger, #ef4444);
    font-size: 11px;
    font-weight: 600;
}
/* Inline label (checkbox + label inline) */
.form-stack label.inline {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
}
/* Fieldset inside a form-stack */
.form-stack > fieldset {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.form-stack > fieldset > legend {
    padding: 0 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Key/value description list — used by show pages (contacts, vessels,
   management companies, tenants). Two-column grid: label | value. */
.kv {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 6px 16px;
    margin: 0 0 16px;
    font-size: 13px;
}
.kv dt {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.6;
}
.kv dd { margin: 0; color: var(--text); line-height: 1.5; }
.kv dd code { font-size: 12px; }

/* Muted utility */
.muted { color: var(--muted); font-size: 12px; }

/* Filter bar (used above tables in admin/audit) */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}
.filter-bar > input,
.filter-bar > select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    border-radius: 6px;
    font: inherit;
    font-size: 12px;
}
.filter-bar > input:focus,
.filter-bar > select:focus { outline: none; border-color: var(--teal); background: var(--surface); }

/* Action list (AI optimizer suggested actions, etc.) */
.action-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.action-list > li {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
}

/* Visitor journey timeline */
.journey-feed {
    list-style: none;
    padding: 0 0 0 16px;
    margin: 0;
    border-left: 2px solid var(--border);
}
.journey-feed > li {
    position: relative;
    padding: 8px 0 8px 12px;
    font-size: 13px;
    line-height: 1.5;
}
.journey-feed > li::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teal, #146cf3);
    border: 2px solid var(--bg);
}

/* Score pill (contacts/show) */
.score-pill {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(20, 108, 243, 0.12);
    color: var(--teal, #146cf3);
    border-radius: 100px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
}
/* Age pip (vessels/show) */
.age-pip {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success, #10B981);
    margin-right: 4px;
    vertical-align: middle;
}
/* Tags editor (contacts/show) */
.tags-editor { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag-x {
    margin-left: 4px;
    color: var(--muted);
    cursor: pointer;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 11px;
    padding: 0;
}
.tag-x:hover { color: var(--danger, #ef4444); }

/* --- App shell (top topbar + left nav) ---
   The authed shell uses a fixed-width left nav (`<aside class="app-nav">`)
   + a right column containing the topbar and <main>. The right column
   is shifted by `--nav-width` so the fixed nav never overlaps content.
   No overflow tricks anywhere on the body→main chain — the reference's
   CSS explicitly bans overflow:hidden / overflow-x:auto on ancestors of
   a sticky thead, and that's been re-broken three times. */
.app-shell-body.has-shell {
    --nav-width: 240px;
    padding-left: var(--nav-width);
    transition: padding-left 180ms ease;
}
.app-shell-body.has-shell.nav-collapsed { --nav-width: 64px; }

.app-shell-body.has-shell main {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 24px;
}

/* ===== LEFT NAV ===== */

.app-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--nav-width, 240px);
    background: var(--marketing-surface-navy, #0C1E35);
    color: #fff;
    display: flex;
    flex-direction: column;
    z-index: 110;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 180ms ease;
    font-family: var(--font-sans);
}
.app-shell-body.has-shell .app-nav { width: var(--nav-width); }

/* Brand block at top of nav */
.app-nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    height: 60px;
    text-decoration: none;
    color: #fff;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 18px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.app-nav-brand-mark { color: #fff; }
.app-nav-brand-dot { color: var(--marketing-cta, #146cf3); font-weight: 800; }
.app-nav-brand-tail { color: var(--marketing-muted-navy, #94A3B8); font-weight: 500; }

.app-shell-body.has-shell.nav-collapsed .app-nav-brand {
    padding: 0;
    justify-content: center;
}
.app-shell-body.has-shell.nav-collapsed .app-nav-brand-dot,
.app-shell-body.has-shell.nav-collapsed .app-nav-brand-tail { display: none; }

/* Collapse toggle */
.app-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 16px 4px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.55);
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    transition: background 120ms, color 120ms, border-color 120ms;
}
.app-nav-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.20);
    color: #fff;
}
.app-shell-body.has-shell.nav-collapsed .app-nav-toggle { margin-left: 8px; margin-right: 8px; }

/* Nav body — scrolls when content overflows */
.app-nav-body { flex: 1 1 auto; padding: 4px 0 12px; }

/* Section headings */
.app-nav-section {
    padding: 14px 20px 6px;
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.app-shell-body.has-shell.nav-collapsed .app-nav-section {
    padding: 0;
    margin: 12px 16px;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    color: transparent;
    overflow: hidden;
}

/* Section headers double as accordion toggles (they are <button>s). Styled to
   read clearly as clickable collapse controls: brighter text, a hover fill,
   and a chevron that rotates when the group is folded. */
.app-nav-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    background: none;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    color: #d8b06a;
    border-radius: 6px;
    margin-top: 2px;
    transition: color 0.12s ease, background 0.12s ease;
}
.app-nav-section:hover {
    color: #efc885;
    background: rgba(255, 255, 255, 0.06);
}
.app-nav-caret {
    margin-left: auto;
    font-size: 12px;
    line-height: 1;
    opacity: 0.85;
    transition: transform 0.15s ease;
}
.app-nav-section:hover .app-nav-caret { opacity: 1; }
.app-nav-section.is-collapsed .app-nav-caret { transform: rotate(-90deg); }
.app-nav-item.is-group-hidden { display: none !important; }
/* In icon-rail mode groups aren't collapsible — always show the icons. */
.app-shell-body.has-shell.nav-collapsed .app-nav-item.is-group-hidden { display: flex !important; }
/* In the icon-rail (nav-collapsed) mode the header is just a divider. */
.app-shell-body.has-shell.nav-collapsed .app-nav-section { pointer-events: none; }
.app-shell-body.has-shell.nav-collapsed .app-nav-caret { display: none; }

/* Nav items */
.app-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 20px 9px 17px;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    border-left: 3px solid transparent;
    transition: background 120ms, color 120ms, border-color 120ms;
    position: relative;
    white-space: nowrap;
    background: transparent;
    font-family: inherit;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    cursor: pointer;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}
.app-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}
.app-nav-item.active {
    color: var(--marketing-cta, #146cf3);
    background: rgba(20, 108, 243, 0.10);
    border-left-color: var(--marketing-cta, #146cf3);
}
.app-nav-item.is-roadmap { opacity: 0.55; }
.app-nav-item.is-roadmap:hover { opacity: 0.85; }

.app-nav-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    color: inherit;
}
.app-nav-icon svg { display: block; }

.app-nav-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-nav-badge {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    padding: 2px 6px;
    border-radius: 6px;
}
/* Numeric unread-count badge — red pill, not uppercase. Used for the Inbox
   nav line and any future per-item unread indicators. */
.app-nav-badge.app-nav-badge-count {
    background: #ef4444;
    color: #ffffff;
    text-transform: none;
    letter-spacing: 0;
    font-size: 10px;
    padding: 1px 7px;
    min-width: 18px;
    text-align: center;
    margin-left: auto;
}

/* Collapsed state: hide labels + badges, center icons, show CSS tooltip on hover */
.app-shell-body.has-shell.nav-collapsed .app-nav-label,
.app-shell-body.has-shell.nav-collapsed .app-nav-badge { display: none; }
.app-shell-body.has-shell.nav-collapsed .app-nav-item {
    padding: 10px 0;
    justify-content: center;
}
.app-shell-body.has-shell.nav-collapsed .app-nav-item:hover::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--marketing-surface-navy, #0C1E35);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0,0,0,0.30);
    z-index: 200;
    pointer-events: none;
}

/* Nav footer (account + sign-out, pinned to bottom) */
.app-nav-footer {
    margin-top: auto;
    padding: 8px 0 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ===== TOPBAR ADJUSTMENTS ===== */

.app-shell-body.has-shell .topbar { padding: 0 24px; }

.topbar-hamburger {
    display: none;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-size: 16px;
    margin-right: 12px;
    font-family: inherit;
    padding: 0;
}
.topbar-hamburger:hover { background: var(--surface-2); }

.topbar-search {
    flex: 1;
    max-width: 420px;
    margin-left: 12px;
    position: relative;
}
.topbar-search input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2, var(--bg));
    color: var(--text);
    font: inherit;
    font-size: 13px;
    outline: none;
}
.topbar-search input:focus {
    border-color: var(--teal, var(--marketing-cta));
    background: var(--bg);
}
.topbar-search::before {
    content: '⌕';
    position: absolute;
    left: 12px;
    top: 18px;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
}

/* ----- Topbar back nav ----- */
.topbar-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin-left: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    transition: background 100ms, color 100ms, border-color 100ms;
    flex-shrink: 0;
    white-space: nowrap;
}
.topbar-back:hover {
    background: var(--surface-2, var(--bg));
    color: var(--text);
    border-color: var(--teal, #146cf3);
}
.topbar-back-arrow { font-size: 14px; line-height: 1; }

@media (max-width: 768px) {
    .topbar-back-label { display: none; }
    .topbar-back { padding: 6px 10px; }
}

/* ----- Search panel ----- */
.topbar-search-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 360px;
    max-height: min(70vh, 540px);
    overflow-y: auto;
    background: var(--surface, #0C1E35);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 14px 32px rgba(0,0,0,0.35);
    z-index: 150;
    padding: 6px;
}
.topbar-search-panel[hidden] { display: none; }

.topbar-search-section {
    padding: 8px 10px 4px;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.topbar-search-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: background 80ms;
}
.topbar-search-result:hover,
.topbar-search-result.active {
    background: rgba(20, 108, 243, 0.12);
}
.topbar-search-result.active { outline: 1px solid rgba(20, 108, 243, 0.35); }

.topbar-search-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar-search-sublabel {
    font-size: 11px;
    color: var(--muted);
    flex: 0 1 auto;
    margin-left: auto;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-search-empty {
    padding: 14px 12px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

/* ===== RESPONSIVE ===== */

/* Auto-collapse to icon mode between 1024 and 1279 */
@media (max-width: 1279px) and (min-width: 1024px) {
    .app-shell-body.has-shell { --nav-width: 64px; }
    .app-shell-body.has-shell .app-nav-label,
    .app-shell-body.has-shell .app-nav-badge,
    .app-shell-body.has-shell .app-nav-brand-dot,
    .app-shell-body.has-shell .app-nav-brand-tail { display: none; }
    .app-shell-body.has-shell .app-nav-item {
        padding: 10px 0;
        justify-content: center;
    }
    .app-shell-body.has-shell .app-nav-section {
        padding: 0;
        margin: 12px 16px;
        height: 1px;
        background: rgba(255, 255, 255, 0.08);
        color: transparent;
        overflow: hidden;
    }
    .app-shell-body.has-shell .app-nav-brand { padding: 0; justify-content: center; }
}

/* Drawer mode at <1024 */
@media (max-width: 1023px) {
    .app-shell-body.has-shell { --nav-width: 0; padding-left: 0; }
    .app-nav {
        width: 260px;
        transform: translateX(-100%);
        transition: transform 200ms ease;
        box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    }
    /* When body has .nav-open, slide in */
    .app-shell-body.nav-open .app-nav { transform: translateX(0); }
    .app-shell-body.nav-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 105;
    }
    /* Force expanded layout inside the drawer regardless of nav-collapsed */
    .app-shell-body.has-shell .app-nav-label,
    .app-shell-body.has-shell .app-nav-badge { display: block; }
    .app-shell-body.has-shell .app-nav-brand-dot,
    .app-shell-body.has-shell .app-nav-brand-tail { display: inline; }
    .app-shell-body.has-shell .app-nav-item {
        padding: 9px 20px 9px 17px;
        justify-content: flex-start;
    }
    .app-shell-body.has-shell .app-nav-section {
        padding: 14px 20px 6px;
        margin: 0;
        height: auto;
        background: transparent;
        color: rgba(255, 255, 255, 0.35);
        overflow: visible;
    }
    .app-shell-body.has-shell .app-nav-brand { padding: 0 20px; justify-content: flex-start; }
    .topbar-hamburger { display: inline-flex; }
    .topbar-search { max-width: 220px; }
}

@media (max-width: 640px) {
    .topbar-search { display: none; }
}

.topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
    height: 60px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    position: sticky;
    top: 0;
    z-index: 100;
    font-family: var(--font-sans);
}

.topbar-brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.topbar-brand img { height: 32px; width: auto; display: block; }

.topbar-brand-text {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.5px;
    color: var(--text);
}

.topbar-tabs {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 4px;
    align-items: center;
}

.topbar-tab {
    color: var(--muted);
    text-decoration: none;
    padding: 18px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.topbar-tab:hover { color: var(--text); }

.topbar-tab.active {
    color: var(--teal);
    border-bottom-color: var(--teal);
}

.topbar-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-user {
    font-size: 12px;
    color: var(--muted);
}

.topbar-logout {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
}

.topbar-logout:hover {
    background: var(--surface2);
    border-color: var(--teal-25);
}

.sub-nav {
    display: flex;
    justify-content: center;
    gap: 0;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
}

.sub-nav-link {
    color: var(--muted);
    text-decoration: none;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.sub-nav-link:hover { color: var(--text); }

.sub-nav-link.active {
    color: var(--teal);
    border-bottom-color: var(--teal);
}

/* Full-width Website variant: each tab flex:1, uppercase 12px, transparent
   container — mirrors cloned .web-tab structure (vs the centered .mkt-tab
   chips that the default .sub-nav uses for Marketing). */
.sub-nav--full {
    justify-content: stretch;
    background: transparent;
    padding: 0;
}
.sub-nav--full .sub-nav-link {
    flex: 1;
    padding: 10px;
    font-size: 12px;
    letter-spacing: .5px;
    text-align: center;
    text-transform: uppercase;
}

/* =========================================================================
   YMS360-style component library
   --------------------------------------------------------------------------
   Mirrors the cloned-site CSS verbatim — same selector names, same values.
   The reference's CSS comment is load-bearing:
     "NO overflow:hidden or overflow-x:auto on any ancestor between thead
      and the body scroll container, otherwise sticky breaks. If the table
      needs horizontal scroll, use a media query or let it scroll the page."
   Don't reintroduce a .table-scroll wrapper. Don't add overflow:hidden to
   body, main, or .table-wrap. This bug has regressed multiple times.
   ========================================================================= */

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: 'Montserrat', var(--font-sans);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 16px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    transition: all .25s;
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
}
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background: var(--cta);
    color: var(--white);
    border-color: var(--cta);
}
.btn-primary:hover {
    background: var(--cta-hover);
    border-color: var(--cta-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(20, 108, 243, .35);
}

.btn-secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--teal); color: var(--teal); }

.btn-danger {
    background: var(--danger);
    color: var(--white);
    border-color: var(--danger);
}
.btn-danger:hover { filter: brightness(1.05); }

.btn-sm { font-size: 12px; padding: 5px 10px; }

/* Link-styled submit (used in inline role-set forms) */
.btn-link, button.link {
    background: none;
    border: none;
    color: var(--teal);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-decoration: underline;
}

/* ---------- Stat cards ---------- */

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

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    transition: transform .3s, box-shadow .3s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat-card .label {
    font-family: 'Montserrat', var(--font-sans);
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    font-weight: 600;
}
.stat-card .value {
    font-family: 'Montserrat', var(--font-sans);
    font-size: 28px;
    font-weight: 800;
    color: var(--teal);
    line-height: 1;
}

/* ---------- Table wrap + toolbar + tables ----------
   NO overflow on .table-wrap (see file-header note). Wide tables either
   wrap naturally (preferred — see metadata cells which use word-break) or
   scroll the page; either way, sticky thead keeps working. */

.table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    /* `clip` (not `hidden`) so the sticky thead still works — `clip` doesn't
       establish a new scroll container. Keeps thead/row backgrounds from
       painting over the panel's rounded corners. */
    overflow: clip;
}

/* Horizontal-scroll wrapper for tables wider than their panel (e.g. the
   campaigns history table with 11 columns). Used inside .table-wrap.
   - `width: max-content` defeats the global `table { width:100% }` so the
     table can grow past the panel and trigger the horizontal scrollbar.
   - `min-width: 100%` keeps short tables from looking unnaturally narrow.
   - The global sticky thead is dropped here: `overflow-x:auto` implicitly
     turns this into a sticky scroll context, so a `top:60px` offset paints
     the header 60px BELOW the scroll-container top — i.e. mid-rows. */
.table-scroll-x { overflow-x: auto; }
.table-scroll-x > table { width: max-content; min-width: 100%; }
.table-scroll-x thead { position: static; top: auto; }

.table-toolbar {
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
}
.table-toolbar h2,
.table-toolbar h3 {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    font-weight: 600;
}
.table-toolbar input,
.table-toolbar select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.table-toolbar input:focus,
.table-toolbar select:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-10);
}
.table-toolbar > input[type="text"],
.table-toolbar > input[type="search"] { width: 240px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead {
    background: var(--surface2);
    position: sticky;
    top: 60px;
    z-index: 5;
    box-shadow: 0 1px 0 var(--border);
}
th {
    padding: 10px 14px;
    text-align: left;
    color: var(--muted);
    font-family: 'Montserrat', var(--font-sans);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
td {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    vertical-align: middle;
}
tbody tr:hover { background: var(--surface2); }
tbody tr.clickable { cursor: pointer; }

/* legacy .data-table class still used by other admin views */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
    background: var(--surface2);
    color: var(--muted);
    text-align: left;
    padding: 10px 14px;
    font-family: 'Montserrat', var(--font-sans);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.data-table td { padding: 10px 14px; border-top: 1px solid var(--border); }

/* ---------- Tag / badge / role-chip ---------- */

.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 100px;
    font-family: 'Montserrat', var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    background: var(--teal-10);
    color: var(--teal);
    border: 1px solid var(--teal-25);
    margin: 1px 2px;
    letter-spacing: .02em;
}

.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 100px;
    font-family: 'Montserrat', var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.badge-active,
.badge-subscribed { background: rgba(16, 185, 129, .15); color: #34d399; border: 1px solid rgba(16, 185, 129, .25); }
.badge-imported   { background: var(--teal-10); color: var(--teal); border: 1px solid var(--teal-25); }
.badge-warning    { background: rgba(245, 158, 11, .15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, .25); }
.badge-danger     { background: rgba(239, 68, 68, .15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, .25); }

.role-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 100px;
    font-family: 'Montserrat', var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    background: rgba(220, 38, 38, .15);
    color: #fca5a5;
    border: 1px solid rgba(220, 38, 38, .3);
    margin: 1px 2px;
}

.vessel-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 100px;
    font-family: 'Montserrat', var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    background: rgba(16, 185, 129, .12);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, .25);
    margin: 1px 2px;
    cursor: pointer;
    text-decoration: none;
}
.vessel-chip:hover { background: rgba(16, 185, 129, .25); }

.mc-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 100px;
    font-family: 'Montserrat', var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    background: rgba(139, 92, 246, .12);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, .25);
    margin: 1px 2px;
    cursor: pointer;
    text-decoration: none;
}
.mc-chip:hover { background: rgba(139, 92, 246, .25); }

.vessel-chip.former,
.mc-chip.former { opacity: .5; text-decoration: line-through; }

/* Lead-score number + qualitative band label */
.score {
    font-family: 'Montserrat', var(--font-sans);
    font-weight: 800;
    font-size: 14px;
}
.score-cold { color: var(--danger); }
.score-warm { color: var(--amber); }
.score-hot  { color: var(--success); }

.score-label {
    font-family: 'Montserrat', var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: .06em;
    display: inline-block;
}
.score-label-cold { background: rgba(239, 68, 68, .15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, .25); }
.score-label-warm { background: rgba(245, 158, 11, .15); color: #fde68a; border: 1px solid rgba(245, 158, 11, .25); }
.score-label-hot  { background: rgba(16, 185, 129, .15); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, .25); }

/* Custom checkbox */
.cb { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }

/* Sortable column header indicator */
.sa { display: inline-block; width: 10px; color: var(--teal); font-size: 10px; }
th[data-sort] { cursor: pointer; user-select: none; transition: color .2s; }
th[data-sort]:hover { color: var(--teal); }

/* Selection / audience banner (bulk action awareness) */
.audience-banner {
    padding: 10px 16px;
    background: var(--teal-10);
    border: 1px solid var(--teal-25);
    border-radius: var(--radius-sm);
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--teal);
}
.audience-banner .audience-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Segmented control (subscribers/all toggle, etc.) */
.aud-mode {
    padding: 6px 14px;
    border: none;
    cursor: pointer;
    font-family: 'Montserrat', var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    background: none;
    color: var(--muted);
    transition: all .2s;
}
.aud-mode.active { background: var(--teal); color: #fff; }

/* ---------- Vessels — map sidebar + freshness pip ---------- */

.vessel-sidebar-tab {
    flex: 1;
    padding: 8px 6px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: 'Montserrat', var(--font-sans);
    font-size: 11px;
    letter-spacing: .5px;
    color: var(--muted);
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
}
.vessel-sidebar-tab:hover { color: var(--text); }
.vessel-sidebar-tab.active {
    color: var(--text);
    border-bottom-color: var(--teal);
}

.tracked-item,
.untracked-item {
    padding: 4px 6px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}
.tracked-item:hover,
.untracked-item:hover { background: var(--bg); color: var(--teal); }
.tracked-item.selected,
.untracked-item.selected { background: var(--teal-10); color: var(--teal); }

/* Coloured dot pip used in the Last Position cell. The band names match
   Vessel::positionAgeBand() — green / amber / red / unknown. */
.pos-pip {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.pos-pip-green   { background: #10B981; }
.pos-pip-amber   { background: #f59e0b; }
.pos-pip-yellow  { background: #f59e0b; }   /* alias for amber */
.pos-pip-red     { background: #ef4444; }
.pos-pip-unknown { background: #6b7280; }

/* =========================================================================
   Campaign Builder — three-column grid (Library | Canvas | Properties)
   with a fixed meta row on top and an action bar on the bottom. Mirrors
   the cloned-site CSS verbatim (only difference: token names).

   Note: overflow:hidden on .builder is intentional and *safe* here — there's
   no sticky thead inside this card. The anti-pattern comment near .table-wrap
   does not apply.
   ========================================================================= */

.builder {
    display: grid;
    grid-template-columns: 200px 1fr 240px;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    height: calc(100vh - 220px);
    min-height: 600px;
}

.builder-meta {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    margin-bottom: 0;
}
.builder-meta input,
.builder-meta select {
    flex: 1;
    min-width: 160px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
}
.builder-meta input:focus,
.builder-meta select:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-10);
}
.builder-meta > select { flex: 0 0 auto; }

/* New Campaign Details panel — labeled fields, warning banner, audience line. */
.builder-details {
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.builder-details-head h2 {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.builder-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.30);
    color: var(--text);
    font-size: 13px;
    flex-wrap: wrap;
}
.builder-warning strong { color: var(--amber, #f59e0b); }
.builder-field-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.builder-field {
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.builder-field .field-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.builder-field input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
}
.builder-field input[type="text"]:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-10);
}
.builder-from-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.builder-from-row select {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
}
.builder-audience-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px dashed var(--border);
    margin-top: 4px;
    padding-top: 12px;
}
.builder-audience-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
}
.builder-audience-count {
    font-weight: 700;
    color: var(--text);
    font-size: 13px;
}

/* ---------- Library (left column) ---------- */

.lib {
    border-right: 1px solid var(--border);
    background: var(--surface2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.lib-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
}
.lib-tab {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    color: var(--muted);
    font-family: 'Montserrat', var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: color .2s;
}
.lib-tab:hover { color: var(--text); }
.lib-tab.active {
    color: var(--teal);
    border-bottom: 2px solid var(--teal);
}
.lib-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}
.block-item {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    margin-bottom: 6px;
    cursor: grab;
    font-size: 12px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: border-color .2s, transform .2s, background .2s;
}
.block-item:hover {
    border-color: var(--teal);
    transform: translateX(2px);
    background: var(--teal-10);
}
.block-item:active { cursor: grabbing; }
.block-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.asset-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.asset-thumb {
    aspect-ratio: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: border-color .2s;
}
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-thumb:hover { border-color: var(--teal); }

.tpl-item {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    transition: border-color .2s;
}
.tpl-item:hover { border-color: var(--teal); }
.tpl-item .tpl-name { flex: 1; cursor: pointer; }
.tpl-del {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 14px;
    padding: 2px 6px;
    cursor: pointer;
    transition: color .2s;
}
.tpl-del:hover { color: var(--danger); }

/* ---------- Canvas (center column) ---------- */

.canvas-wrap {
    flex: 1;
    overflow-y: auto;
    background: var(--navy-3);
    padding: 24px;
}
.canvas {
    max-width: 600px;
    margin: 0 auto;
    background: var(--white);
    min-height: 400px;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-sm);
    overflow: hidden;
    color: #000;
}
.canvas-empty {
    padding: 80px 24px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    border: 2px dashed rgba(148, 163, 184, .3);
    margin: 24px;
    border-radius: var(--radius-md);
}
.canvas.drag-over { outline: 2px dashed var(--teal); }

.cv-block {
    position: relative;
    cursor: pointer;
    transition: outline .15s;
}
.cv-block.selected {
    outline: 2px solid var(--blue);
    outline-offset: -2px;
}
.cv-block:hover .cv-toolbar { opacity: 1; }
.cv-toolbar {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 2px;
    background: var(--cta);
    border-radius: var(--radius-sm);
    padding: 2px;
    opacity: 0;
    transition: opacity .15s;
    z-index: 10;
}
.cv-toolbar button {
    background: none;
    border: none;
    color: var(--white);
    width: 22px;
    height: 22px;
    font-size: 12px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.cv-toolbar button:hover { background: rgba(255, 255, 255, .2); }
.cv-block[contenteditable]:focus,
.cv-block [contenteditable]:focus {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}
.cv-block.drag-target-top    { border-top:    2px solid var(--teal); }
.cv-block.drag-target-bottom { border-bottom: 2px solid var(--teal); }

/* ---------- Brand tabs (above the canvas) ---------- */

.brand-tab-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 0 16px;
    background: var(--navy-3);
    flex-wrap: wrap;
}
.brand-tab {
    padding: 8px 24px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: 'Montserrat', var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    transition: all .2s;
    background: var(--surface2);
    color: var(--muted);
}
.brand-tab:hover { color: var(--text); }
.brand-tab.active {
    background: var(--teal);
    color: var(--white);
}
.brand-tab.active[data-brand="triton"]  { background: #0092FF; color: var(--white); }
.brand-tab.active[data-brand="yms360"]  { background: #10B981; color: var(--white); }

/* ---------- Properties panel (right column) ---------- */

.props {
    border-left: 1px solid var(--border);
    background: var(--surface2);
    overflow-y: auto;
    padding: 14px;
}
.props h4 {
    font-family: 'Montserrat', var(--font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    margin-bottom: 10px;
    font-weight: 700;
}
.props .pf { margin-bottom: 12px; }
.props .pf label {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 4px;
}
.props .pf input,
.props .pf select,
.props .pf textarea {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 12px;
    font-family: inherit;
    transition: border-color .2s;
}
.props .pf input:focus,
.props .pf select:focus,
.props .pf textarea:focus {
    border-color: var(--teal);
    outline: none;
}
.props .pf textarea { min-height: 60px; resize: vertical; }
.props .pf .row { display: flex; gap: 6px; }
.props .pf .row > * { flex: 1; }
.props-empty {
    color: var(--muted);
    font-size: 12px;
    text-align: center;
    padding: 32px 8px;
}

.swatches {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    margin-top: 6px;
}
.swatch {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1px solid var(--border);
    position: relative;
    transition: transform .15s, border-color .15s;
}
.swatch:hover {
    transform: scale(1.15);
    border-color: var(--teal);
}
.color-input { display: flex; align-items: center; gap: 6px; }
.color-input input[type="color"] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: none;
}
.color-input input[type="text"] { flex: 1; }

.btn-tiny {
    padding: 4px 8px;
    font-size: 11px;
    font-family: 'Montserrat', var(--font-sans);
    font-weight: 600;
    background: var(--cta);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .2s;
}
.btn-tiny:hover { background: var(--cta-hover); }

/* ---------- Builder bottom action toolbar ---------- */

.builder-bottom {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface2);
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    align-items: center;
}
.builder-bottom .btn { flex: 0 0 auto; }

/* ---------- Preview iframe (used inside .modal-lg) ---------- */

.preview-frame {
    width: 100%;
    height: 60vh;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #ffffff;
}

/* Audience banner above the builder-meta (visible only when audience selected) */
.audience-banner {
    padding: 10px 16px;
    background: var(--teal-10);
    border: 1px solid var(--teal-25);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--teal);
    gap: 12px;
}

/* ---------- Marketing Analytics — chart grid ---------- */
.chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    transition: transform .3s, box-shadow .3s;
}
.chart-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.chart-card h3 {
    font-family: 'Montserrat', var(--font-sans);
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.chart-card canvas { max-height: 280px; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
    .builder { grid-template-columns: 180px 1fr 220px; }
}
@media (max-width: 768px) {
    .builder {
        grid-template-columns: 1fr;
        height: auto;
    }
    .lib, .props { max-height: 240px; }
    .canvas-wrap { padding: 16px; }
    .chart-grid { grid-template-columns: 1fr; }
}

/* ---------- Forms ---------- */

/* ve-field: compact label+input used in modals and inline grid forms */
.ve-field { margin-bottom: 10px; }
.ve-field label {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 3px;
    font-family: 'Montserrat', var(--font-sans);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ve-field input,
.ve-field textarea,
.ve-field select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.ve-field input:focus,
.ve-field textarea:focus,
.ve-field select:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-10);
}

/* form-group: roomier label+input used in larger modal forms */
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block;
    font-family: 'Montserrat', var(--font-sans);
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-10);
}

/* Inline forms inside table rows (role <select>) */
form.inline { display: inline-flex; gap: 4px; align-items: center; margin-right: 6px; }
form.inline > select {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
}

/* ---------- Pagination ---------- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    border-top: 1px solid var(--border);
}
.pagination button,
.pagination a {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    transition: all .2s;
}
.pagination button:hover,
.pagination a:hover { border-color: var(--teal); color: var(--teal); }
.pagination button.active,
.pagination a.active { background: var(--cta); color: var(--white); border-color: var(--cta); }
.pagination button:disabled { opacity: .4; cursor: default; }
.pagination .page-info { font-size: 12px; color: var(--muted); margin: 0 8px; }

/* ---------- Modal overlay ----------
   IMPORTANT: shown via .active (matching the cloned site's JS contract).
   Do NOT rename to .open — public-facing modals use inline
   onclick="closeModal('id')" which expects the .active toggle. */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(7, 17, 30, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.modal-overlay.active { display: flex; }

.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
    width: 480px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
.modal-lg { width: 720px; }
.modal h2 {
    font-family: 'Montserrat', var(--font-sans);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}
.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* ---------- Flash ---------- */

.flash {
    border: 1px solid transparent;
    font-family: var(--font-sans);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
}
.flash-error { background: var(--error-bg); color: var(--error-fg); border-color: rgba(239, 68, 68, .3); }
.flash-info  { background: var(--info-bg); color: var(--info-fg); border-color: var(--teal-25); }
.app-shell-body.has-shell .flash {
    max-width: 1400px;
    margin: 12px auto 0;
    width: calc(100% - 48px);
}

/* =========================================================================
   Responsive — matches the cloned-site breakpoints (1024 / 768) and adds
   a 640 fallback so phones can still operate the toolbar.
   ========================================================================= */

@media (max-width: 1024px) {
    .stats-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .topbar-tab { padding: 18px 12px; }
}

@media (max-width: 768px) {
    .stats-row { grid-template-columns: 1fr 1fr; }
    .app-shell-body.has-shell main { padding: 16px; }
    .table-toolbar { gap: 8px; padding: 12px; }
    .table-toolbar > input[type="text"],
    .table-toolbar > input[type="search"] { width: 100%; }
    .modal { width: 95vw; }
    .topbar { gap: 12px; }
    .topbar-tabs { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
    .topbar-tab { white-space: nowrap; }
    thead { top: 60px; }
}

@media (max-width: 640px) {
    .stats-row { grid-template-columns: 1fr; }
    .app-shell-body.has-shell main { padding: 12px; }
    .table-toolbar { flex-direction: column; align-items: stretch; }
    .table-toolbar > * { width: 100%; }
    .topbar { padding: 0 12px; }
    .topbar-brand-text { font-size: 16px; }
}

/* ---------------------------- Vessel drawer ----------------------------
   Slide-in panel on the right edge. Populated by vessels.js after a click
   on the Leaflet popup's "View details" button.
*/
.drawer {
    position: fixed;
    top: 0;
    right: -560px;
    width: 520px;
    max-width: 100vw;
    height: 100vh;
    background: var(--surface, #fff);
    border-left: 1px solid var(--border, #e2e8f0);
    z-index: 1510;
    transition: right .3s ease;
    overflow-y: auto;
    box-shadow: -8px 0 30px rgba(0,0,0,.2);
    display: flex;
    flex-direction: column;
}
.drawer.open { right: 0; }
.drawer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    position: sticky;
    top: 0;
    background: var(--surface, #fff);
    z-index: 2;
}
.drawer-close {
    background: none;
    border: none;
    color: var(--muted, #94a3b8);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
}
.drawer-close:hover { color: var(--text, #1e293b); }
.drawer-body { padding: 16px; flex: 1; }
.drawer-section { margin-top: 18px; }
.drawer-section h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted, #94a3b8);
    border-bottom: 1px solid var(--border, #e2e8f0);
    padding-bottom: 4px;
    margin: 0 0 8px 0;
}
.ve-field { margin-bottom: 10px; }
.ve-field label {
    display: block;
    font-size: 11px;
    color: var(--muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 3px;
}
.ve-field input,
.ve-field textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 4px;
    background: var(--bg, #fff);
    color: var(--text, #1e293b);
    font-size: 13px;
    font-family: inherit;
}
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
}
.detail-item { font-size: 12px; }
.detail-item .dl {
    color: var(--muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10px;
    margin-bottom: 2px;
}
.detail-item .dv { color: var(--text, #1e293b); }
.vc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.vc-table td {
    padding: 5px 6px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    vertical-align: middle;
}
.vc-remove {
    background: none;
    border: none;
    color: var(--danger, #ef4444);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
}
.ac-results {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 4px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.ac-results > div {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
}
.ac-results > div:hover { background: var(--teal-10, rgba(20,108,243,.1)); }
.pos-pip { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.pos-pip-green { background: #10B981; }
.pos-pip-amber { background: #f59e0b; }
.pos-pip-red { background: #ef4444; }
.pos-pip-unknown { background: #6b7280; }
@media (max-width: 560px) {
    .drawer { width: 100vw; right: -100vw; }
}

/* ====================================================================
   Campaign builder — clone parity
   One canvas + brand-themed accent + WYSIWYG contenteditable blocks +
   floating per-block toolbar + right props panel.
   ==================================================================== */
.canvas {
    max-width: 600px;
    margin: 0 auto;
    background: #ffffff;
    min-height: 400px;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-sm);
    overflow: hidden;
    color: #000;
}
.canvas.drag-over { outline: 2px dashed var(--teal); }
.canvas-empty {
    padding: 80px 24px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    border: 2px dashed rgba(148,163,184,.3);
    margin: 24px;
    border-radius: var(--radius-md);
}

.cv-block {
    position: relative;
    cursor: pointer;
    transition: outline .15s;
}
.cv-block.selected { outline: 2px solid var(--blue); outline-offset: -2px; }
.cv-block:hover .cv-toolbar { opacity: 1; }
.cv-toolbar {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 2px;
    background: var(--cta);
    border-radius: var(--radius-sm);
    padding: 2px;
    opacity: 0;
    transition: opacity .15s;
    z-index: 10;
}
.cv-toolbar button {
    background: none;
    border: 0;
    color: #fff;
    width: 22px;
    height: 22px;
    font-size: 12px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.cv-toolbar button:hover { background: rgba(255,255,255,.2); }
.cv-block [contenteditable]:focus,
.cv-block[contenteditable]:focus {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}
.cv-block.drag-target-top    { border-top: 2px solid var(--teal); }
.cv-block.drag-target-bottom { border-bottom: 2px solid var(--teal); }

/* Templates gallery (Templates brand-tab) */
#templateGallery {
    padding: 16px;
    background: var(--navy-3, #102843);
}
#templateGalleryGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.tpl-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color .15s, transform .15s;
}
.tpl-card:hover { border-color: var(--teal); transform: translateY(-1px); }
.tpl-card strong { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; }
.tpl-card span { font-size: 11px; color: var(--muted); }

/* Text Only mode lives inside the same #canvas. The textarea sits in a
   white card matching the cv-block visual model. */
.canvas-textcard { padding: 24px; background: #fff; min-height: 400px; }
.canvas-textcard textarea {
    width: 100%;
    min-height: 360px;
    border: 0;
    outline: 0;
    resize: vertical;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #334155;
    line-height: 1.6;
    padding: 0;
    background: transparent;
}

/* Library: TEXT SNIPPETS panel (visible only when Text Only is active). */
.lib-section-head {
    padding: 10px;
    border-bottom: 1px solid var(--border);
}
.lib-section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
#lib-snippets { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#snippetList { flex: 1; overflow-y: auto; padding: 8px; }
.snippet-empty {
    color: var(--muted);
    font-size: 11px;
    text-align: center;
    padding: 24px 8px;
    line-height: 1.4;
}
.snippet-card {
    position: relative;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    cursor: pointer;
    transition: border-color .2s;
    font-size: 12px;
}
.snippet-card:hover { border-color: var(--teal); }
.snippet-name { font-weight: 600; margin-bottom: 2px; padding-right: 18px; }
.snippet-preview {
    color: var(--muted);
    font-size: 11px;
    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-line;
}
.snippet-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.snippet-delete:hover { color: var(--danger); }
.canvas-textarea {
    width: 100%;
    min-height: 480px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    resize: vertical;
    box-sizing: border-box;
}
.canvas-textarea:focus { outline: 2px solid var(--teal); outline-offset: -2px; }

.block-item { cursor: grab; }
.block-item:active { cursor: grabbing; }

/* =============================================================
   Record shell (CRM Phase 3)
   Shared layout for Contact / Company / Vessel / Opportunity show
   pages. Identity header + sticky left rail + tabbed main column.
   ============================================================= */
.record-shell {
    max-width: 1280px;
    margin: 12px auto;
    display: grid;
    gap: 16px;
}
.record-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.record-header-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.record-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--teal), #0c7d76);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.record-header-text { min-width: 0; }
.record-title {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--text-2xl);   /* reconciled with .page-title */
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.record-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.record-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.record-body {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 16px;
    align-items: flex-start;
}
@media (max-width: 900px) {
    .record-body { grid-template-columns: 1fr; }
    .record-rail { position: static; }
}

.record-rail {
    position: sticky;
    top: 76px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rail-block {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
}
.rail-block h4 {
    margin: 0 0 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.rail-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 12px;
    margin: 0;
    font-size: 13px;
}
.rail-kv dt {
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
}
.rail-kv dd {
    margin: 0;
    color: var(--text);
    overflow-wrap: anywhere;
}
.rail-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--text);
}
.rail-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
}

.record-main {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.record-tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    scrollbar-width: thin;
}
.record-tab {
    flex: 0 0 auto;
    padding: 12px 18px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}
.record-tab:hover { color: var(--text); }
.record-tab[data-active] {
    color: var(--text);
    border-bottom-color: var(--teal);
}
.record-tab-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.record-tab[data-active] .record-tab-count {
    background: rgba(13, 148, 136, 0.12);
    color: var(--teal);
    border-color: rgba(13, 148, 136, 0.25);
}

.record-pane { display: none; padding: 20px; }
.record-pane[data-active] { display: block; }
.record-pane > h3 {
    margin: 0 0 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
}
.record-pane > h3:not(:first-child) { margin-top: 28px; }
.record-pane .table-wrap { margin-bottom: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.record-pane .table-wrap + .table-wrap { margin-top: 12px; }

.record-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}
.record-empty strong { display: block; color: var(--text); margin-bottom: 4px; }

/* =============================================================
   Opportunities (CRM Phase 4)
   ============================================================= */
.kanban {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    gap: 12px;
    margin: 12px 0;
    overflow-x: auto;
    padding-bottom: 6px;
}
.kanban-col {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    min-height: 360px;
}
.kanban-col-head {
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.kanban-col-body {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 200px;
}
.kanban-col-body.drop-target { background: rgba(13, 148, 136, 0.06); }
.kanban-col-foot {
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg);
    font-size: 12px;
}
.kanban-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px;
    cursor: grab;
    transition: box-shadow 0.12s, transform 0.12s;
}
.kanban-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.kanban-card.dragging { opacity: 0.4; cursor: grabbing; }

/* =============================================================
   Activity composer (CRM Phase 5)
   ============================================================= */
.composer {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
}
.composer-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}
.composer-tab {
    padding: 5px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted);
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.composer-tab:hover { color: var(--text); }
.composer-tab[data-active] {
    color: var(--teal);
    background: rgba(13, 148, 136, 0.08);
    border-color: rgba(13, 148, 136, 0.25);
}
.timeline-item:last-child { border-bottom: none !important; }
.task-check { transition: background 0.12s, border-color 0.12s; }
.task-check:hover { background: var(--teal); border-color: var(--teal); }

/* =============================================================
   Sales reports + mobile polish (CRM Phase 7)
   ============================================================= */
.report-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 800px) {
    .report-stat-strip { grid-template-columns: repeat(2, 1fr); }
}
.report-stat {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
}
.report-stat-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.report-stat-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
    margin-bottom: 6px;
}
.report-stat-sub {
    font-size: 12px;
    color: var(--text);
}

/* Mobile polish for the record shell + list tables (CRM) */
@media (max-width: 640px) {
    .record-header { flex-direction: column; align-items: flex-start; }
    .record-header-actions { width: 100%; flex-wrap: wrap; }
    .record-title { white-space: normal; font-size: 19px; }
    .record-subtitle { white-space: normal; }
    .record-tabs { font-size: 11px; }
    .record-tab { padding: 10px 12px; }
    .page-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .page-actions { width: 100%; flex-wrap: wrap; }
    .table-wrap { overflow-x: auto; }
    .kanban { grid-auto-columns: minmax(220px, 80vw); }
}

/* ============================================================================
   UI SYSTEM (2026 standardization)
   Canonical components — see site/docs/APP_UI_GUIDE.md. Build new screens with
   these; do NOT hand-roll inline-styled inputs, headers, or empty states.
   ============================================================================ */

/* ---- Fields: the ONE form-control vocabulary (replaces .form-stack/.form-group/inline) ---- */
.field { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; }
.field-label {
    font-family: 'Montserrat', var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.field-label .req { color: var(--danger); margin-left: 2px; }
.field-control,
.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="date"],
.field input[type="datetime-local"],
.field input[type="password"],
.field input[type="search"],
.field select,
.field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: var(--field-pad-y) var(--field-pad-x);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.field textarea { resize: vertical; min-height: 76px; }
.field input:focus,
.field select:focus,
.field textarea:focus,
.field-control:focus {
    outline: none;
    border-color: var(--teal);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--teal-10);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .7; }
.field-help { font-size: var(--text-sm); color: var(--muted); font-weight: 400; }
.field-error { font-size: var(--text-sm); color: var(--error-fg); font-weight: 500; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--danger); }
.field-checkbox {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
}
.field-checkbox .field-label {
    text-transform: none;
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--text);
    letter-spacing: 0;
}
/* Two-up field grid; collapses to one column on phones */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

/* ---- Drawer: the ONE create/edit surface (replaces every create modal + /new page) ---- */
.uidrawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    justify-content: flex-end;
    background: rgba(3, 8, 16, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.uidrawer-overlay.active { opacity: 1; visibility: visible; }
.uidrawer {
    width: var(--drawer-w);
    max-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border-left: 1px solid var(--border);
    box-shadow: var(--drawer-shadow);
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.22,.61,.36,1);
}
.uidrawer-overlay.active .uidrawer { transform: translateX(0); }
.uidrawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.uidrawer-title {
    font-family: 'Montserrat', var(--font-sans);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}
.uidrawer-close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: color .15s, background .15s;
}
.uidrawer-close:hover { color: var(--text); background: var(--surface2); }
.uidrawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.uidrawer-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
body.uidrawer-open { overflow: hidden; }

/* Wide detail-drawer — fits a record_shell rail + main inside the slide-over. */
.uidrawer-overlay-wide .uidrawer { width: var(--drawer-w-wide); }
.uidrawer-overlay-wide .uidrawer-body { padding: 0; gap: 0; }

/* Record-shell collapses to single column inside any drawer (the panel is
   narrower than the rail+main breakpoint). Also drops the centered max-width
   so the content fills the drawer end-to-end. */
.uidrawer-overlay .record-shell { margin: 0; max-width: none; }
.uidrawer-overlay .record-body { grid-template-columns: 1fr; }
.uidrawer-overlay .record-rail { position: static; }

.uidrawer-header-actions { display: flex; align-items: center; gap: var(--space-2); }

/* ─── Tabbed audience modal ─── */
.modal.modal-xl { width: min(1100px, 95vw); max-width: 1100px; }
.aud-modal { display: flex; flex-direction: column; max-height: 86vh; padding: 0; }
.aud-modal-head {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.aud-modal-head h2 { margin: 0; font-size: 16px; }
/* Mode row: two pill-cards, the first is informational ("Subscribers — N")
   because subscribers are ALWAYS in the audience; the second is a real
   checkbox that widens the base to "All (excl. bounce/unsub)". */
.aud-mode-row { display: inline-flex; gap: 8px; }
.aud-mode-card {
    /* Explicit row direction — overrides the global `label` rule which
       would otherwise stack mark/label/count vertically. */
    display: inline-flex; flex-direction: row; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: var(--radius-sm);
    background: var(--surface2); border: 1px solid var(--border);
    font-size: 12px; color: var(--text); user-select: none;
}
.aud-mode-card--locked { background: var(--teal-10); border-color: var(--teal-25); color: var(--teal); cursor: default; }
.aud-mode-card--toggle { cursor: pointer; transition: border-color .15s, background .15s; }
.aud-mode-card--toggle:hover { border-color: var(--teal); }
.aud-mode-card--toggle input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.aud-mode-card-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%;
    background: transparent; border: 1.5px solid currentColor;
    color: var(--muted); font-size: 9px; line-height: 1;
}
.aud-mode-card--locked .aud-mode-card-mark { background: var(--teal); border-color: var(--teal); color: #fff; }
.aud-mode-card--toggle.is-checked { border-color: var(--teal); background: var(--teal-10); color: var(--teal); }
.aud-mode-card--toggle.is-checked .aud-mode-card-mark { background: var(--teal); border-color: var(--teal); color: #fff; }
.aud-mode-card--toggle.is-checked .aud-mode-card-mark::after { content: '✓'; }
.aud-mode-card-label { font-weight: 600; }
.aud-mode-card-count {
    font-family: 'Montserrat', sans-serif;
    background: var(--bg); border: 1px solid var(--border);
    padding: 1px 8px; border-radius: 100px; font-size: 11px; color: var(--text); font-weight: 700;
}
.aud-close {
    margin-left: auto; background: none; border: 0; color: var(--muted);
    font-size: 22px; cursor: pointer; padding: 0 4px;
}
.aud-modal-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 0; flex: 1; }
.aud-left { display: flex; flex-direction: column; border-right: 1px solid var(--border); min-height: 0; }
.aud-tabs { display: flex; gap: 2px; padding: 8px 8px 0; flex-shrink: 0; border-bottom: 1px solid var(--border); background: var(--surface2); }
.aud-tab {
    padding: 8px 12px; background: transparent; border: 0; border-bottom: 2px solid transparent;
    color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
}
.aud-tab.active { color: var(--text); border-bottom-color: var(--teal); }
.aud-tab-count {
    background: var(--surface); color: var(--muted); padding: 1px 6px;
    border-radius: 100px; font-size: 10px; font-weight: 700;
}
.aud-tab.active .aud-tab-count { background: var(--teal-10); color: var(--teal); }
.aud-pane { padding: 14px; overflow-y: auto; flex: 1; min-height: 0; }
.aud-search {
    width: 100%; padding: 8px 10px; margin-bottom: 10px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    border-radius: var(--radius-sm); font-size: 13px;
}
.aud-chip-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.aud-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 100px; font-size: 12px; font-weight: 600;
    border: 1px solid var(--border); background: var(--surface2); color: var(--text);
    cursor: pointer; font-family: inherit;
}
.aud-chip-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%;
    font-size: 10px; line-height: 1; color: var(--muted);
}
.aud-tag-chip[data-state="include"] { background: var(--teal-10); color: var(--teal); border-color: var(--teal-25); }
.aud-tag-chip[data-state="include"] .aud-chip-mark { color: var(--teal); }
.aud-tag-chip[data-state="exclude"] { background: rgba(239,68,68,0.10); color: var(--danger,#ef4444); border-color: rgba(239,68,68,0.30); }
.aud-tag-chip[data-state="exclude"] .aud-chip-mark { color: var(--danger,#ef4444); }
.aud-option-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.aud-option {
    display: flex; align-items: center; gap: 12px;
    padding: 4px 16px 4px 40px;   /* 40px left so checkbox column is indented */
    font-size: 13px; line-height: 1.4;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.aud-option:hover { background: var(--surface2); }
.aud-option:last-child { border-bottom: 0; }
.aud-option > label {
    /* `flex-direction: row` is explicit because the global `label` rule at
       the top of this file sets `flex-direction: column`, which would
       otherwise stack the checkbox ABOVE the name. */
    display: inline-flex; flex-direction: row; align-items: center; gap: 10px;
    flex: 1; min-width: 0; cursor: pointer; margin: 0;
    padding: 0; line-height: inherit;
}
.aud-option > label > input[type="checkbox"] {
    flex: 0 0 16px; width: 16px; height: 16px; margin: 0; accent-color: var(--teal);
    vertical-align: middle;
}
.aud-option-label {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text);
}
.aud-option.is-empty { opacity: 0.55; }
.aud-avail { font-size: 11px; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }

/* Search-results dropdown inside the Review tab — sits under the search
   input as a max-height-scrolled checkbox list. */
.aud-search-results {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
    max-height: 260px; overflow-y: auto;
    margin-top: 2px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
}
.aud-search-results .aud-option { padding-left: 16px; }
.aud-right { display: flex; flex-direction: column; min-height: 0; background: var(--surface2); }
.aud-right-head {
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; color: var(--text); flex-shrink: 0;
}
.aud-right-head strong { font-size: 18px; color: var(--text); margin-right: 4px; }
.aud-preview-list { list-style: none; margin: 0; padding: 4px; overflow-y: auto; flex: 1; min-height: 0; }
.aud-preview-row {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 16px 4px 40px;
    border-bottom: 1px solid var(--border);
    font-size: 12px; line-height: 1.4;
}
.aud-preview-row:hover { background: var(--surface); }
.aud-preview-row:last-child { border-bottom: 0; }
.aud-preview-row label {
    display: inline-flex; flex-direction: row; align-items: center; gap: 10px;
    flex: 1; min-width: 0; cursor: pointer; margin: 0; padding: 0;
}
.aud-preview-row label > input[type="checkbox"] {
    flex: 0 0 16px; width: 16px; height: 16px; margin: 0; accent-color: var(--teal);
}
.aud-preview-name { color: var(--text); font-weight: 600; }
.aud-preview-row.is-suppressed .aud-preview-name { color: var(--muted); text-decoration: line-through; }
.aud-suppress-reason {
    background: rgba(239,68,68,0.08); color: var(--danger,#ef4444);
    padding: 1px 8px; border-radius: 100px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
}
.aud-modal-foot {
    padding: 12px 18px; border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}

/* Admin sending-domains — DNS-records grid. 4 cols: type / name / value / ttl.
   Mono font on the parts the user copy-pastes into their DNS provider. */
.dns-records { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.dns-records-head, .dns-records-row {
    display: grid;
    grid-template-columns: 80px minmax(180px, 1fr) minmax(280px, 2fr) 80px;
    gap: 12px;
    padding: 8px 12px;
    align-items: center;
    font-size: 12px;
}
.dns-records-head { background: var(--surface2); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; }
.dns-records-row + .dns-records-row { border-top: 1px solid var(--border); }
.dns-mono { font-family: 'Menlo','Monaco',monospace; font-size: 11px; word-break: break-all; user-select: all; }

/* Inline role editor — chips with × remove + a dropdown / free-text input
   to add another role. Used in the contact drawer (vessels + companies tabs)
   and the company drawer Contacts tab. */
.role-editor { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 12px; }
.role-editor > strong { color: var(--muted); font-weight: 600; margin-right: 2px; }
.role-remove-form, .role-add-form { display: inline-flex; margin: 0; padding: 0; }
.role-chip-removable { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; }
.role-x {
    background: none; border: 0; padding: 0 2px;
    color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; line-height: 1;
}
.role-x:hover { color: var(--danger, #ef4444); }
.role-add-form select, .role-add-form input[type="text"] {
    padding: 3px 8px; font-size: 11px;
    border: 1px dashed var(--border); background: var(--surface2);
    color: var(--text); border-radius: 100px;
    max-width: 160px;
}

/* Rail block with inline-edit toggle (Identity on company drawer). */
.rail-block-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.rail-block-head h4 { margin: 0; }
.rail-block .link {
    background: none; border: 0; padding: 0;
    color: var(--link); font: inherit; font-size: 11px; cursor: pointer;
}
.rail-block .link:hover { color: var(--link-hover); text-decoration: underline; }

/* Companies index — Website pill. White card so the teal link stays legible
   on the navy table; opens in a new tab. */
.website-pill {
    display: inline-block;
    padding: 3px 10px;
    background: #fff;
    color: var(--teal);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid #d6deea;
}
.website-pill:hover { text-decoration: underline; }

/* Pinch the integer columns so Name + Notes get the breathing room. */
.companies-index-table th:nth-child(3),
.companies-index-table td:nth-child(3),
.companies-index-table th:nth-child(4),
.companies-index-table td:nth-child(4) { width: 1%; white-space: nowrap; }

/* Companies index — logo + name cell. Name white-bold to match the contact
   drawer treatment. */
.company-row-id { display: flex; align-items: center; gap: 10px; }
.company-row-logo {
    flex: 0 0 36px; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); overflow: hidden;
    background: var(--surface2); border: 1px solid var(--border);
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px;
    color: var(--muted);
}
.company-row-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.company-row-name { color: #fff; font-weight: 700; }

/* Logo variant of the .record-avatar (company drawer/show header). Replaces
   the gradient background with the actual logo image. */
.record-avatar-logo { background: var(--surface2); border: 1px solid var(--border); padding: 0; overflow: hidden; }
.record-avatar-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Linked-list — vessels/companies tabs on the contact drawer. White-bold
   names so they read on the navy panel; thumbs use the same circle as the
   vessel map dots (square variant for companies). */
.linked-list-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.linked-list-item:last-child { border-bottom: 0; }
.linked-thumb {
    flex: 0 0 56px; width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; overflow: hidden;
    background: var(--surface2); border: 1px solid var(--border);
    text-decoration: none;
}
.linked-thumb-square { border-radius: var(--radius-sm); }
.linked-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.linked-thumb-fallback {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px;
    letter-spacing: 0.04em; color: var(--muted);
}
.linked-body { flex: 1; min-width: 0; }
.linked-name {
    display: block;
    color: #fff; font-weight: 700; font-size: 15px;
    text-decoration: none; line-height: 1.2; margin-bottom: 4px;
}
.linked-name:hover { color: var(--teal); }
.linked-name-inline { display: inline; font-size: inherit; margin: 0; }
.linked-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); }
.linked-meta strong { color: var(--text); font-weight: 600; margin-right: 4px; }

/* Contact rail — chip groups (Tags / Companies / Vessels) and Activity panel. */
.rail-chips-label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.rail-chip-link {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 4px 4px 0;
    border-radius: 100px;
    font-size: 11px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}
.rail-chip-link:hover { border-color: var(--teal); color: var(--teal); }

/* Two-col activity panel — stats left, audit feed right. Collapses to single
   column under 520px so the standalone /contacts/{slug} rail still fits. */
.contact-activity-grid { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 520px) { .contact-activity-grid { grid-template-columns: 1fr; } }
.contact-activity-stats { display: flex; flex-direction: column; gap: 6px; }
.contact-activity-stats .stat-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 8px; background: var(--surface2); border-radius: var(--radius-sm); }
.contact-activity-stats .stat-label { font-size: 11px; color: var(--muted); }
.contact-activity-stats .stat-value { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; color: var(--text); }
.contact-activity-feed-label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.contact-activity-list { margin: 0; padding: 0; list-style: none; }
.contact-activity-list li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; line-height: 1.4; }
.contact-activity-list li:last-child { border-bottom: 0; }
.contact-activity-when { display: block; color: var(--muted); font-size: 10px; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.contact-activity-text a { color: var(--teal); text-decoration: none; }
.contact-activity-text a:hover { text-decoration: underline; }

/* Campaign drawer preview tab — iframe with srcdoc'd html_body. */
.campaign-preview-meta { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 12px; font-size: 12px; }
.campaign-preview-meta dl { margin: 0; }
.campaign-preview-frame { width: 100%; height: 560px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.campaign-preview-text { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; font-family: 'Menlo', 'Monaco', monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; max-height: 560px; overflow: auto; margin: 0; }

/* Repeatable alternate_emails[] inputs (forms.twig f.alt_emails_field). */
.alt-emails-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.alt-emails-row { display: flex; gap: 6px; align-items: center; }
.alt-emails-row input[type="email"] { flex: 1 1 auto; min-width: 0; }
.alt-emails-row [data-alt-emails-remove] { flex-shrink: 0; padding: 4px 10px; }

/* ---- Page header: the ONE list/detail header (replaces 3 conventions) ---- */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin: 0 0 var(--space-4);
}
.page-header-text { min-width: 0; }
.page-header-title {
    font-family: 'Montserrat', var(--font-sans);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    margin: 0 0 var(--space-1);
    letter-spacing: -0.005em;
}
.page-header-sub { font-size: var(--text-base); color: var(--muted); margin: 0; }
.page-header-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ---- Toolbar: the ONE filter/search bar (unifies .table-toolbar + .filter-bar) ---- */
.toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
}
.toolbar > form { display: contents; }
.toolbar input[type="search"],
.toolbar input[type="text"],
.toolbar select {
    padding: 6px var(--field-pad-x);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    height: var(--control-h);
    box-sizing: border-box;
}
.toolbar input[type="search"] { min-width: 240px; flex: 1 1 240px; max-width: 360px; }
.toolbar input:focus, .toolbar select:focus {
    outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-10);
}
.toolbar-spacer { margin-left: auto; }

/* ---- Empty state: the ONE empty (replaces 4 colspan idioms) ---- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    color: var(--muted);
}
.empty-state-glyph { font-size: 28px; color: var(--teal); opacity: .8; }
.empty-state-title { font-size: var(--text-md); font-weight: 600; color: var(--text); }
.empty-state-sub { font-size: var(--text-base); max-width: 380px; }
td.empty-state-cell { padding: 0; }
td.empty-state-cell .empty-state { padding: var(--space-6) var(--space-4); }

/* ---- Stat grid: the ONE stat strip ---- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
}

/* ---- Topbar global create ("+ New") ---- */
.topbar-create { position: relative; }
.topbar-create-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: var(--control-h);
    padding: 0 var(--space-3);
    background: var(--cta);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Montserrat', var(--font-sans);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.topbar-create-btn:hover { background: var(--cta-hover); }
.topbar-create-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1);
    z-index: 1100;
    display: none;
}
.topbar-create-menu.active { display: block; }
.topbar-create-menu a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
}
.topbar-create-menu a:hover { background: var(--surface2); color: var(--teal); }

/* ---- Standard breakpoints: 640 (phone) / 900 (tablet) / 1200 (desktop) ---- */
@media (max-width: 640px) {
    .uidrawer { width: 100%; }
    .field-row { grid-template-columns: 1fr; }
    .page-header { flex-direction: column; align-items: stretch; }
    .page-header-actions { width: 100%; }
    .toolbar input[type="search"] { max-width: none; }
    .topbar-create-btn .topbar-create-label { display: none; }
}

/* Drawer form is the flex column so body scrolls and footer pins to the bottom. */
.uidrawer > form, .uidrawer-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* Wiki — rendered markdown article body. Scoped to .wiki-article so global
   styles aren't affected. Inherits the platform color tokens. */
.wiki-article { max-width: 880px; line-height: 1.6; }
.wiki-article h1, .wiki-article h2, .wiki-article h3, .wiki-article h4 { color: var(--fg); margin-top: 1.6em; }
.wiki-article h1 { font-size: 1.6em; }
.wiki-article h2 { font-size: 1.3em; padding-bottom: 0.25em; border-bottom: 1px solid var(--border); }
.wiki-article h3 { font-size: 1.1em; }
.wiki-article p, .wiki-article ul, .wiki-article ol { margin: 0.9em 0; }
.wiki-article ul, .wiki-article ol { padding-left: 1.5em; }
.wiki-article li { margin: 0.25em 0; }
.wiki-article code { background: var(--surface2); padding: 0.1em 0.4em; border-radius: 3px; font-size: 0.92em; }
.wiki-article pre { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 12px 16px; overflow-x: auto; line-height: 1.45; }
.wiki-article pre code { background: transparent; padding: 0; font-size: 0.9em; }
.wiki-article blockquote { border-left: 3px solid var(--border); margin: 1em 0; padding: 0.2em 1em; color: var(--muted); }
.wiki-article table { border-collapse: collapse; margin: 1em 0; }
.wiki-article th, .wiki-article td { border: 1px solid var(--border); padding: 6px 12px; text-align: left; }
.wiki-article th { background: var(--surface); }
.wiki-article a { color: var(--teal, #5EEAD4); text-decoration: underline; }
.wiki-article hr { border: 0; border-top: 1px solid var(--border); margin: 1.6em 0; }
.wiki-related ul { margin: 0; padding-left: 1.2em; }
.wiki-related li { margin: 0.35em 0; }

/* Active/inactive row markers used in /sales/products and /sales/hooks lists.
   The colored inset on the first cell reads as a 4px left edge — clear at a
   glance without changing row height. Pair with .badge-active/.badge-inactive
   for the inline state pill. */
.sales-row > td:first-child { box-shadow: inset 4px 0 0 transparent; }
.sales-row-active   > td:first-child { box-shadow: inset 4px 0 0 #10b981; }
.sales-row-inactive > td:first-child { box-shadow: inset 4px 0 0 #ef4444; }
.badge-inactive { background: rgba(239, 68, 68, .15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, .25); }

/* Whole-row navigation: tr.clickable + data-href is handled in ui-behaviors.js.
   Cursor signals clickability; subtle hover background helps the target read. */
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: rgba(255, 255, 255, 0.03); }

/* AI subject-line generation progress (campaigns/ai_subjects.twig + ai-subjects.js) */
.ai-progress-track { width: 100%; max-width: 420px; height: 8px; background: rgba(255, 255, 255, 0.10); border-radius: 999px; overflow: hidden; }
.ai-progress-fill { height: 100%; width: 0; background: #3b82f6; border-radius: 999px; transition: width .35s ease; }
.ai-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.20); border-top-color: #3b82f6; border-radius: 50%; animation: ai-spin .7s linear infinite; vertical-align: middle; }
.ai-spinner[hidden] { display: none; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.subj-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #64748b; transition: background .2s ease; }
tr[data-state="done"] .subj-dot { background: #22c55e; }
tr[data-state="generating"] .subj-dot { background: #22c55e; animation: ai-pulse 1s ease-in-out infinite; }
@keyframes ai-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Subject cell: show the editable input once generated; show a Queued/Generating
   label until then. */
.subj-input { display: none; }
tr[data-state="done"] .subj-input { display: block; }
.subj-status { display: none; font-size: 13px; font-weight: 600; }
tr[data-state="pending"] .subj-status { display: inline-block; color: #94a3b8; }
tr[data-state="generating"] .subj-status { display: inline-block; color: #22c55e; animation: ai-pulse 1s ease-in-out infinite; }
/* Per-row signal picker (only rendered when a recipient's company has >1 signal). */
.signal-picker { display: block; margin-top: .35rem; max-width: 100%; font-size: 12px; color: #cbd5e1; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px; padding: .2rem .3rem; }
.signal-picker:disabled { opacity: .5; }

/* ============================================================
   YMS360 brand mark — matches cybersecurity.yms360.com
   Inline SVG wordmark (2 paths: #146cf3 "360", #181816 "YMS")
   + product suffix. Source: views/_partials/brand_mark.twig
   ============================================================ */
.brand-logo { width: auto; display: block; flex-shrink: 0; }
.marketing-header .brand-logo { height: 30px; }
.marketing-footer .brand-logo { height: 34px; }
.app-nav-brand   .brand-logo { height: 24px; }

/* "Engage" suffix — same treatment as cyber's "Cybersecurity" */
.brand-suffix {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    margin-left: 10px;
    color: #146cf3;
    white-space: nowrap;
    align-self: center;
    transform: translateY(-0.04em); /* optical center: "Engage" has no ascenders, so line-box centering sits it low */
}

/* Dark backgrounds: recolor the "YMS" path (last child) white, keep "360" blue */
.marketing-footer .brand-logo path:last-child,
.app-nav-brand   .brand-logo path:last-child { fill: #fff; }

/* App sidebar wordmark + compact square mark (for the collapsed rail) */
.app-nav-brand .app-nav-wordmark { display: inline-flex; align-items: center; }
.app-nav-brand .app-nav-mark { display: none; height: 26px; width: 26px; border-radius: 6px; flex-shrink: 0; }

/* Collapsed sidebar (manual toggle): swap wordmark -> compact mark */
.app-shell-body.has-shell.nav-collapsed .app-nav-brand .app-nav-wordmark { display: none; }
.app-shell-body.has-shell.nav-collapsed .app-nav-brand .app-nav-mark     { display: block; }

/* Auto-collapse rail (1024–1279px): same swap */
@media (max-width: 1279px) and (min-width: 1024px) {
    .app-shell-body.has-shell .app-nav-brand .app-nav-wordmark { display: none; }
    .app-shell-body.has-shell .app-nav-brand .app-nav-mark     { display: block; }
}

/* Drawer mode (<1024px) forces the full wordmark even when nav-collapsed */
@media (max-width: 1023px) {
    .app-shell-body.has-shell .app-nav-brand .app-nav-wordmark { display: inline-flex; }
    .app-shell-body.has-shell .app-nav-brand .app-nav-mark     { display: none; }
}

/* Hide the suffix on very small screens (mirrors cyber @ narrow) */
@media (max-width: 640px) {
    .marketing-header .brand-suffix { display: none; }
}