/* ============================================================
   Heropost — Website Mockup v2
   Aesthetic: cream canvas, black rounded sections, retro sunset
   stripe bands (matches the Heropost logo's rainbow edges).
   Buttons: compact, Framer-sized.
   Breakpoints: 810px (tablet/phone), 1200px (container cap)
   ============================================================ */

:root {
    --cream: #f7f7f8;        /* canvas: lightest gray, almost white */
    --cream-deep: #ededee;   /* footer + soft sections: one step deeper */
    --tan-card: #e9e9eb;     /* cards: light gray */
    --ink: #111110;
    --ink-dim: rgba(17, 17, 16, 0.65);
    --ink-faint: rgba(17, 17, 16, 0.42);
    --line-light: rgba(17, 17, 16, 0.1);

    --black: #0a0a0a;
    --dark-card: #1c1c1c;
    --paper: #fff;
    --paper-dim: rgba(255, 255, 255, 0.68);
    --paper-faint: rgba(255, 255, 255, 0.4);
    --line-dark: rgba(255, 255, 255, 0.09);

    --accent: #0166ff;            /* Heropost blue — CTA + highlight chips */
    --accent-tint: rgba(1, 102, 255, 0.1);
    --green: #1d9e6f;
    --green-tint: rgba(29, 158, 111, 0.12);

    /* Rainbow stripe bands (logo palette — Shaun's reference image)
       Cool set enters black from the top; warm set exits at the bottom. */
    --stripe-mint:   #a0f7b0;
    --stripe-sky:    #74b1fc;
    --stripe-blue:   #4759fa;
    --stripe-indigo: #3520f5;
    --stripe-red:    #d54c2b;
    --stripe-orange: #dd7a26;
    --stripe-gold:   #eec13a;
    --stripe-lime:   #e4fa62;
    --rainbow: linear-gradient(90deg,
        var(--stripe-mint), var(--stripe-sky), var(--stripe-blue), var(--stripe-indigo),
        var(--stripe-red), var(--stripe-orange), var(--stripe-gold), var(--stripe-lime));

    --nav-bg: rgba(247, 247, 248, 0.85);

    --radius-xl: 32px;
    --radius-lg: 20px;
    --radius-md: 12px;
    --radius-sm: 10px;
    --shadow-media: 0 30px 56px rgba(0, 0, 0, 0.18), 0 12px 24px rgba(0, 0, 0, 0.12);
    --ease: cubic-bezier(0.44, 0, 0.56, 1);
}

/* ---------- Dark theme (Ocoya-style day/night toggle) ----------
   The whole design system runs on variables, so dark mode just
   remaps the light-side tokens. Black sections stay black. */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] {
    --cream: #101012;
    --cream-deep: #16161a;
    --tan-card: #1d1d21;
    --ink: #f2f2f0;
    --ink-dim: rgba(242, 242, 240, 0.65);
    --ink-faint: rgba(242, 242, 240, 0.42);
    --line-light: rgba(255, 255, 255, 0.1);
    --nav-bg: rgba(16, 16, 18, 0.82);
    --accent-tint: rgba(1, 102, 255, 0.16);
    --green-tint: rgba(29, 158, 111, 0.2);
    --shadow-media: 0 30px 56px rgba(0, 0, 0, 0.55), 0 12px 24px rgba(0, 0, 0, 0.4);
}

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

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 76px; } /* anchor jumps clear the sticky nav */

body {
    background: var(--cream);
    color: var(--ink);
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    /* decorative elements (tilted cards, overhangs) may peek past the viewport — never let them cause horizontal scroll */
    overflow-x: clip;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- Typography ---------- */
h1, h2, h3 { font-weight: 500; color: var(--ink); }
h1 { font-size: clamp(36px, 5.5vw, 60px); letter-spacing: -0.04em; line-height: 1.02; }
h2 { font-size: clamp(28px, 3.8vw, 44px); letter-spacing: -0.04em; line-height: 1.1; }
h3 { font-size: 18px; letter-spacing: -0.01em; line-height: 1.35; }
p  { color: var(--ink-dim); }
.lead { font-size: 18px; line-height: 1.55; }
a { color: var(--accent); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: #007fd6; }

.eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-tint);
    padding: 5px 12px;
    border-radius: 100px;
    margin-bottom: 22px;
    letter-spacing: 0.01em;
}
/* Teal variant (Automations chip on dark) — brand green, lightened for contrast on black */
/* All eyebrow chips on dark backgrounds go bright teal */
.dark-section .eyebrow { color: #47ffaa; background: rgba(71, 255, 170, 0.14); }
/* Dark THEME: same logic — the whole canvas is dark, so blue chips flip to teal */
html[data-theme="dark"] .eyebrow { color: #47ffaa; background: rgba(71, 255, 170, 0.14); }

/* ---------- Buttons (compact — Framer-sized) ---------- */
.btn {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 7px;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s var(--ease), transform 0.2s var(--ease), filter 0.2s var(--ease);
    text-align: center;
    font-family: inherit;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover { color: var(--cream); }
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 4px 10px rgba(1, 102, 255, 0.25); }
.btn-accent:hover { color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(17,17,16,0.18); }
.btn-ghost:hover { color: var(--ink); background: rgba(17,17,16,0.05); }
.btn-lg { padding: 10px 22px; font-size: 14px; }

/* Buttons on dark sections (literal colors — black bands stay black in both themes) */
.dark-section .btn-primary { background: #f7f7f8; color: #111110; }
.dark-section .btn-primary:hover { color: #111110; }
.dark-section .btn-ghost { color: #f7f7f8; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.dark-section .btn-ghost:hover { color: #fff; background: rgba(255,255,255,0.08); }
/* Ghost button on dark canvas */
html[data-theme="dark"] .btn-ghost { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
html[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,0.08); }

/* ---------- Nav ---------- */
.nav {
    position: sticky; top: 0; z-index: 100;
    background: var(--nav-bg);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line-light);
}
.nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 60px;
}
.logo { display: inline-flex; align-items: center; }
.logo img { height: 30px; width: auto; display: block; }
.logo img.mark { height: 34px; }
.footer .logo img { height: 34px; }
.nav-links { display: flex; gap: 26px; align-items: center; list-style: none; }
.nav-links a { color: var(--ink-dim); font-size: 13.5px; font-weight: 500; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-cta { display: flex; gap: 10px; align-items: center; }
.nav-cta .login { color: var(--ink-dim); font-size: 13.5px; font-weight: 500; }
.nav-cta .login:hover { color: var(--ink); }
/* Day/night switch (Ocoya-style, in the nav) */
.theme-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: none; border-radius: 8px;
    background: transparent; color: var(--ink-dim); cursor: pointer;
    transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.theme-toggle:hover { color: var(--ink); background: var(--line-light); }
.theme-toggle svg {
    width: 17px; height: 17px;
    stroke: currentColor; fill: none; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.theme-toggle .tt-sun { display: none; }
html[data-theme="dark"] .theme-toggle .tt-sun { display: block; }
html[data-theme="dark"] .theme-toggle .tt-moon { display: none; }
.nav-toggle { display: none; }
.nav-toggle-label { display: none; cursor: pointer; width: 26px; height: 20px; position: relative; }
.nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after {
    display: block; background: var(--ink); height: 2px; width: 26px; border-radius: 2px;
    position: absolute; transition: transform 0.25s var(--ease);
}
.nav-toggle-label span { top: 9px; }
.nav-toggle-label span::before { content: ''; top: -8px; }
.nav-toggle-label span::after { content: ''; top: 8px; }

/* ---------- Sections ---------- */
.section { padding: 110px 0; }
.section.tight-bottom { padding-bottom: 55px; }
.section.tight-top { padding-top: 55px; }
.section-soft { background: var(--cream-deep); }
.section-tight { padding: 72px 0; }
.section-head { max-width: 640px; margin-bottom: 60px; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { margin-top: 16px; font-size: 17px; }

/* ---------- Rainbow stripe transition bands (Dessn mechanic, logo colors) ----------
   Stacked individual bands with an inset-shadow lip. Used ONLY where
   the canvas meets black. Entering a black section (top): cool set —
   mint → sky → blue → indigo, indigo touching the black.
   Exiting (bottom, .flip): warm set — red touching the black, then
   orange → gold → lime facing the canvas. */
.stripes {
    display: grid;
    grid-template-columns: 1fr;
    isolation: isolate;
    overflow: clip;
}
.stripes i {
    display: block;
    height: 24px;
}
.stripes i:nth-child(1) { background: var(--stripe-mint); }
.stripes i:nth-child(2) { background: var(--stripe-sky); }
.stripes i:nth-child(3) { background: var(--stripe-blue); }
.stripes i:nth-child(4) { background: var(--stripe-indigo); }
.stripes.flip i:nth-child(1) { background: var(--stripe-red); }
.stripes.flip i:nth-child(2) { background: var(--stripe-orange); }
.stripes.flip i:nth-child(3) { background: var(--stripe-gold); }
.stripes.flip i:nth-child(4) { background: var(--stripe-lime); }
.stripes.thin i { height: 14px; }

/* ---------- Dark sections (full-bleed black, stripe-bounded) ---------- */
.dark-section {
    background: var(--black);
    color: var(--paper-dim);
    padding: 110px 0;
}
.dark-section h1, .dark-section h2, .dark-section h3 { color: var(--paper); }
.dark-section p { color: var(--paper-dim); }

/* ---------- Hero ---------- */
.hero { padding: 88px 0 0; text-align: center; }
.hero .container { max-width: 1000px; }
.hero h1 { max-width: 820px; margin: 0 auto; }
.hero .lead { max-width: 560px; margin: 22px auto 30px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero-fine { margin-top: 14px; font-size: 13px; color: rgba(17, 17, 16, 0.55); }
html[data-theme="dark"] .hero-fine { color: rgba(255, 255, 255, 0.55); }
.hero-media {
    /* 14% wider than the 1200px container — breaks out symmetrically */
    margin-top: 64px;
    width: min(1368px, 100vw - 48px);
    margin-inline: calc((100% - min(1368px, 100vw - 48px)) / 2);
    /* dessn.ai treatment: box overhangs into the stripes + black band below */
    position: relative; z-index: 2;
    margin-bottom: -150px;
}
.hero-media .media-placeholder {
    border: 14px solid #0a0a0a;
    border-radius: 30px;
}

/* ---------- Dark/light mode comparison slider ---------- */
.mode-slider { position: relative; overflow: hidden; --pos: 50%; padding: 0; }
.mode-slider.tall { min-height: 0; aspect-ratio: 1842 / 960; }
.mode-pane { position: absolute; inset: 0; }
.mode-pane img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: top left;
    display: block;
}
.mode-dark { background: var(--black); }
.mode-light { background: #ffffff; clip-path: inset(0 0 0 var(--pos)); }
.mode-divider {
    position: absolute; top: 0; bottom: 0; left: var(--pos);
    width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none;
}
.mode-knob {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; box-shadow: 0 4px 12px rgba(1, 102, 255, 0.4);
}
.mode-range {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none;
}

/* ---------- Media placeholders (black product frames on cream) ---------- */
.media-placeholder {
    background: var(--black);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-media);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    min-height: 340px;
    color: var(--paper-faint);
    font-size: 14px;
    text-align: center;
    padding: 24px;
}
.media-placeholder .ph-icon { font-size: 32px; opacity: 0.6; }
.media-placeholder .ph-label { font-weight: 500; color: var(--paper-dim); }
.media-placeholder.tall { min-height: 548px; }
.media-placeholder.short { min-height: 260px; }
/* On black: bordered frame (Dessn video treatment) */
.dark-section .media-placeholder {
    background: var(--dark-card);
    box-shadow: none;
    border: 2px solid var(--stripe-sky);
}

/* ---------- Video embed ---------- */
.video-frame {
    max-width: 1080px; margin: 0 auto;
    aspect-ratio: 21 / 9; /* wide cinematic frame, matches the original site's embed */
    background: var(--black);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-media);
    overflow: hidden;
}
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Networks & integrations diagram ---------- */
.networks-section { text-align: center; padding: 160px 0 72px; } /* extra top room for the overhanging hero box */
.networks-title {
    font-size: clamp(26px, 3.4vw, 38px); font-weight: 500;
    letter-spacing: -0.03em; line-height: 1.35;
    max-width: 720px; margin: 0 auto 76px;
}
.networks-diagram {
    /* Sits outside .container — full-size diagram, centered in the viewport */
    width: min(1485px, 100vw - 48px); max-width: none; height: auto;
    display: block; margin: 0 auto;
}
.hl-accent {
    background: #47ffaa; color: #111110;
    padding: 2px 12px; border-radius: 7px;
    display: inline-block; line-height: 1.3;
}

/* ---------- Feature showcases ---------- */
.showcase {
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
    padding: 64px 0;
}
.showcase.flip .showcase-copy { order: 2; }
.showcase-copy h2 { margin-bottom: 16px; }
.showcase-copy p { font-size: 16px; margin-bottom: 14px; }
.showcase-copy ul { list-style: none; margin: 18px 0; }
.showcase-copy li { padding: 7px 0 7px 30px; position: relative; color: var(--ink-dim); font-size: 15px; }
.showcase-copy li::before {
    content: '✓'; position: absolute; left: 0; top: 7px;
    color: var(--green); background: var(--green-tint);
    width: 20px; height: 20px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.dark-section .showcase-copy li { color: var(--paper-dim); }
.showcase-link { font-weight: 500; font-size: 14px; }
.showcase-video, .showcase-img {
    width: 80%; height: auto; display: block;
    margin: 0 auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-media);
}

/* HeroAI layered screenshot composition (mirrors old heropost.ai homepage) */
.heroai-stack {
    position: relative;
    aspect-ratio: 2 / 3;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
}
.heroai-stack img {
    position: absolute; height: auto; display: block;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-media);
}
.heroai-stack .layer-1 { width: 58%; top: 0; left: 0; opacity: 0.6; }
.heroai-stack .layer-2 { width: 72%; top: 15%; left: 13%; opacity: 0.95; }
.heroai-stack .layer-3 { width: 62%; bottom: 0; right: 0; }

/* Workspaces layered composition (grid back-right, switch modal front top-left) */
.workspace-stack {
    position: relative;
    aspect-ratio: 10 / 11;
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
}
.workspace-stack img {
    position: absolute; height: auto; display: block;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-media);
}
.workspace-stack .layer-1 { width: 78%; right: 0; bottom: 0; opacity: 0.8; }
.workspace-stack .layer-2 { width: 52%; top: 0; left: 0; }

.accounts-stack {
    position: relative;
    aspect-ratio: 1 / 1.1;
    max-width: 448px;
    margin: 0 auto;
    width: 100%;
}
.accounts-stack img {
    position: absolute; height: auto; display: block;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-media);
}
.accounts-stack .layer-1 { width: 82%; top: 0; left: 0; opacity: 0.9; }
.accounts-stack .layer-2 { width: 54%; bottom: 0; right: 0; }

/* MonoLink phone presentation — dark panel layer tilted behind the phone */
.monolink-stack {
    position: relative;
    max-width: 340px;
    margin: 0 auto;
    width: 100%;
}
.monolink-stack::before {
    content: "";
    position: absolute;
    left: -22%; bottom: 4%;
    width: 126%; height: 40%;
    background: var(--dark-card);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-lg);
    transform: rotate(-7deg);
    box-shadow: var(--shadow-media);
}
.monolink-stack img {
    position: relative;
    width: 100%; height: auto; display: block;
    filter: drop-shadow(0 24px 48px rgba(17, 17, 16, 0.22));
}
.monolink-stats {
    position: relative;
    display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: 24px; row-gap: 2px;
    margin-bottom: 16px;
    font-size: 13.5px;
    color: var(--ink-dim);
}
.monolink-stats b { width: 100%; font-weight: 600; color: var(--ink); }
.monolink-stats span:last-child { margin-left: auto; }
.monolink-stats em { font-style: normal; font-weight: 600; color: var(--accent); }

/* Bulk/onboard/manage: copy and media stay inside a consistent inner column */
.col-bound .showcase-copy { max-width: 460px; width: 100%; justify-self: center; }

/* ---------- How it works steps ---------- */
/* ---------- Three-steps flow (ghost numerals, no cards) ---------- */
.steps-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.step-item { position: relative; padding-top: 8px; text-align: center; }
.step-ghost {
    display: block; font-size: 96px; font-weight: 700; line-height: 1;
    color: transparent; -webkit-text-stroke: 2.5px var(--line-light);
    margin-bottom: 18px;
}
.step-item .icon {
    width: 38px; height: 38px; border-radius: var(--radius-sm);
    background: var(--ink); color: var(--cream);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.step-item h3 { margin-bottom: 8px; }
.step-item p { font-size: 14px; line-height: 1.55; color: var(--ink-dim); }
.step-item::after {
    content: "\2192"; position: absolute; top: 34px; right: -34px;
    font-size: 22px; color: var(--accent);
}
.step-item:last-child::after { display: none; }
html[data-theme="dark"] .step-item::after { color: #47ffaa; }

/* ---------- Price comparison (them vs. us cards) ---------- */
.versus { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; max-width: 920px; margin: 0 auto; align-items: stretch; }
.vs-card { border-radius: var(--radius-lg); padding: 34px 34px 30px; }
.vs-them { background: var(--tan-card); }
.vs-them h3 { font-size: 18px; margin-bottom: 4px; color: var(--ink-dim); }
.vs-them .sub { font-size: 13px; color: var(--ink-faint); margin-bottom: 22px; }
.vs-card ul { list-style: none; display: flex; flex-direction: column; gap: 13px; font-size: 14px; }
.vs-them li { color: var(--ink-dim); display: flex; gap: 11px; align-items: baseline; }
.vs-them li::before { content: "\2717"; color: #c0553a; font-weight: 700; flex: none; }
.vs-them .fine { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-light); font-size: 12px; color: var(--ink-faint); }
.vs-us { background: #0a0a0a; color: #f7f7f8; box-shadow: var(--shadow-media); }
.vs-us h3 { font-size: 18px; color: #fff; margin-bottom: 4px; }
.vs-logo { display: block; height: 34px; width: auto; margin-bottom: 8px; }
.vs-us .sub { font-size: 13px; color: rgba(247, 247, 248, 0.55); margin-bottom: 22px; }
.vs-us li { color: rgba(247, 247, 248, 0.88); display: flex; gap: 11px; align-items: baseline; }
.vs-us li::before { content: "\2713"; color: #47ffaa; font-weight: 700; flex: none; }
.vs-us .price-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.vs-us .big { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.vs-us .big small { display: block; font-size: 12px; font-weight: 400; color: rgba(247, 247, 248, 0.5); margin-top: 2px; }
.vs-us .fine { margin-top: 16px; font-size: 12px; color: #47ffaa; }
.migrate-line { text-align: center; margin-top: 28px; color: var(--ink-dim); font-size: 14px; }

/* ---------- AI agents teaser (dark section, pricing) ---------- */
/* Section goes pure #000 so the GIF's baked-in black background disappears into it */
.agents-teaser { background: #000; }
/* GIF has generous black padding baked in — negative top margin only; keep air above the eyebrow */
.teaser-gif { display: block; width: 230px; height: auto; margin: -60px auto -12px; }
.teaser-cta { text-align: center; margin-top: 32px; }
.teaser-cta p { font-size: 13px; color: var(--paper-faint); margin-top: 14px; }

/* ---------- Official-API trust line ---------- */
.trust-line { text-align: center; font-size: 13px; color: var(--ink-faint); margin-top: 36px; }


/* ---------- Bento grid ---------- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bento.cols-4 { grid-template-columns: repeat(4, 1fr); }
.bento-card {
    background: var(--tan-card);
    border-radius: var(--radius-lg);
    padding: 26px;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.bento-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); }
.bento-card .icon {
    width: 38px; height: 38px; border-radius: var(--radius-sm);
    background: var(--ink); color: var(--cream);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; margin-bottom: 16px;
}
/* Brand-logo chip: white so official logo colors read correctly */
.bento-card .icon.brand { background: #fff; border: 1px solid var(--line-light); }
.bento-card .icon.brand img { width: 20px; height: 20px; display: block; }
/* Row of brand logos (e.g. all 11 networks) in place of a single chip */
.logo-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 16px; min-height: 38px; }
.logo-row img { width: 20px; height: 20px; display: block;
}
.bento-card h3 { margin-bottom: 8px; }
.bento-card p { font-size: 14px; line-height: 1.55; }
.bento-card.span-2 { grid-column: span 2; }
/* Dessn signature: light tan cards ON black */
.dark-section .bento-card { background: var(--tan-card); }
.dark-section .bento-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,0.4); }
.dark-section .bento-card h3 { color: var(--ink); }
.dark-section .bento-card p { color: var(--ink-dim); }
.dark-section .bento-card .icon { background: var(--ink); color: var(--cream); }
.dark-section .bento-card .icon.brand { background: #fff; }

/* ---------- Feature index rows (Variant D) + line-icon set ---------- */
.ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic.fill { fill: currentColor; } /* solid glyph (closed-path icons only, e.g. zap) */
.feature-rows { max-width: 880px; margin: 0 auto; }
.feature-row {
    display: grid; grid-template-columns: 46px 240px 1fr; gap: 24px; align-items: start;
    padding: 26px 8px; border-top: 1px solid var(--line-light);
}
.feature-row:last-child { border-bottom: 1px solid var(--line-light); }
.feature-row .icon {
    width: 38px; height: 38px; border-radius: var(--radius-sm);
    background: var(--ink); color: var(--cream);
    display: flex; align-items: center; justify-content: center;
}
.feature-row h3 { font-size: 17px; padding-top: 7px; }
.showcase-copy .icon,
.section-head .icon {
    width: 38px; height: 38px; border-radius: var(--radius-sm);
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.section-head.centered .icon { margin-left: auto; margin-right: auto; }
/* Icon chips on dark backgrounds go brand teal (matches .eyebrow.teal) */
.dark-section .section-head .icon { background: #47ffaa; color: #0a0a0a; }
/* Dark THEME: accent-blue icon chips flip to teal + black glyph everywhere */
html[data-theme="dark"] .showcase-copy .icon,
html[data-theme="dark"] .section-head .icon { background: #47ffaa; color: #0a0a0a; }
.soon-tag {
    display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
    background: rgba(1, 102, 255, 0.12); color: var(--accent);
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    vertical-align: 2px; white-space: nowrap;
}
.feature-row p { font-size: 14px; line-height: 1.55; color: var(--ink-dim); padding-top: 9px; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.stats.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; }
.stat h2 { font-size: clamp(32px, 4vw, 48px); }
.stat p { font-size: 14px; margin-top: 6px; }

/* ---------- Pricing hero (dark, crossed-out competitor invoices) ---------- */
.pricing-hero { padding: 84px 0 88px; }
.pricing-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.pricing-hero h1 { margin-top: 18px; }
.pricing-hero .hero-ctas { justify-content: flex-start; }
.invoice-stack { display: flex; flex-direction: column; gap: 12px; }
.invoice {
    display: flex; align-items: baseline; gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line-dark);
    border-radius: 10px;
    padding: 15px 18px;
}
.invoice .inv-name { font-size: 14px; font-weight: 600; color: var(--paper-dim); }
.invoice .inv-note { font-size: 12px; color: var(--paper-faint); margin-right: auto; }
.invoice .inv-amt { font-size: 16px; font-weight: 600; color: var(--paper-faint); }
.invoice s.inv-amt { text-decoration-color: #f43f5e; text-decoration-thickness: 2px; }
.invoice.paid { background: rgba(71, 255, 170, 0.08); border-color: rgba(71, 255, 170, 0.45); }
.invoice.paid .inv-name { color: var(--paper); }
.invoice.paid .inv-amt { font-size: 20px; font-weight: 700; color: #47ffaa; }

/* ---------- Pricing (3 lifetime tiers) — mirrors the in-app Checkout plan cards ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; max-width: 1040px; margin: 0 auto; }
.price-card {
    /* App tokens (light) */
    --pc-bg: #ffffff; --pc-line: #d1d1d6; --pc-t1: #1c1c1e; --pc-t2: #6b7280;
    position: relative; background: var(--pc-bg);
    border: 2px solid var(--pc-line); border-radius: 14px; padding: 26px 24px 24px;
    display: flex; flex-direction: column; text-align: left;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    transition: border-color 0.15s ease;
}
/* App tokens (dark) — dark theme, or the always-black pricing band */
html[data-theme="dark"] .price-card, .dark-section .price-card {
    --pc-bg: #26262a; --pc-line: #36363c; --pc-t1: #f4f4f5; --pc-t2: #9aa1ad;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.price-card:hover, .price-card.featured {
    border-color: transparent;
    background: linear-gradient(var(--pc-bg), var(--pc-bg)) padding-box,
        conic-gradient(from 210deg, #2dd4bf, #38bdf8, #8b5cf6, #ec4899, #f43f5e, #f59e0b, #2dd4bf) border-box;
}
.price-card .plan-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    font-size: 11px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap;
    color: var(--pc-t1); border-radius: 999px; padding: 3px 12px;
    border: 2px solid transparent;
    background: linear-gradient(var(--pc-bg), var(--pc-bg)) padding-box,
        conic-gradient(from 210deg, #2dd4bf, #38bdf8, #8b5cf6, #ec4899, #f43f5e, #f59e0b, #2dd4bf) border-box;
}
.price-card h3 { font-size: 15px; font-weight: 700; color: var(--pc-t1); }
.price-card .tagline { margin-top: 4px; font-size: 12.5px; color: var(--pc-t2); }
.price-card .price-row { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.price-card .price-was { font-size: 15px; font-weight: 500; color: var(--pc-t2); }
.price-card .price-amt { font-size: 38px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--pc-t1); }
.price-card .price-amt sup { font-size: 17px; font-weight: 600; position: relative; top: -14px; margin-right: 1px; }
.price-card .per { font-size: 13px; font-weight: 500; color: var(--pc-t2); }
.price-card .bill-note { margin-top: 5px; font-size: 12px; color: var(--pc-t2); }
.price-card .bill-note s { color: var(--pc-t2); }
.price-card .bill-note b { color: #16a34a; font-weight: 600; }
.plan-cta {
    margin-top: 18px; width: 100%; height: 40px; border-radius: 8px;
    font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    color: var(--pc-t1); cursor: pointer;
    border: 2px solid transparent;
    background: linear-gradient(var(--pc-bg), var(--pc-bg)) padding-box,
        conic-gradient(from 210deg, #2dd4bf, #38bdf8, #8b5cf6, #ec4899, #f43f5e, #f59e0b, #2dd4bf) border-box;
    transition: color 0.25s ease;
}
.plan-cta:hover {
    color: #fff;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)) padding-box,
        linear-gradient(115deg, rgba(45, 212, 191, 0.55), rgba(59, 130, 246, 0.5), rgba(139, 92, 246, 0.55), rgba(236, 72, 153, 0.55), rgba(245, 158, 11, 0.5)) padding-box,
        conic-gradient(from 210deg, #2dd4bf, #38bdf8, #8b5cf6, #ec4899, #f43f5e, #f59e0b, #2dd4bf) border-box;
}
.plan-cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.price-card ul { list-style: none; margin: 20px 0 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.price-card li { font-size: 13px; line-height: 1.35; color: var(--pc-t1); padding-left: 24px; position: relative; }
.price-card li::before {
    content: ''; position: absolute; left: 0; top: 1px; width: 15px; height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- FAQ ---------- */
.faq { max-width: 720px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line-light); padding: 4px 0; }
.faq summary {
    cursor: pointer; list-style: none;
    font-size: 16px; font-weight: 500; color: var(--ink);
    padding: 18px 32px 18px 0;
    position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    color: var(--ink-faint); font-size: 20px; font-weight: 300;
    transition: transform 0.2s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 18px; font-size: 15px; }
.dark-section .faq details { border-color: var(--line-dark); }
.dark-section .faq summary { color: var(--paper); }
.dark-section .faq summary::after { color: var(--paper-faint); }

/* ---------- Closing CTA (black, Dessn-style) ---------- */
.closing { text-align: center; padding: 140px 0; }
.closing h2 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 18px; }
.closing p { font-size: 17px; margin-bottom: 30px; }
/* Dual-path close: free signup vs lifetime deal */
.closing-paths {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    max-width: 860px; margin: 44px auto 0; text-align: left;
}
.path-card {
    background: var(--dark-card); border: 1px solid var(--line-dark);
    border-radius: var(--radius-lg); padding: 32px 30px;
}
.path-card h3 { font-size: 20px; color: var(--paper); margin-bottom: 8px; }
.path-card p { font-size: 14px; color: var(--paper-dim); margin-bottom: 22px; }
.path-card .btn { display: block; width: 100%; text-align: center; padding: 10px 22px; font-size: 14px; }
.path-card.hot { border-color: rgba(1, 102, 255, 0.45); box-shadow: 0 0 40px rgba(1, 102, 255, 0.12); }
.path-tag {
    display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: #6c9aff; background: rgba(1, 102, 255, 0.12); border: 1px solid rgba(1, 102, 255, 0.4);
    border-radius: 999px; padding: 4px 12px; margin-bottom: 14px;
}

/* ---------- Footer (cream, Dessn-style) ---------- */
.footer { border-top: 1px solid var(--line-light); padding: 64px 0 36px; background: var(--cream-deep); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 48px; }
.footer h4 { font-size: 12px; font-weight: 600; color: var(--ink-faint); margin-bottom: 14px; letter-spacing: 0.05em; text-transform: uppercase; }
.footer ul { list-style: none; }
.footer li { margin-bottom: 9px; }
.footer li a { color: var(--ink-dim); font-size: 14px; }
.footer li a:hover { color: var(--ink); }
.footer-brand p { font-size: 13px; color: var(--ink-faint); margin-top: 14px; max-width: 260px; }
.footer-bottom {
    border-top: 1px solid var(--line-light);
    padding-top: 24px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
    font-size: 13px; color: var(--ink-faint);
}
.footer-social { display: flex; gap: 16px; }
.footer-social a { color: var(--ink-faint); font-size: 13px; }
.footer-social a:hover { color: var(--ink); }
/* Icon variant (index footer): black brand SVGs in light square chips */
.footer-social.icons { gap: 10px; }
.footer-social.icons a {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: #fff; border: 1px solid var(--line-light);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.footer-social.icons a:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); }
.footer-social.icons img { width: 16px; height: 16px; display: block; }
html[data-theme="dark"] .footer-social.icons a { background: var(--tan-card); }
html[data-theme="dark"] .footer-social.icons img { filter: invert(1); }
.footer-address { font-size: 13px; color: var(--ink-faint); line-height: 1.75; margin-top: 16px; }

/* ---------- Legal pages (terms, privacy) ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 24px 0 72px; }
.legal .effective { font-size: 13px; color: var(--ink-faint); margin-bottom: 40px; }
.legal h2 { font-size: 22px; margin: 44px 0 14px; letter-spacing: -0.02em; }
.legal h3 { font-size: 16px; margin: 28px 0 10px; }
.legal p, .legal li { font-size: 14.5px; color: var(--ink-dim); line-height: 1.7; margin-bottom: 12px; }
.legal ul, .legal ol { padding-left: 22px; margin-bottom: 16px; }
.legal li { margin-bottom: 6px; }
.legal a { text-decoration: underline; }

/* ---------- Contact form spam filters ---------- */
/* Honeypot: visually removed but present in DOM for bots (not display:none — smarter bots skip those) */
.hp-field {
    position: absolute; left: -9999px; top: -9999px;
    height: 1px; width: 1px; overflow: hidden;
}

/* ---------- Reveal animation ----------
   Hidden state gated behind html.anim (added by a tiny inline <head> script)
   so no-JS visitors always see content. Homepage uses Motion (js/animate.js);
   other pages keep the CSS-transition + IntersectionObserver path (js/reveal.js). */
html.anim .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
html.anim .reveal.visible { opacity: 1; transform: none; }
html.anim .hero-seq { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    html.anim .reveal, html.anim .hero-seq { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: 80px 0 36px; }
.page-hero h1 { max-width: 760px; }
.page-hero .lead { max-width: 560px; margin-top: 20px; }

/* ---------- About page (ported from heropost.ai/about-us) ---------- */
.hero-users { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; }
.hero-users img { height: 44px; width: auto; display: block; }
.hero-users strong { display: block; font-size: 20px; line-height: 1.15; color: var(--ink); }
.hero-users span { font-size: 13px; color: var(--ink-dim); }
/* Hero: copy left, two-column photo masonry right (matches live about-us) */
.about-hero { padding-bottom: 64px; }
.about-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-hero-copy .lead { margin-top: 20px; }
.about-masonry { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.about-masonry .col { display: flex; flex-direction: column; gap: 20px; }
.about-masonry img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; display: block; }
.about-masonry .col:first-child img:first-child { aspect-ratio: 2 / 3; }
.about-masonry .col:last-child img:first-child { aspect-ratio: 3 / 2; }
.about-masonry .col:last-child img:last-child { aspect-ratio: 2 / 3; }
.statement { max-width: 920px; margin: 0 auto; text-align: center; }
.statement h2 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.18; }
.inline-emoji { width: 44px; height: 44px; vertical-align: -8px; margin: 0 4px; }
.inline-emoji.sm { width: 30px; height: 30px; vertical-align: -4px; margin-right: 8px; }
.mission-quote { margin: 30px auto 0; max-width: 660px; font-size: 19px; line-height: 1.6; color: var(--ink-dim); font-weight: 500; }
.about-portrait { border-radius: var(--radius-lg); overflow: hidden; max-height: 520px; }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* About closing — richer composition (scoped so homepage .closing is untouched) */
.about-closing { padding: 110px 0; }
.about-closing .eyebrow { margin-bottom: 24px; }
.about-closing h2 { margin-bottom: 8px; }
.about-closing .hero-users { margin: 26px auto 34px; }
.about-closing .hero-users div { text-align: left; }
.about-closing .hero-users strong { color: var(--paper); }
.about-closing .hero-users span { color: var(--paper-dim); }
.closing-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.about-closing .closing-fine { font-size: 13px; color: var(--paper-faint); margin: 26px 0 0; }

/* ---------- Forms ---------- */
.input {
    background: #fff; border: 1px solid var(--line-light); border-radius: 10px;
    padding: 12px 14px; color: var(--ink); font-size: 14px; font-family: inherit;
}

/* ---------- Automations: app-accurate AutomationElement card replicas ---------- */
.auto-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.auto-card {
    position: relative; background: #151517; border: 1px solid #2C2C2C;
    border-radius: 12px; padding: 22px;
}
.ac-top { display: flex; align-items: center; gap: 16px; }
.ac-avatar {
    position: relative; width: 66px; height: 66px; border-radius: 50%; flex: none;
    background: #0059FF; display: flex; align-items: center; justify-content: center;
}
.ac-avatar.dark { background: #26262A; }
.ac-initials { font-size: 20px; font-weight: 700; color: #fff; }
.ac-zap { width: 30px; height: 30px; fill: #FF6101; }
.ac-badge {
    position: absolute; right: -4px; bottom: -2px;
    width: 26px; height: 26px; border-radius: 7px;
    background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    display: flex; align-items: center; justify-content: center;
}
.ac-badge img { width: 16px; height: 16px; display: block; }
.ac-badge.rss { background: #FF6101; }
.ac-badge.rss svg { width: 16px; height: 16px; fill: #fff; }
.ac-info b { display: block; font-size: 16px; font-weight: 500; color: #fff; }
.ac-info span { display: block; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.6); margin-top: 2px; }
.ac-autopost { margin-left: auto; align-self: flex-start; font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.ac-autopost em { font-style: normal; color: #00FF0D; }
.ac-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; text-align: center; }
.ac-label { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.ac-val { display: block; font-size: 15px; font-weight: 600; margin-top: 2px; }
.ac-val.ok { color: #1b8a2a; }
.ac-val.warn { color: #ffa726; }
.ac-val.err { color: #FF003D; }
.ac-btn {
    display: block; margin-top: 15px; padding: 8px 0;
    font-size: 12.5px; font-weight: 500; border-radius: 8px;
    background: #26262A; color: #fff;
}
.ac-btn.primary { background: #0059FF; }
/* integration catalog: 11 live + 6 coming soon (app AutomationCatalogCard tokens) */
.auto-note { font-size: 14px; color: var(--paper-dim); margin: 34px 0 16px; }
.auto-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.ai-tile {
    display: flex; align-items: center; gap: 10px;
    background: #151517; border: 1px solid #2C2C2C;
    border-radius: 12px; padding: 11px 13px;
}
.ai-tile.soon { opacity: 0.65; }
.ai-ic {
    width: 34px; height: 34px; border-radius: 8px; flex: none;
    background: #fff; display: flex; align-items: center; justify-content: center;
}
.ai-ic img { width: 20px; height: 20px; display: block; }
.ai-ic.rss { background: #FF6101; }
.ai-ic.rss svg { width: 20px; height: 20px; fill: #fff; }
.ai-name { font-size: 13px; font-weight: 500; color: #fff; margin-right: auto; }
.ai-badge {
    font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
    background: #8b8fa3; color: #fff; border-radius: 4px; padding: 2px 6px; flex: none;
}
.ai-badge.new { background: #4361ee; }

/* ---------- Teams & clients (dark band, Ocoya-style feature cards) ---------- */
.teams-band .section-head.centered h2 { color: var(--paper); }
.role-chips { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.role-chip {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-dark);
    border-radius: 999px; padding: 8px 18px 8px 8px;
    font-size: 13.5px; color: var(--paper-dim);
}
.role-chip b { color: var(--paper); font-weight: 600; }
.role-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff;
}
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.team-card {
    background: var(--dark-card); border: 1px solid var(--line-dark);
    border-radius: var(--radius-lg); padding: 34px 26px 0;
    text-align: center; display: flex; flex-direction: column; overflow: hidden;
}
.team-card h3 { font-size: 22px; color: var(--paper); margin-bottom: 10px; }
.team-card p { font-size: 14px; color: var(--paper-dim); line-height: 1.55; margin-bottom: 14px; }
.team-card .card-cta {
    display: inline-block; font-size: 14px; font-weight: 500;
    color: var(--paper); margin-bottom: 28px;
}
.team-card .card-cta span { color: var(--accent); margin-left: 2px; }
.team-card-media {
    margin: auto 0 0; min-height: 300px;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 24px 0 0;
}

/* ---------- Invite Profile modal (pure-CSS recreation of the in-app dialog)
   App tokens (dark): dialog #101010 / 2px #2C2C2C / r10; labels mint #00FFC2;
   primary #0059FF; input border rgba(255,255,255,.23) r8 — see InviteProfileDialog.tsx + theme.ts ---------- */
.invite-modal {
    width: 80%; max-width: 440px; margin: 0 auto;
    background: #101010;
    border: 2px solid #2C2C2C;
    border-radius: 10px;
    padding: 22px 22px 18px;
    box-shadow: var(--shadow-media);
    text-align: left;
}
.invite-modal .im-title { font-size: 16px; font-weight: 600; color: #fff; }
.invite-modal .im-field {
    position: relative; height: 50px;
    display: flex; align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.23); border-radius: 8px;
    padding: 0 14px; margin-top: 22px;
}
.invite-modal .im-field.im-focus { border: 2px solid #0059FF; padding: 0 13px; }
.invite-modal .im-label {
    position: absolute; top: -8px; left: 10px;
    padding: 0 5px; background: #101010;
    font-size: 12px; font-weight: 500; line-height: 1.2; color: #00FFC2;
}
.invite-modal .im-placeholder { font-size: 14px; color: rgba(255, 255, 255, 0.55); }
.invite-modal .im-inner { font-size: 14px; color: #00FFC2; }
.invite-modal .im-actions { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 22px; }
.invite-modal .im-btn { font-size: 13px; font-weight: 600; border-radius: 8px; padding: 9px 18px; }
.invite-modal .im-cancel { color: #fff; }
.invite-modal .im-send { color: #fff; background: #0059FF; padding: 9px 26px; }
.team-card-media .invite-modal {
    width: 100%; max-width: 460px; margin: 0;
    border-radius: 10px 10px 0 0; border-bottom: none; box-shadow: none;
}

/* ---------- Team-card UI mocks (coded, app-accurate: panel #151517 / #2C2C2C, secondary text 60% white) ---------- */
.team-card-media .tc-mock {
    width: 100%; max-width: 460px;
    background: #151517; border: 1px solid #2C2C2C; border-bottom: none;
    border-radius: 10px 10px 0 0; padding: 20px 20px 14px; text-align: left;
}
/* guest view: single-brand post feed + purple GUEST badge (Dashboard.css .db-plan-badge.guest) */
.gm-head { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid #2C2C2C; }
.gm-avatar {
    width: 34px; height: 34px; border-radius: 8px; flex: none;
    background: #3cb371; color: #0a0a0a; font-size: 14px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.gm-meta b { display: block; font-size: 14px; color: #fff; }
.gm-meta span { font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.gm-pill {
    margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: #a78bfa; background: rgba(167, 139, 250, 0.1); border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 6px; padding: 3px 10px;
}
.gm-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #232326; font-size: 13px; }
.gm-row:last-child { border-bottom: none; }
.gm-day { color: rgba(255, 255, 255, 0.6); width: 32px; flex: none; }
.gm-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.gm-post { color: #e8e8ea; margin-right: auto; }
.gm-time { color: rgba(255, 255, 255, 0.6); }
/* approvals: app card = preview (thumb+title+snippet) over footer (meta + actions) — Team.css .tm__approval-* */
.tc-mock.am-wrap { background: none; border: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.am-card { background: #151517; border: 1px solid #2C2C2C; border-radius: 12px; overflow: hidden; text-align: left; }
.am-card:last-child { border-radius: 12px 12px 0 0; border-bottom: none; }
.am-preview { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.am-thumb { width: 44px; height: 44px; border-radius: 8px; flex: none; overflow: hidden; background: #2C2C2C; }
.am-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.am-body { margin-right: auto; min-width: 0; }
.am-body b { display: block; font-size: 13.5px; font-weight: 500; color: #fff; }
.am-body span { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-chip { font-size: 11px; font-weight: 500; border-radius: 12px; padding: 4px 10px; flex: none; }
.am-chip.ok { color: #4ade80; background: rgba(34, 197, 94, 0.12); }
.am-chip.pend { color: #fbbf24; background: rgba(251, 191, 36, 0.12); }
.am-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 16px; border-top: 1px solid #2C2C2C; background: rgba(255, 255, 255, 0.02);
}
.am-meta { font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.am-btns { display: flex; gap: 8px; }
.am-btn { font-size: 12px; font-weight: 500; border-radius: 6px; padding: 6px 14px; }
.am-btn.reject { color: #fff; border: 1px solid rgba(255, 255, 255, 0.23); }
.am-btn.approve { color: #fff; background: #22C55E; }
/* feed comments panel — Feed.css .fd-comment-*: bg #161618, mint avatars, "Say something…" input */
.tc-mock.cm-mock { background: #161618; }
/* post media being commented on — full-bleed sliver that fades into the panel */
.cm-media {
    height: 70px; margin: -20px -20px 6px; border-radius: 9px 9px 0 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
}
.cm-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.cm-input-row { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.cm-avatar {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    background: rgba(0, 255, 194, 0.09); color: #00FFC2;
    font-size: 9px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.cm-avatar.me { width: 28px; height: 28px; background: #00FFC2; color: #0D0D0F; font-size: 10px; }
.cm-placeholder { font-size: 12.5px; color: rgba(255, 255, 255, 0.5); margin-right: auto; }
.cm-send { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #00FFC2; }
.cm-send svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cm-comment { display: flex; gap: 9px; padding-top: 14px; }
.cm-head { display: flex; align-items: baseline; gap: 6px; }
.cm-head b { font-size: 12px; font-weight: 600; color: #fff; }
.cm-head span { font-size: 11px; color: rgba(255, 255, 255, 0.6); }
.cm-body p { font-size: 12.5px; line-height: 1.45; color: #fff; margin-top: 2px; }

/* ---------- Integrations logo cloud (white badges on dark) ---------- */
.logo-cloud {
    display: flex; flex-direction: column; align-items: flex-start; gap: 26px;
    width: 100%; padding: 10px 0 46px; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: logo-marquee 48s linear infinite; }
.marquee-track.reverse { animation-direction: reverse; }
.marquee-group { display: flex; gap: 22px; padding-right: 22px; }
@keyframes logo-marquee { to { transform: translateX(-50%); } }
.logo-cloud:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
.logo-dot {
    position: relative; flex: none;
    width: 64px; height: 64px; border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 8px 20px rgba(0, 0, 0, 0.45);
    transition: transform 0.2s var(--ease);
}
.logo-dot:hover { transform: translateY(-3px) scale(1.04); }
.logo-dot img { width: 30px; height: 30px; object-fit: contain; display: block; }
.logo-dot img.wide { width: 42px; } /* wordmark-style logos (Canva) need extra width to stay legible */
.logo-dot::after {
    content: attr(data-name);
    position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    background: var(--dark-card); border: 1px solid var(--line-dark);
    color: #f7f7f8; font-size: 12px; white-space: nowrap;
    padding: 5px 10px; border-radius: 8px;
    opacity: 0; pointer-events: none; transition: opacity 0.15s var(--ease);
    z-index: 2;
}
.logo-dot:hover::after { opacity: 1; }
.logo-dot.soon::before {
    content: ""; position: absolute; top: 3px; right: 3px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 2px var(--black);
}

/* ---------- AI agent template cards (inside teaser band) ---------- */
.agent-cards {
    /* 6-track grid, cards span 2 → 3 per row; 4th card offset so the last 2 sit centered */
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
    max-width: 780px; margin: 32px auto 0; text-align: left;
}
.agent-card { grid-column: span 2; }
.agent-card:nth-child(4) { grid-column: 2 / span 2; }
.agent-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-md); padding: 20px;
}
.agent-card .icon {
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
}
.agent-card .icon .ic { width: 16px; height: 16px; }
.agent-card h3 { font-size: 15px; color: var(--paper); margin-bottom: 6px; }
.agent-card p { font-size: 13px; color: var(--paper-dim); line-height: 1.5; margin: 0; }

/* ---------- Card footer link (personas → pricing) ---------- */
.bento-card .card-link { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 500; }

/* ---------- Dark-canvas refinements (theme = dark) ---------- */
html[data-theme="dark"] .input { background: var(--tan-card); }
html[data-theme="dark"] .section .media-placeholder { border: 1px solid var(--line-dark); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
    .bento, .bento.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 810px) {
    .section, .dark-section { padding: 68px 0; }
    .hero { padding: 52px 0 0; }
    .hero-media { margin-top: 44px; margin-bottom: -90px; }
    .hero-media .media-placeholder { border-width: 10px; border-radius: 22px; }
    .networks-section { padding-top: 110px; }
    .showcase { grid-template-columns: 1fr; gap: 32px; padding: 44px 0; }
    .showcase.flip .showcase-copy { order: 0; }
    .bento, .bento.cols-4 { grid-template-columns: 1fr; }
    .bento-card.span-2 { grid-column: span 1; }
    .steps-flow { grid-template-columns: 1fr; gap: 36px; }
    .step-item::after { display: none; }
    .about-hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .about-masonry { gap: 12px; }
    .about-masonry .col { gap: 12px; }
    .about-masonry img { border-radius: 12px; }
    .inline-emoji { width: 30px; height: 30px; vertical-align: -6px; }
    .inline-emoji.sm { width: 24px; height: 24px; }
    .team-grid { grid-template-columns: 1fr; }
    .team-card-media { min-height: 220px; }
    .auto-preview { grid-template-columns: 1fr; }
    .auto-catalog { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .logo-cloud { gap: 18px; }
    .marquee-group { gap: 14px; padding-right: 14px; }
    .logo-dot { width: 52px; height: 52px; }
    .logo-dot img { width: 24px; height: 24px; }
    .logo-dot img.wide { width: 34px; }
    .agent-cards { grid-template-columns: 1fr; }
    .agent-card, .agent-card:nth-child(4) { grid-column: auto; }
    .versus { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .pricing-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .invite-modal { width: 100%; }
    .feature-row { grid-template-columns: 46px 1fr; }
    .feature-row p { grid-column: 2; padding-top: 0; }
    .pricing-grid { grid-template-columns: 1fr; }
    .closing { padding: 88px 0; }
    .closing-paths { grid-template-columns: 1fr; }
    .media-placeholder { min-height: 240px; }
    .media-placeholder.tall { min-height: 300px; }
    /* mode-slider sizes itself by aspect-ratio — a min-height here would force it wider than the viewport */
    .media-placeholder.tall.mode-slider { min-height: 0; }
    .stripes i { height: 16px; }
    .stripes.thin i { height: 10px; }

    /* Mobile nav */
    .nav-toggle-label { display: block; }
    .nav-links, .nav-cta .login { display: none; }
    .nav-toggle:checked ~ .nav-links {
        display: flex; flex-direction: column; gap: 0;
        position: absolute; top: 60px; left: 0; right: 0;
        background: var(--cream); border-bottom: 1px solid var(--line-light);
        padding: 8px 20px 16px;
    }
    .nav-toggle:checked ~ .nav-links li { width: 100%; }
    .nav-toggle:checked ~ .nav-links a {
        display: block; padding: 13px 0; font-size: 15px;
        border-bottom: 1px solid var(--line-light);
    }
}