:root {
    --ink: #17211f;
    --body: #4d5b57;
    --muted: #70807b;
    --line: #dfe7e4;
    --bg: #fbfaf6;
    --surface: #ffffff;
    --surface-alt: #eef6f2;
    --brand: #166f64;
    --brand-strong: #10574e;
    --brand-soft: #dff2ed;
    --warn: #b45309;
    --warn-soft: rgba(217, 119, 6, .14);
    --danger: #b91c1c;
    --danger-soft: rgba(220, 38, 38, .12);
    --accent: #c76f3a;
    --accent-soft: #fff0e6;
    --warning: #b7791f;
    --ok: #16835f;
    --shadow: 0 16px 42px rgba(23, 33, 31, .12);
    --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --max: 1120px;
}

:root[data-theme="dark"] {
    --ink: #edf4f1;
    --body: #bdcbc7;
    --muted: #8fa19c;
    --line: #263834;
    --bg: #101716;
    --surface: #16211f;
    --surface-alt: #132a27;
    --brand: #4fc0a9;
    --brand-strong: #79d3c1;
    --brand-soft: #173b35;
    --warn: #fbbf24;
    --warn-soft: rgba(251, 191, 36, .16);
    --danger: #fca5a5;
    --danger-soft: rgba(252, 165, 165, .14);
    --accent: #f0a064;
    --accent-soft: #392719;
    --shadow: 0 18px 48px rgba(0, 0, 0, .36);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --ink: #edf4f1;
        --body: #bdcbc7;
        --muted: #8fa19c;
        --line: #263834;
        --bg: #101716;
        --surface: #16211f;
        --surface-alt: #132a27;
        --brand: #4fc0a9;
        --brand-strong: #79d3c1;
        --brand-soft: #173b35;
        --warn: #fbbf24;
        --warn-soft: rgba(251, 191, 36, .16);
        --danger: #fca5a5;
        --danger-soft: rgba(252, 165, 165, .14);
        --accent: #f0a064;
        --accent-soft: #392719;
        --shadow: 0 18px 48px rgba(0, 0, 0, .36);
    }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--sans);
    color: var(--body);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--ink); font-weight: 700; line-height: 1.12; margin: 0; letter-spacing: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
.muted { color: var(--muted); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background .16s, border-color .16s, color .16s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-strong); }
.btn-ghost { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-strong); }
.btn-lg { min-height: 50px; padding: 13px 22px; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 18px; min-height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; }
.brand-mark { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.brand-mark svg, .brand-mark img { width: 32px; height: 32px; display: block; }
.brand-name { font-size: 19px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 24px; font-size: 15px; font-weight: 600; }
.nav a:not(.btn) { color: var(--body); }
.nav a:not(.btn):hover { color: var(--ink); }
.icon-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .theme-toggle .i-sun { display: none; }
    :root[data-theme="auto"] .theme-toggle .i-moon { display: block; }
}
.menu-toggle { display: none; }
.mobile-nav { display: none; }

.hero {
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-alt) 62%, transparent), transparent 72%),
        var(--bg);
}
.hero-inner {
    min-height: 78vh;
    padding: 86px 28px 68px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 470px);
    gap: 58px;
    align-items: center;
}
.hero-copy { max-width: 620px; }
.eyebrow, .section-kicker {
    display: inline-flex;
    width: fit-content;
    color: var(--brand-strong);
    background: var(--brand-soft);
    border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 18px;
}
:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .section-kicker { color: var(--brand-strong); }
.hero h1 { font-size: 60px; max-width: 660px; }
.lede { margin-top: 22px; max-width: 610px; font-size: 20px; color: var(--body); }
.hero-cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 18px 0 0;
    padding: 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    list-style: none;
}
.hero-benefits li { display: inline-flex; align-items: center; gap: 7px; }
.hero-benefits li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

.product-shot {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.product-shot img {
    display: block;
    width: 100%;
    height: auto;
    background: #f4f6fb;
}
.product-shot figcaption {
    padding: 13px 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    background: color-mix(in srgb, var(--surface) 86%, var(--surface-alt));
}
.section { padding: 92px 0; }
.section-alt { background: var(--surface-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-title { text-align: center; max-width: 780px; margin: 0 auto; font-size: 42px; }
.section-sub { max-width: 660px; margin: 16px auto 0; text-align: center; color: var(--muted); font-size: 18px; }
.center { margin-left: auto; margin-right: auto; }
.split-section { display: grid; grid-template-columns: .82fr 1.18fr; gap: 58px; align-items: start; }
.split-section h2 { font-size: 40px; }
.pain-grid { display: grid; gap: 18px; }
.pain-grid article, .feature-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 24px;
}
.pain-grid h3, .feature-card h3 { font-size: 20px; margin-bottom: 9px; }
.pain-grid p, .feature-card p { color: var(--body); }
.workflow-grid, .grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.step-n { display: block; color: var(--accent); font-weight: 800; font-size: 13px; margin-bottom: 14px; }
.industry-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.industry-card {
    border-top: 3px solid var(--accent);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 24px;
}
.industry-card h3 { color: var(--ink); font-size: 20px; margin-bottom: 9px; }
.industry-card p { color: var(--body); }

.cta-band { background: #16322d; color: #d9ebe6; }
.cta-inner { text-align: center; padding: 82px 28px; }
.cta-inner .section-kicker { color: #dff7f0; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }
.cta-band h2 { color: #fff; max-width: 720px; margin: 0 auto; font-size: 42px; }
.cta-band p:not(.section-kicker) { max-width: 620px; margin: 16px auto 28px; color: #bdd1cb; font-size: 18px; }
.cta-band .btn-primary { background: #fff; color: #16322d; }
.cta-band .btn-primary:hover { background: #e7f1ee; }

.cta-subnote {
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--muted);
}
.cta-band .cta-subnote {
    color: #bdd1cb;
}

/* FAQ Section */
.faq-grid { max-width: 820px; margin: 48px auto 0; display: grid; gap: 14px; }
.faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px 20px;
    transition: border-color .16s, box-shadow .16s;
}
.faq-item[open] { border-color: var(--brand); box-shadow: var(--shadow); }
.faq-item summary {
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    font-size: 20px;
    color: var(--brand);
    font-weight: 400;
    transition: transform .16s;
}
.faq-item[open] summary::after {
    content: "\2212";
}
.faq-content { margin-top: 12px; color: var(--body); font-size: 15px; border-top: 1px solid var(--line); padding-top: 12px; }

.site-footer { border-top: 1px solid var(--line); background: var(--surface); }
.footer-inner { display: flex; align-items: center; gap: 20px; padding: 30px 28px; flex-wrap: wrap; }
.footer-inner .muted { margin-left: auto; font-size: 14px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 18px; font-size: 14px; font-weight: 700; }
.footer-links a { color: var(--body); }
.footer-links a:hover { color: var(--brand-strong); }

@media (max-width: 980px) {
    .hero-inner { grid-template-columns: 1fr; min-height: auto; padding-top: 72px; }
    .hero-copy { max-width: 760px; }
    .product-shot { max-width: 476px; }
    .split-section { grid-template-columns: 1fr; gap: 32px; }
    .workflow-grid, .grid, .industry-grid, .blog-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    .wrap { padding: 0 22px; }
    .nav { display: none; }
    .menu-toggle { display: inline-flex; margin-left: auto; }
    .mobile-nav.open { display: flex; }
    .mobile-nav { flex-direction: column; gap: 4px; padding: 14px 22px 22px; border-bottom: 1px solid var(--line); background: var(--bg); }
    .mobile-nav a:not(.btn) { padding: 11px 0; color: var(--body); font-weight: 700; }
    .mobile-nav .btn { justify-content: center; margin-top: 8px; }
    .hero-inner { padding: 58px 22px 54px; gap: 36px; }
    .hero h1 { font-size: 42px; }
    .lede { font-size: 18px; }
    .hero-cta .btn { width: 100%; }
    .hero-benefits { display: grid; gap: 8px; }
    .section { padding: 68px 0; }
    .section-title, .split-section h2, .cta-band h2, .blog-hero h1, .blog-article h1 { font-size: 32px; }
    .workflow-grid, .grid, .industry-grid, .blog-grid { grid-template-columns: 1fr; }
    .footer-inner { flex-direction: column; align-items: flex-start; }
    .footer-inner .muted { margin-left: 0; }
}

.blog-hero { padding: 86px 0 68px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--surface-alt) 62%, transparent), transparent 72%), var(--bg); }
.blog-hero h1 { max-width: 720px; font-size: 54px; }
.blog-hero p:not(.section-kicker) { max-width: 620px; margin-top: 18px; color: var(--body); font-size: 20px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.blog-card { padding: 26px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.blog-card h2 { margin: 8px 0 12px; font-size: 24px; }
.blog-card h2 a:hover, .text-link:hover, .article-next a:hover { color: var(--brand-strong); }
.blog-card p:not(.blog-meta) { color: var(--body); }
.blog-meta { color: var(--brand-strong); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.text-link { display: inline-block; margin-top: 18px; color: var(--brand); font-weight: 800; }
.blog-article { max-width: 820px; margin: 0 auto; padding: 78px 28px; }
.blog-article article { max-width: 720px; }
.blog-article h1 { margin: 12px 0 22px; font-size: 52px; }
.blog-article h2 { margin-top: 42px; font-size: 28px; }
.blog-article p { margin-top: 16px; color: var(--body); font-size: 18px; }
.blog-article .article-lede { color: var(--ink); font-size: 22px; line-height: 1.5; }
.article-cta { margin-top: 42px !important; }
.article-next { padding-top: 22px; border-top: 1px solid var(--line); font-size: 16px !important; }
.article-next a { color: var(--brand); font-weight: 700; }

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

@media (max-width: 720px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-hero { padding: 58px 0 54px; }
    .blog-article { padding: 58px 22px; }
    .blog-article h2 { font-size: 25px; }
}

/* Contact ------------------------------------------------------------------ */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 28px;
    max-width: 980px;
    margin: 40px auto 0;
    align-items: start;
}
.contact-form {
    /* Positioned so the off-screen honeypot is measured against this box rather than the viewport,
       where left:-9999px would push the page wider than the screen. */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px;
}
.contact-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.contact-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.contact-field em { font-weight: 400; color: var(--muted); font-style: normal; }
.contact-field input,
.contact-field textarea {
    font: inherit;
    font-weight: 400;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 10px 12px;
    width: 100%;
}
.contact-field textarea { resize: vertical; min-height: 120px; }
.contact-field input:focus,
.contact-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22, 111, 100, .15); }
.contact-form .btn { align-self: flex-start; }
.contact-note { margin: 0; font-size: 14px; color: var(--muted); }
.contact-note[data-state="error"] { color: #b3261e; }
.contact-note[data-state="sent"] { color: var(--brand-strong); font-weight: 600; }

/* Off-screen rather than display:none — some bots skip anything not rendered. */
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-aside { padding: 6px 4px; }
.contact-aside h3 { font-size: 14px; margin: 0 0 4px; }
.contact-aside h3 + p { margin: 0 0 20px; color: var(--muted); font-size: 15px; }
.contact-aside a { color: var(--brand-strong); font-weight: 600; }

@media (max-width: 860px) {
    .contact-grid { grid-template-columns: minmax(0, 1fr); }
    .contact-row { grid-template-columns: minmax(0, 1fr); }
}

/* Engagement options ------------------------------------------------------- */
.engagement-card { display: flex; flex-direction: column; }
.engagement-tag {
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface-alt);
    border: 1px solid var(--line);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--muted);
}
.engagement-card p { flex: 1; }
.engagement-link { display: inline-block; margin-top: 16px; font-weight: 700; color: var(--accent); }
.engagement-link:hover { text-decoration: underline; }
.engagement-note { margin: 28px auto 0; max-width: 660px; text-align: center; color: var(--muted); font-size: 15px; }

/* The interest picker sits with the text inputs, so it has to match them. */
.contact-field select {
    font: inherit;
    font-weight: 400;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 10px 12px;
    width: 100%;
}
.contact-field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22, 111, 100, .15); }

@media (max-width: 860px) {
    .engagement-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ---- Reading-width sections -------------------------------------------------
   Prose wants a shorter line than a three-column grid does. Anything argued in
   sentences rather than shown in cards sits in one of these. */
.wrap.narrow { max-width: 760px; }
.wrap.narrow .section-title { text-align: left; margin-left: 0; max-width: none; }
.wrap.narrow > p { color: var(--body); font-size: 18px; line-height: 1.65; margin-top: 18px; }

/* ---- The honesty band -------------------------------------------------------
   Sits where a competitor puts its customer logos. Saying "we have none yet" is
   the one claim on this page that cannot be made by every other product in the
   category, so it earns the position. */
.honest-band { padding-top: 0; }
.honest-band p {
    max-width: 760px;
    margin: 0 auto;
    padding: 20px 24px;
    border-left: 3px solid var(--brand);
    background: var(--surface-alt);
    border-radius: 0 12px 12px 0;
    color: var(--body);
    font-size: 17px;
    line-height: 1.6;
}
.honest-band strong { color: var(--ink); }

/* ---- The chase --------------------------------------------------------------
   Deliberately a numbered list of short flat statements. The rhythm is the
   argument: five clipped lines read like the thing actually happening, which a
   paragraph of the same content does not. */
.chase { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: chase; }
.chase li {
    counter-increment: chase;
    position: relative;
    padding: 12px 0 12px 48px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 18px;
    line-height: 1.5;
}
.chase li:last-child { border-bottom: 0; }
.chase li::before {
    content: counter(chase);
    position: absolute;
    left: 0;
    top: 12px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
}
.chase-close {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 2px solid var(--brand-soft);
    color: var(--body);
    font-size: 18px;
    line-height: 1.65;
}


.industry-more {
    margin-top: 30px;
    text-align: center;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
}

.plain-list { margin: 22px 0 0; padding: 0; list-style: none; }
.plain-list li {
    position: relative;
    padding: 0 0 14px 26px;
    color: var(--body);
    font-size: 17px;
    line-height: 1.6;
}
.plain-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}

/* ---- Pricing ---------------------------------------------------------------- */
.pricing-card {
    margin-top: 34px;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    text-align: center;
}
.pricing-headline { color: var(--ink); font-size: 28px; font-weight: 700; margin: 0 0 14px; }
.pricing-card p { color: var(--body); font-size: 17px; line-height: 1.65; margin: 0 auto 14px; max-width: 520px; }
.pricing-card .btn { margin-top: 10px; }

.pricing-aside { margin-top: 26px; text-align: center; }
.pricing-aside h3 { color: var(--ink); font-size: 17px; margin: 0 0 8px; }
.pricing-aside p { color: var(--muted); font-size: 16px; line-height: 1.65; margin: 0 auto; max-width: 620px; }

@media (max-width: 860px) {
    .pricing-card { padding: 26px 20px; }
    .chase li { font-size: 17px; padding-left: 42px; }
}

/* ---- Feature rows with a picture of the thing ------------------------------
   Alternating sides rather than a card grid. A grid forces every point to the
   same size, which is exactly what made the old six-card version read as
   filler; alternating lets each block be as long as it needs to be and gives
   the eye somewhere to travel. */
.feature-rows { margin-top: 48px; display: grid; gap: 8px; }

.feature-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
    padding: 40px 0;
    border-top: 1px solid var(--line);
}
.feature-row:last-child { border-bottom: 1px solid var(--line); }

/* Flip every other row. Ordering the columns rather than reordering the DOM
   keeps the heading before its illustration for a screen reader. */
.feature-row:nth-child(even) .feature-copy { order: 2; }
.feature-row:nth-child(even) .feature-visual { order: 1; }

.feature-copy h3 { color: var(--ink); font-size: 24px; line-height: 1.28; margin: 0 0 12px; }
.feature-copy p { color: var(--body); font-size: 17px; line-height: 1.65; margin: 0; }

/* ---- The mini mock-ups ------------------------------------------------------
   Deliberately not screenshots. One idea each, at a size that stays legible on
   a phone, and every colour comes from the theme so they follow dark mode
   instead of being a bright rectangle in the middle of a dark page. */
.mock {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    padding: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -28px rgba(15, 23, 42, .35);
    font-size: 14px;
}
.mock-head {
    font-weight: 700;
    color: var(--ink);
    font-size: 13px;
    letter-spacing: .02em;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

.mock ul, .mock ol { list-style: none; margin: 0; padding: 0; }

/* People */
.mock-people li { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.mock-people li + li { border-top: 1px solid var(--line); }
.mock-avatar {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand);
    font-size: 11px; font-weight: 700;
}
.mock-avatar-dim { background: var(--surface-alt); color: var(--muted); }
.mock-name { flex: 1; min-width: 0; color: var(--ink); font-weight: 600; display: flex; flex-direction: column; }
.mock-name em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 12px; }

.pill {
    flex: none; font-size: 11px; font-weight: 600;
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.pill-ok { background: var(--brand-soft); color: var(--brand); }
.pill-wait { background: var(--warn-soft); color: var(--warn); }
.pill-idle { background: var(--surface-alt); color: var(--muted); }

/* Checklist */
.mock-checks li { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 9px 0; color: var(--ink); }
.mock-checks li + li { border-top: 1px solid var(--line); }
.mock-checks em { font-style: normal; font-size: 11px; color: var(--muted); }
.mock-checks .tick {
    width: 18px; height: 18px; border-radius: 50%;
    display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.is-ok .tick { background: var(--brand-soft); color: var(--brand); }
.is-flagged .tick { background: var(--warn-soft); color: var(--warn); }
.is-flagged em { color: var(--warn); font-weight: 600; }
.mock-note {
    grid-column: 2 / -1;
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
    line-height: 1.45;
}

/* Trail */
.mock-trail li {
    position: relative;
    padding: 8px 0 8px 20px;
    color: var(--body);
    display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline;
}
.mock-trail li::before {
    content: ""; position: absolute; left: 3px; top: 15px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--line);
}
.mock-trail li::after {
    content: ""; position: absolute; left: 6px; top: 22px; bottom: -2px;
    width: 1px; background: var(--line);
}
.mock-trail li:last-child::after { display: none; }
.mock-trail .is-final::before { background: var(--brand); }
.mock-trail strong { color: var(--ink); font-weight: 600; }
.mock-trail span { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }

/* Export + webhook */
.mock-file { display: flex; align-items: center; gap: 10px; padding: 4px 0 12px; }
.mock-ext {
    flex: none; font-size: 10px; font-weight: 700; letter-spacing: .04em;
    padding: 6px 8px; border-radius: 7px;
    background: var(--danger-soft); color: var(--danger);
}
.mock-code {
    border-top: 1px solid var(--line);
    padding-top: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--body);
    word-break: break-all;
}
.mock-verb { color: var(--brand); font-weight: 700; }
.mock-brace { color: var(--muted); }

/* ---- Industry icons --------------------------------------------------------- */
.industry-icon {
    display: grid; place-items: center;
    width: 38px; height: 38px; margin-bottom: 14px;
    border-radius: 10px;
    background: var(--brand-soft);
}
.industry-icon svg {
    width: 20px; height: 20px;
    fill: none; stroke: var(--brand);
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 860px) {
    .feature-row { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 30px 0; }
    /* Picture under its own heading on a phone, so the alternating order does not
       leave an illustration stranded above the text it belongs to. */
    .feature-row:nth-child(even) .feature-copy { order: 1; }
    .feature-row:nth-child(even) .feature-visual { order: 2; }
    .feature-copy h3 { font-size: 21px; }
}

/* ---- Industry pages (/for/*) --------------------------------------------------
   Built entirely from the homepage's existing pieces (blog-hero, plain-list,
   mock cards, workflow grid, FAQ, CTA band) so they read as the same site. The
   only new shapes are the side-by-side template cards and a field list that is
   a mock-checks row without the tick. */
.blog-hero .hero-cta { margin-top: 30px; }
.nav-compact { gap: 20px; }
.mock-pair { margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mock-pair + .mock-pair { margin-top: 18px; }
.mock-pair .mock { margin: 0; }
.mock-fields li { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; color: var(--ink); font-weight: 600; }
.mock-fields li + li { border-top: 1px solid var(--line); }
.mock-fields em { font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.mock-checks .is-add .tick { background: var(--accent-soft); color: var(--accent); }
.mock-checks .is-add em { color: var(--accent); font-weight: 600; }
.blog-article ul, .blog-article ol { margin: 14px 0 0; padding-left: 22px; color: var(--body); font-size: 18px; }
.blog-article li { margin-top: 6px; line-height: 1.6; }
.blog-article li strong { color: var(--ink); }
@media (max-width: 720px) {
    .mock-pair { grid-template-columns: 1fr; }
    .blog-hero .hero-cta .btn { width: 100%; }
}