@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/inter-latin-400.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/inter-latin-500.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/fonts/inter-latin-700.woff2") format("woff2");
}

:root {
    --ink: #121316;
    --ink-deep: #062d60;
    --green: #14705f;
    --green-bright: #3fa684;
    --lime: #7eceb3;
    --cream: #f7f8fa;
    --paper: #fafaf8;
    --warm: #e2f3f0;
    --coral: #0fa1a2;
    --line: rgba(18, 19, 22, .12);
    --muted: #5a5e68;
    --shadow: 0 24px 60px rgba(6, 45, 96, .12);
    --radius: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    overflow-x: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.section { padding: 112px 0; }
.skip-link { position: fixed; left: 12px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--lime); color: var(--ink-deep); font-weight: 700; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

.announcement { background: var(--ink-deep); color: white; padding: 9px 20px; text-align: center; font-size: 13px; }
.announcement a { display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; }
.announcement a:hover { color: var(--lime); }
.announcement span { padding: 2px 8px; border-radius: 999px; background: var(--lime); color: var(--ink-deep); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.site-header { position: relative; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .98); backdrop-filter: blur(14px); }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; color: var(--ink-deep); font-size: 18px; font-weight: 700; letter-spacing: -.015em; text-decoration: none; }
.wordmark-logo { display: block; width: 115px; height: auto; }
.site-nav { display: flex; align-items: center; justify-content: center; gap: 30px; margin-left: auto; }
.site-nav a { color: #454b56; font-size: 14px; font-weight: 500; text-decoration: none; }
.site-nav a:hover { color: var(--green); }

.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 12px; padding: 16px 24px; border: 1px solid transparent; border-radius: 8px; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-align: center; text-decoration: none; text-transform: capitalize; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--green-bright); color: white; box-shadow: 0 12px 28px rgba(20, 112, 95, .2); }
.button-primary:hover { background: var(--green); box-shadow: 0 16px 34px rgba(20, 112, 95, .24); }
.button-ink { background: var(--ink-deep); color: white; }
.button-ink:hover { background: #084491; }
.button-secondary { border-color: rgba(255, 255, 255, .72); background: transparent; color: white; box-shadow: none; }
.button-secondary:hover { border-color: white; background: white; color: var(--ink-deep); }
.button-light { border-color: rgba(255, 255, 255, .32); background: white; color: var(--ink); }
.button-small { min-height: 42px; padding: 9px 17px; }
.button-block { width: 100%; }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: inherit; font-size: 14px; font-weight: 700; text-decoration: none; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(3px); }

.eyebrow { margin: 0 0 18px; color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow > span { display: inline-block; width: 24px; height: 2px; margin: 0 9px 3px 0; background: var(--coral); }
.eyebrow.light { color: var(--lime); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.12; font-weight: 700; letter-spacing: -.025em; }
em { color: var(--green); font-family: inherit; font-style: normal; font-weight: 700; }

.hero { position: relative; display: grid; min-height: calc(100vh - 77px); align-items: center; padding: 50px 0 46px; background: var(--ink-deep); color: #f7f8fa; }
.hero::before { display: none; }
.hero .shell { width: min(1280px, calc(100% - 64px)); }
.hero-grid { display: grid; grid-template-columns: minmax(470px, .95fr) minmax(570px, 1.05fr); align-items: center; gap: 58px; }
.hero-copy h1 { max-width: 620px; margin-bottom: 20px; font-size: clamp(44px, 3.8vw, 58px); line-height: 1.08; }
.hero-copy h1 em { display: block; margin-top: 9px; }
.hero-copy h1 em { color: inherit; }
.hero .eyebrow { color: var(--lime); }
.hero-lede { max-width: 620px; margin-bottom: 24px; color: #dce3f1; font-size: 17px; line-height: 1.6; }
.hero-actions { display: flex; align-items: center; gap: 20px; }
.hero .hero-actions .button { min-width: 214px; }
.micro-proof { display: flex; flex-wrap: wrap; gap: 18px; margin: 20px 0 0; padding: 0; color: #dce3f1; font-size: 12px; font-weight: 500; list-style: none; }
.micro-proof span { color: var(--lime); }

.product-frame { position: relative; z-index: 1; justify-self: end; width: 100%; max-width: 690px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; background: #f7f8fa; color: var(--ink); box-shadow: 0 28px 70px rgba(0, 0, 0, .22); transform: none; }
.product-frame::after { position: absolute; right: -26px; bottom: -32px; width: 120px; height: 120px; border-radius: 50%; background: var(--lime); content: ""; opacity: .16; filter: blur(3px); }
.product-topbar { display: flex; min-height: 52px; align-items: center; gap: 22px; padding: 0 18px; border-bottom: 1px solid #dce4e1; background: white; font-size: 10px; }
.mini-wordmark { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.mini-wordmark > img { display: block; width: 24px; height: 24px; }
.product-nav { display: flex; gap: 16px; margin-left: auto; color: #7b8986; }
.product-nav b { color: var(--ink); }
.avatar { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: var(--warm); color: var(--ink); font-size: 9px; font-weight: 700; }
.product-body { padding: 27px; }
.mock-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.mock-heading small { color: #85918f; font-size: 8px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.mock-heading h2 { margin: 4px 0 0; font-size: 20px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid #dbe4df; border-radius: 999px; background: white; color: #64736f; font-size: 8px; font-weight: 700; }
.status-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--green-bright); }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mock-metric { padding: 15px; border: 1px solid #dfe5e2; border-radius: 10px; background: white; }
.mock-metric span, .mock-metric small { display: block; color: #82908d; font-size: 8px; }
.mock-metric strong { display: block; margin: 7px 0 3px; font-size: 17px; letter-spacing: -.04em; }
.mock-metric.featured { border-color: #96c3bc; background: #e2f3f0; color: var(--ink); }
.mock-metric.featured span, .mock-metric.featured small { color: var(--muted); }
.mock-metric.featured strong { color: var(--green); }
.mock-lower { display: grid; grid-template-columns: 1.35fr .85fr; gap: 9px; margin-top: 9px; }
.chart-card, .tasks-card { min-height: 170px; padding: 15px; border: 1px solid #dfe5e2; border-radius: 10px; background: white; }
.card-title { display: flex; align-items: center; justify-content: space-between; font-size: 9px; }
.card-title span { color: #91a09c; font-size: 7px; }
.bar-chart { display: flex; height: 92px; align-items: end; gap: 9px; padding-top: 17px; border-bottom: 1px solid #dfe5e2; }
.bar-chart i { width: 100%; height: var(--height); border-radius: 3px 3px 0 0; background: #d9e8e2; }
.bar-chart i.active { background: var(--green-bright); }
.chart-labels { display: flex; justify-content: space-around; padding-top: 7px; color: #9aa6a3; font-size: 6px; }
.task { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #edf0ef; }
.task:last-child { border-bottom: 0; }
.task > i { display: grid; width: 19px; height: 19px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #eef2f0; color: #74827f; font-size: 7px; font-style: normal; font-weight: 700; }
.task > i.done { background: #dff4e9; color: var(--green); }
.task b, .task small { display: block; font-size: 7px; }
.task small { margin-top: 2px; color: #9ca6a4; }

.proof-strip { border-block: 1px solid var(--line); background: #ffffff; }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-grid > div { padding: 24px 28px; border-right: 1px solid var(--line); }
.proof-grid > div:first-child { padding-left: 0; }
.proof-grid > div:last-child { border-right: 0; }
.proof-grid strong, .proof-grid span { display: block; }
.proof-grid strong { margin-bottom: 4px; font-size: 14px; }
.proof-grid span { color: var(--muted); font-size: 11px; }

.problem-section { background: white; }
.split-intro { display: grid; grid-template-columns: 1fr .75fr; gap: 90px; align-items: end; }
.split-intro h2, .section-heading h2 { max-width: 760px; margin-bottom: 0; font-size: clamp(36px, 4vw, 52px); }
.intro-copy { color: var(--muted); font-size: 17px; }
.intro-copy p:last-child { margin-bottom: 0; }
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 68px; }
.pain-grid article { min-height: 255px; padding: 29px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: none; }
.pain-grid article > span { display: block; margin-bottom: 54px; color: var(--green-bright); font-size: 12px; font-weight: 700; }
.pain-grid h3 { margin-bottom: 12px; font-size: 25px; }
.pain-grid p { margin-bottom: 0; color: var(--muted); }

.feature-section { background: var(--cream); }
.section-heading { margin-bottom: 56px; }
.section-heading.centered { text-align: center; }
.section-heading.centered h2, .section-heading.centered > p:last-child { margin-inline: auto; }
.section-heading > p:last-child { max-width: 600px; margin-top: 18px; color: var(--muted); font-size: 17px; }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.feature-card { min-height: 300px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: none; }
.feature-card-wide { display: grid; grid-column: span 2; grid-template-columns: auto 1fr .8fr; align-items: center; gap: 30px; min-height: 260px; }
.feature-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 12px; background: #e4f6f4; color: var(--green); font-size: 25px; font-weight: 500; }
.feature-card:not(.feature-card-wide) .feature-icon { margin-bottom: 55px; }
.kicker { margin: 0 0 8px; color: var(--green-bright); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.feature-card h3 { margin-bottom: 13px; font-size: 27px; }
.feature-card p:last-child { margin-bottom: 0; color: var(--muted); }
.mini-import { padding: 17px; border: 1px solid #dce5e1; border-radius: 14px; background: var(--paper); box-shadow: 0 15px 35px rgba(6, 20, 38, .08); }
.mini-import span, .mini-import b { display: block; font-size: 11px; }
.mini-import span { margin-bottom: 18px; color: var(--muted); }
.mini-import span i { margin-right: 7px; color: var(--green-bright); font-style: normal; }
.mini-import div { overflow: hidden; height: 7px; margin-top: 10px; border-radius: 99px; background: #e5ece8; }
.mini-import div i { display: block; width: 78%; height: 100%; background: var(--green-bright); }
.document-stack { position: relative; height: 130px; }
.document-stack > i { position: absolute; width: 72%; height: 92px; right: 5%; top: 16px; border: 1px solid #cbd9e5; border-radius: 12px; background: #e7f0f6; transform: rotate(4deg); }
.document-stack > i:first-child { right: 17%; top: 7px; background: white; transform: rotate(-5deg); }
.document-stack > span { position: absolute; inset: 21px 9% auto 9%; min-height: 90px; padding: 25px 20px; border: 1px solid #cbd9e5; border-radius: 12px; background: white; box-shadow: 0 10px 25px rgba(6, 20, 38, .08); }
.document-stack b, .document-stack small { display: block; font-size: 10px; }
.document-stack small { margin-top: 7px; color: #718096; }

.reports-section { background: var(--ink-deep); color: white; }
.reports-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }
.reports-copy { position: sticky; top: 40px; align-self: start; }
.reports-copy h2 { margin-bottom: 28px; font-size: clamp(48px, 5.5vw, 75px); }
.reports-copy h2 em { color: var(--lime); }
.reports-copy > p:not(.eyebrow) { max-width: 480px; color: #aebebb; font-size: 17px; }
.export-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 36px; }
.export-row span { margin-right: 5px; color: #91a6a1; font-size: 12px; }
.export-row b { padding: 6px 9px; border: 1px solid #34504c; border-radius: 7px; font-size: 10px; }
.report-list > div { display: grid; grid-template-columns: 45px 1fr; gap: 2px 14px; padding: 25px 0; border-bottom: 1px solid #28413e; }
.report-list > div:first-child { border-top: 1px solid #28413e; }
.report-list span { grid-row: span 2; color: var(--lime); font-size: 12px; font-weight: 700; }
.report-list b { font-size: 22px; letter-spacing: -.025em; }
.report-list small { color: #8fa5a0; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 30px 32px; border-block: 1px solid var(--line); border-right: 1px solid var(--line); }
.steps li:first-child { padding-left: 0; }
.steps li:last-child { border-right: 0; }
.steps li > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--lime); font-size: 12px; font-weight: 700; }
.steps small { color: var(--green-bright); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.steps h3 { margin: 9px 0 12px; font-size: 24px; }
.steps p { margin: 0; color: var(--muted); font-size: 14px; }

.choice-section { padding-top: 20px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 30px; box-shadow: var(--shadow); }
.choice-card { min-height: 430px; padding: 62px; }
.choice-card h2 { max-width: 480px; margin-bottom: 21px; font-size: clamp(39px, 4vw, 56px); }
.choice-card > p:not(.eyebrow) { max-width: 460px; margin-bottom: 34px; font-size: 17px; }
.free-choice { background: #dff5f3; }
.free-choice em { color: var(--ink); }
.service-choice { background: var(--ink-deep); color: white; }
.service-choice > p:not(.eyebrow) { color: #c1d4d0; }
.white-label-teaser { background: var(--paper); }
.white-label-grid { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 60px; padding: 60px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: none; }
.white-label-grid h2 { margin-bottom: 14px; font-size: 48px; }
.white-label-grid h2 em { color: var(--coral); }
.white-label-grid > div:first-child > p:last-child { max-width: 550px; margin-bottom: 0; color: var(--muted); }
.price-lockup { display: flex; align-items: center; gap: 10px; }
.price-lockup strong { color: var(--ink); font-size: 72px; line-height: 1; letter-spacing: -.07em; }
.price-lockup sup { position: relative; top: -22px; margin-right: 3px; font-size: 23px; }
.price-lockup span { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.35; text-transform: uppercase; }

.final-cta { padding: 120px 0; background: var(--ink-deep); color: white; text-align: center; }
.final-cta-inner h2 { margin-bottom: 24px; font-size: clamp(50px, 7vw, 88px); }
.final-cta-inner > p:not(.eyebrow) { margin-bottom: 31px; color: #aebfbb; font-size: 17px; }

.site-footer { padding: 70px 0 24px; background: var(--ink-deep); color: white; }
.footer-grid { display: grid; grid-template-columns: 1.8fr .8fr 1fr .8fr; gap: 60px; padding-bottom: 55px; }
.wordmark-light { color: white; }
.wordmark-light .wordmark-logo { width: 150px; }
.footer-grid > div:first-child p { max-width: 300px; margin: 18px 0 0; color: #8da29e; font-size: 13px; }
.footer-grid > div:not(:first-child):not(.footer-note) { display: flex; flex-direction: column; gap: 10px; }
.footer-grid strong { margin-bottom: 7px; color: var(--lime); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.footer-grid a:not(.wordmark) { color: #bdcac7; font-size: 13px; text-decoration: none; }
.footer-grid a:hover { color: white; }
.footer-note span { display: block; color: var(--lime); font-size: 43px; font-weight: 700; }
.footer-note p { margin: 5px 0 0; color: #8da29e; font-size: 11px; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 22px; border-top: 1px solid #203936; color: #718985; font-size: 11px; }

/* White-label page */
.white-label-page { background: var(--paper); }
.wl-hero { padding: 92px 0 0; background: var(--cream); }
.wl-hero-grid { display: grid; grid-template-columns: 1.2fr .65fr; align-items: center; gap: 90px; }
.wl-hero-copy { padding-bottom: 70px; }
.wl-hero-copy h1 { max-width: 750px; margin-bottom: 27px; font-size: clamp(50px, 6vw, 76px); }
.wl-hero-copy h1 em { display: block; color: var(--green); }
.wl-hero-copy > p:not(.eyebrow) { max-width: 690px; margin-bottom: 30px; color: var(--muted); font-size: 19px; }
.pricing-card { position: relative; z-index: 2; padding: 35px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 18px 45px rgba(6, 45, 96, .1); }
.pricing-card > p { margin-bottom: 17px; color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pricing-number { display: flex; align-items: start; color: var(--ink); line-height: .85; }
.pricing-number sup { margin: 8px 4px 0 0; font-size: 24px; font-weight: 700; }
.pricing-number strong { font-size: 86px; letter-spacing: -.08em; }
.pricing-unit { display: block; margin: 8px 0 27px; color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.pricing-card ul { display: grid; gap: 13px; margin: 0 0 27px; padding: 24px 0; border-block: 1px solid var(--line); list-style: none; }
.pricing-card li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.pricing-card li i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #e5f5ed; color: var(--green); font-size: 9px; font-style: normal; }
.pricing-card > small { display: block; margin-top: 14px; color: #889591; font-size: 10px; text-align: center; }
.brand-preview { position: relative; z-index: 3; display: grid; grid-template-columns: 240px 1fr; overflow: hidden; min-height: 370px; border: 1px solid rgba(11, 32, 56, .16); border-radius: 16px 16px 0 0; background: white; box-shadow: 0 -12px 55px rgba(6, 20, 38, .1); }
.brand-preview-sidebar { display: flex; flex-direction: column; padding: 27px 23px; background: var(--ink-deep); color: white; }
.sample-logo { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.sample-logo span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: var(--green-bright); }
.brand-preview-sidebar nav { display: grid; gap: 5px; margin-top: 43px; }
.brand-preview-sidebar nav span, .brand-preview-sidebar nav b { padding: 10px 12px; border-radius: 7px; font-size: 10px; }
.brand-preview-sidebar nav b { background: rgba(45, 212, 191, .12); color: #72e5d7; }
.brand-preview-sidebar nav span { color: #9ca1b4; }
.brand-preview-sidebar > small { margin-top: auto; color: #73798e; font-size: 8px; }
.brand-preview-main { padding: 29px 35px; background: #f3f7fa; }
.brand-preview-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 19px; border-bottom: 1px solid #e2e4ea; color: #7a8090; font-size: 9px; }
.avatar.coral { background: #dff5f3; color: #087f79; }
.brand-preview-title { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 36px 0 28px; }
.brand-preview-title small { color: #a1a5b0; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.brand-preview-title h2 { margin: 7px 0 0; color: var(--ink); font-size: 28px; }
.brand-preview-title button { padding: 9px 13px; border: 0; border-radius: 7px; background: var(--ink); color: white; font-size: 9px; font-weight: 700; }
.brand-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.brand-stats > div { padding: 21px; border: 1px solid #e0e2e8; border-radius: 12px; background: white; }
.brand-stats span, .brand-stats small { display: block; color: #9297a4; font-size: 8px; }
.brand-stats strong { display: block; margin: 9px 0 4px; color: var(--ink); font-size: 20px; }
.brand-stats .brand-stat-accent { border-color: #96c3bc; background: var(--warm); }
.brand-stats .brand-stat-accent strong { color: var(--green); }
.wl-principles { border-bottom: 1px solid var(--line); background: white; }
.principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.principles-grid > div { padding: 40px 45px; border-right: 1px solid var(--line); }
.principles-grid > div:first-child { padding-left: 0; }
.principles-grid > div:last-child { border-right: 0; }
.principles-grid span { display: block; margin-bottom: 25px; color: var(--green-bright); font-size: 10px; font-weight: 700; }
.principles-grid strong { display: block; margin-bottom: 7px; font-size: 18px; }
.principles-grid p { margin: 0; color: var(--muted); font-size: 13px; }
.narrow-heading { max-width: 830px; margin-inline: auto; }
.wl-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.wl-feature-grid article { min-height: 290px; padding: 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wl-feature-grid .feature-icon { margin-bottom: 52px; }
.wl-feature-grid h3 { margin-bottom: 12px; font-size: 24px; }
.wl-feature-grid p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.api-section { background: var(--ink-deep); color: white; }
.api-grid { display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 100px; }
.api-copy h2 { max-width: 650px; margin-bottom: 25px; font-size: clamp(42px, 5vw, 65px); }
.api-copy > p:not(.eyebrow) { max-width: 590px; color: #aeb2c0; font-size: 17px; }
.check-list { display: grid; gap: 16px; margin: 34px 0 0; padding: 0; list-style: none; }
.check-list li { display: flex; gap: 13px; }
.check-list li > i { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(45, 212, 191, .14); color: var(--lime); font-size: 11px; font-style: normal; }
.check-list b, .check-list span { display: block; }
.check-list b { margin-bottom: 2px; font-size: 14px; }
.check-list span { color: #9398a9; font-size: 12px; }
.api-visual { overflow: hidden; border: 1px solid #29455e; border-radius: 14px; background: #07182b; box-shadow: 0 30px 80px rgba(0, 0, 0, .22); }
.code-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 17px; border-bottom: 1px solid #303548; color: #9196a8; font-size: 9px; }
.code-top > span { display: flex; gap: 5px; }
.code-top i { width: 7px; height: 7px; border-radius: 50%; background: #515669; }
.code-top b { color: #bec2cf; }
.code-top small { justify-self: end; padding: 3px 6px; border-radius: 4px; background: rgba(45, 212, 191, .1); color: var(--lime); font-size: 7px; font-weight: 700; }
.api-visual pre { margin: 0; padding: 40px; color: #a8adbd; font: 13px/1.9 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.api-visual code > span { color: white; }
.api-visual code b { color: #55dfd0; font-weight: 500; }
.api-visual code em { color: var(--lime); font-family: inherit; font-style: normal; }
.api-caption { display: flex; align-items: center; gap: 12px; padding: 19px 24px; border-top: 1px solid #303548; background: #171b2f; }
.api-caption > i { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: rgba(45, 212, 191, .1); color: var(--lime); font-size: 10px; font-style: normal; }
.api-caption b, .api-caption small { display: block; }
.api-caption b { font-size: 11px; }
.api-caption small { margin-top: 2px; color: #777d91; font-size: 8px; }
.launch-section { background: var(--cream); }
.launch-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; }
.launch-copy { position: sticky; top: 40px; align-self: start; }
.launch-copy h2 { margin-bottom: 23px; font-size: clamp(40px, 4.8vw, 62px); }
.launch-copy > p:last-child { color: var(--muted); font-size: 16px; }
.launch-steps { margin: 0; padding: 0; list-style: none; }
.launch-steps li { display: grid; grid-template-columns: 52px 1fr; gap: 22px; padding: 29px 0; border-bottom: 1px solid var(--line); }
.launch-steps li:first-child { border-top: 1px solid var(--line); }
.launch-steps li > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--green); font-size: 11px; font-weight: 700; }
.launch-steps h3 { margin-bottom: 8px; font-size: 24px; }
.launch-steps p { margin: 0; color: var(--muted); }
.wl-use-cases { background: var(--paper); }
.use-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.use-case-grid article { min-height: 330px; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.use-case-grid article:nth-child(2), .use-case-grid article:nth-child(3) { background: white; color: var(--ink); }
.use-case-grid small { display: block; margin-bottom: 80px; color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.use-case-grid article:nth-child(2) small { color: var(--green); }
.use-case-grid h3 { font-size: 28px; }
.use-case-grid p { margin-bottom: 0; color: var(--muted); }
.use-case-grid article:nth-child(2) p { color: var(--muted); }
.faq-section { background: var(--cream); }
.faq-grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: 100px; }
.faq-grid h2 { margin-bottom: 18px; font-size: 55px; }
.faq-grid > div:first-child > p:last-child { color: var(--muted); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 25px 42px 25px 0; cursor: pointer; font-size: 18px; font-weight: 700; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; right: 5px; content: "+"; color: var(--green); font-size: 25px; font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 700px; padding: 0 50px 23px 0; color: var(--muted); }
.wl-final { padding: 95px 0; background: var(--ink-deep); color: white; }
.wl-final-grid { display: grid; grid-template-columns: 1fr .55fr; align-items: end; gap: 80px; }
.wl-final h2 { max-width: 750px; margin-bottom: 0; font-size: clamp(46px, 6vw, 76px); }
.mini-price { display: flex; align-items: center; gap: 18px; margin-bottom: 25px; }
.mini-price strong { color: var(--lime); font-size: 55px; letter-spacing: -.05em; }
.mini-price span { color: #bfd4cf; font-size: 11px; font-weight: 700; line-height: 1.45; text-transform: uppercase; }

/* White-label workflow page */
.white-label-page .wl-hero { display: grid; min-height: calc(100vh - 77px); align-items: center; padding: 54px 0 50px; background: var(--ink-deep); color: #f7f8fa; }
.white-label-page .wl-hero-grid { grid-template-columns: minmax(460px, .9fr) minmax(600px, 1.1fr); gap: 58px; }
.white-label-page .wl-hero-copy { padding: 0; }
.white-label-page .wl-hero-copy h1 { max-width: 620px; margin-bottom: 22px; font-size: clamp(44px, 3.8vw, 58px); line-height: 1.08; }
.white-label-page .wl-hero-copy h1 em { display: block; margin-top: 8px; color: inherit; }
.white-label-page .wl-hero-copy > p:not(.eyebrow) { max-width: 610px; margin-bottom: 26px; color: #dce3f1; font-size: 17px; line-height: 1.6; }
.white-label-page .wl-hero .eyebrow { color: var(--lime); }
.white-label-page .wl-hero .hero-actions .button { min-width: 214px; }
.tenant-browser { overflow: hidden; width: 100%; max-width: 700px; justify-self: end; border: 1px solid rgba(255, 255, 255, .24); border-radius: 12px; background: white; color: var(--ink); box-shadow: 0 28px 70px rgba(0, 0, 0, .24); }
.tenant-browser-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 40px; padding: 0 15px; border-bottom: 1px solid #dcdfe5; background: #f7f8fa; color: #6e7178; font-size: 9px; }
.tenant-browser-bar strong { font-weight: 500; }
.browser-dots { display: flex; gap: 5px; }
.browser-dots i { width: 7px; height: 7px; border-radius: 50%; background: #cacdd2; }
.tenant-url { margin: 10px 15px; padding: 9px 13px; border: 1px solid #dcdfe5; border-radius: 7px; background: white; color: #454b56; font-size: 10px; }
.tenant-url i { margin-right: 8px; color: var(--green-bright); font-size: 7px; font-style: normal; }
.tenant-browser-body { display: grid; grid-template-columns: 165px 1fr; min-height: 345px; border-top: 1px solid #e3e5ea; }
.tenant-sidebar { display: flex; flex-direction: column; padding: 22px 17px; background: #121316; color: white; }
.tenant-brand { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; }
.tenant-brand > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; background: var(--green-bright); }
.tenant-sidebar nav { display: grid; gap: 4px; margin-top: 36px; }
.tenant-sidebar nav span, .tenant-sidebar nav b { padding: 9px 10px; border-radius: 6px; font-size: 9px; }
.tenant-sidebar nav b { background: rgba(126, 206, 179, .14); color: var(--lime); }
.tenant-sidebar nav span { color: #8e9198; }
.tenant-sidebar small { margin-top: auto; color: #6e7178; font-size: 7px; }
.tenant-main { padding: 27px; background: #f7f8fa; }
.tenant-welcome { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.tenant-welcome small { color: #8e9198; font-size: 7px; font-weight: 700; letter-spacing: .1em; }
.tenant-welcome h2 { margin: 6px 0 0; font-size: 22px; }
.tenant-welcome > span { padding: 7px 9px; border: 1px solid #96c3bc; border-radius: 999px; background: #e2f3f0; color: var(--green); font-size: 8px; font-weight: 700; }
.tenant-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 27px; }
.tenant-metrics > div { padding: 17px; border: 1px solid #dcdfe5; border-radius: 9px; background: white; }
.tenant-metrics small { display: block; color: #8e9198; font-size: 8px; }
.tenant-metrics strong { display: block; margin-top: 8px; font-size: 17px; }
.tenant-metrics > div:last-child { border-color: #96c3bc; background: #e2f3f0; }
.tenant-metrics > div:last-child strong { color: var(--green); }
.tenant-status { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 12px; padding: 17px; border: 1px solid #dcdfe5; border-radius: 9px; background: white; font-size: 9px; }
.tenant-status i { display: inline-grid; width: 18px; height: 18px; margin-right: 7px; place-items: center; border-radius: 50%; background: #e2f3f0; color: var(--green); font-style: normal; }
.tenant-status b { padding: 8px 11px; border-radius: 6px; background: var(--ink-deep); color: white; }
.wl-domain { background: white; }
.wl-domain-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 90px; }
.wl-domain .section-heading { margin-bottom: 0; }
.domain-card { padding: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); }
.domain-label { display: block; margin-bottom: 17px; color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.domain-address { display: block; overflow-wrap: anywhere; color: var(--ink-deep); font-size: clamp(27px, 3vw, 43px); letter-spacing: -.045em; }
.domain-address em { color: var(--green); }
.domain-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 32px 0 26px; }
.domain-details span { padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--muted); font-size: 11px; }
.domain-details i { display: block; margin-bottom: 10px; color: var(--green); font-style: normal; font-weight: 700; }
.domain-card > p { margin-bottom: 0; color: var(--muted); font-size: 12px; }
.role-section { background: var(--cream); }
.role-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.role-card { min-height: 330px; padding: 34px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.role-number { display: block; margin-bottom: 58px; color: var(--green); font-size: 11px; font-weight: 700; }
.role-card h3 { margin-bottom: 14px; font-size: 29px; }
.role-card > p:last-child { margin-bottom: 0; color: var(--muted); }

.workflow-section { background: var(--ink-deep); color: white; }
.workflow-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 95px; }
.workflow-copy { position: sticky; top: 40px; align-self: start; }
.workflow-copy h2 { max-width: 540px; margin-bottom: 25px; font-size: clamp(42px, 5vw, 65px); }
.workflow-copy > p:last-child { max-width: 480px; color: #a6b1bf; font-size: 17px; }
.workflow-steps { margin: 0; padding: 0; list-style: none; }
.workflow-steps li { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 27px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.workflow-steps li:first-child { border-top: 1px solid rgba(255, 255, 255, .16); }
.workflow-steps li > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(126, 206, 179, .42); border-radius: 50%; color: var(--lime); font-size: 10px; font-weight: 700; }
.workflow-steps small { color: var(--lime); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.workflow-steps h3 { margin: 7px 0 8px; font-size: 24px; }
.workflow-steps p { margin: 0; color: #a6b1bf; font-size: 14px; }
.ai-intake-section { background: var(--paper); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 95px; }
.story-grid.reverse > :first-child { order: 2; }
.story-copy h2 { max-width: 640px; margin-bottom: 23px; font-size: clamp(39px, 4.4vw, 57px); }
.story-copy > p:not(.eyebrow) { max-width: 620px; color: var(--muted); font-size: 17px; }
.availability-tag { display: inline-flex; margin-bottom: 24px; padding: 8px 11px; border: 1px solid #96c3bc; border-radius: 999px; background: #e2f3f0; color: var(--green); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.capability-pairs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 32px; }
.capability-pairs > div { padding: 18px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.capability-pairs strong, .capability-pairs span { display: block; }
.capability-pairs strong { margin-bottom: 7px; font-size: 12px; }
.capability-pairs span { color: var(--muted); font-size: 11px; }
.ai-queue, .ops-panel, .client-report-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 22px 55px rgba(6, 45, 96, .1); }
.queue-header, .ops-panel-title, .report-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.queue-header small, .queue-header strong, .report-panel-head small, .report-panel-head strong { display: block; }
.queue-header small, .report-panel-head small { margin-bottom: 5px; color: #8e9198; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.queue-header > span, .report-panel-head > span { padding: 7px 9px; border-radius: 999px; background: #e2f3f0; color: var(--green); font-size: 8px; font-weight: 700; }
.queue-source, .queue-row { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; padding: 17px 24px; border-bottom: 1px solid var(--line); }
.queue-source { grid-template-columns: 48px 1fr; background: #f7f8fa; }
.queue-source > i { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 7px; background: var(--ink-deep); color: white; font-size: 9px; font-style: normal; font-weight: 700; }
.queue-source b, .queue-source small, .queue-row b, .queue-row small { display: block; }
.queue-source b, .queue-row b { font-size: 12px; }
.queue-source small, .queue-row small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.queue-row > i { display: grid; width: 42px; height: 28px; place-items: center; border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 700; }
.confidence-high { background: #e2f3f0; color: var(--green); }
.confidence-mid { background: #fef0cd; color: #946a0e; }
.queue-row > em { color: var(--muted); font-size: 9px; font-weight: 700; }
.queue-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; background: var(--ink-deep); color: white; font-size: 10px; }
.queue-footer span { color: #a6b1bf; }

.feature-story { background: white; }
.story-list { display: grid; gap: 13px; margin: 28px 0 0; padding: 0; list-style: none; }
.story-list li { position: relative; padding-left: 28px; color: #454b56; }
.story-list li::before { position: absolute; left: 0; top: 1px; color: var(--green-bright); content: "✓"; font-weight: 700; }
.ops-panel-title span { color: var(--muted); font-size: 10px; }
.ops-check { display: flex; align-items: center; gap: 14px; padding: 17px 24px; border-bottom: 1px solid var(--line); }
.ops-check > i { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #e2f3f0; color: var(--green); font-size: 10px; font-style: normal; }
.ops-check b, .ops-check small { display: block; }
.ops-check b { font-size: 12px; }
.ops-check small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.ops-submit { margin: 20px 24px 24px; padding: 14px; border-radius: 8px; background: var(--green-bright); color: white; font-size: 11px; font-weight: 700; text-align: center; }
.qc-story { background: var(--ink-deep); color: white; }
.qc-story .story-copy > p:not(.eyebrow) { color: #a6b1bf; }
.light-list li { color: #dce3f1; }
.light-list li::before { color: var(--lime); }
.qc-panel { overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; background: white; color: var(--ink); box-shadow: 0 28px 70px rgba(0, 0, 0, .2); }
.qc-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.qc-panel-head small, .qc-panel-head strong { display: block; }
.qc-panel-head small { margin-bottom: 5px; color: #8e9198; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.qc-panel-head > span { padding: 7px 9px; border-radius: 999px; background: #fef0cd; color: #946a0e; font-size: 8px; font-weight: 700; }
.qc-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.qc-checks p { display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 11px; }
.qc-checks p:nth-child(even) { border-right: 0; }
.qc-checks i { display: grid; width: 21px; height: 21px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #e2f3f0; color: var(--green); font-size: 8px; font-style: normal; }
.qc-approve { margin: 22px; padding: 14px; border-radius: 8px; background: var(--ink-deep); color: white; font-size: 11px; font-weight: 700; text-align: center; }
.report-panel-head { background: #f7f8fa; }
.client-report-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 14px; padding: 19px 24px; border-bottom: 1px solid var(--line); }
.client-report-row:last-child { border-bottom: 0; }
.client-report-row > i { color: var(--green); font-size: 10px; font-style: normal; font-weight: 700; }
.client-report-row b, .client-report-row small { display: block; }
.client-report-row b { font-size: 12px; }
.client-report-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.client-report-row > em { color: var(--green); font-size: 8px; font-weight: 700; }

.controls-section { background: var(--cream); }
.control-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.control-grid article { min-height: 255px; padding: 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; }
.control-grid article > span { display: block; margin-bottom: 48px; color: var(--green); font-size: 10px; font-weight: 700; }
.control-grid h3 { margin-bottom: 12px; font-size: 26px; }
.control-grid p { margin-bottom: 0; color: var(--muted); }
.white-label-page .api-section { background: var(--ink-deep); }
.white-label-page .api-copy h2 { font-size: clamp(40px, 4.6vw, 60px); }
.wl-pricing-section { background: white; }
.wl-price-grid { display: grid; grid-template-columns: 1fr .62fr; align-items: center; gap: 100px; }
.pricing-copy h2 { max-width: 690px; margin-bottom: 24px; font-size: clamp(40px, 4.6vw, 60px); }
.pricing-copy > p:last-child { max-width: 620px; color: var(--muted); font-size: 17px; }
.white-label-page .pricing-card { max-width: 480px; justify-self: end; }
.white-label-page .launch-section { background: var(--cream); }
.white-label-page .faq-section { background: white; }
.white-label-page .wl-final { background: var(--ink-deep); }

@media (max-width: 1140px) {
    .hero-grid, .wl-hero-grid { grid-template-columns: 1fr; }
    .hero-copy { max-width: 780px; }
    .product-frame { max-width: 760px; transform: none; }
    .proof-grid { grid-template-columns: repeat(2, 1fr); }
    .proof-grid > div:nth-child(2) { border-right: 0; }
    .proof-grid > div:first-child, .proof-grid > div { padding-left: 24px; }
    .split-intro, .reports-layout, .api-grid, .launch-grid, .faq-grid { gap: 60px; }
    .white-label-grid { grid-template-columns: 1fr auto; }
    .white-label-grid > .button { grid-column: span 2; justify-self: start; }
    .wl-hero-copy { padding-bottom: 0; }
    .pricing-card { max-width: 520px; }
    .brand-preview { margin-top: 70px; }
    .white-label-page .wl-hero-grid, .wl-domain-grid, .workflow-grid, .story-grid, .wl-price-grid { grid-template-columns: 1fr; }
    .tenant-browser { max-width: 760px; justify-self: start; }
    .workflow-copy { position: static; }
    .story-grid.reverse > :first-child { order: 0; }
    .white-label-page .pricing-card { justify-self: start; }
}

@media (max-width: 800px) {
    .shell { width: min(100% - 32px, 1180px); }
    .section { padding: 78px 0; }
    .site-nav { display: none; }
    .header-inner { min-height: 66px; }
    .hero { padding: 70px 0; }
    .hero-grid { gap: 42px; }
    .hero-copy h1 { font-size: clamp(45px, 12vw, 67px); }
    .product-nav { display: none; }
    .metric-grid { grid-template-columns: 1fr; }
    .mock-lower { grid-template-columns: 1fr; }
    .tasks-card { display: none; }
    .split-intro, .reports-layout, .choice-grid, .api-grid, .launch-grid, .faq-grid, .wl-final-grid { grid-template-columns: 1fr; }
    .split-intro { gap: 30px; }
    .pain-grid, .steps, .use-case-grid { grid-template-columns: 1fr; }
    .feature-card-wide { grid-column: auto; grid-template-columns: auto 1fr; }
    .feature-card-wide > :last-child { grid-column: span 2; }
    .reports-layout { gap: 55px; }
    .reports-copy, .launch-copy { position: static; }
    .steps li, .steps li:first-child { padding: 25px 0; border-right: 0; }
    .choice-card { min-height: auto; padding: 45px 35px; }
    .white-label-grid { grid-template-columns: 1fr; padding: 38px 28px; }
    .white-label-grid > .button { grid-column: auto; }
    .footer-grid { grid-template-columns: 1.5fr 1fr; }
    .brand-preview { grid-template-columns: 1fr; min-height: 0; }
    .brand-preview-sidebar { display: none; }
    .brand-stats { grid-template-columns: 1fr; }
    .principles-grid { grid-template-columns: 1fr; }
    .principles-grid > div, .principles-grid > div:first-child { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
    .wl-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .api-grid, .launch-grid, .faq-grid { gap: 50px; }
    .wl-final-grid { align-items: start; }
    .wl-domain-grid, .workflow-grid, .story-grid, .wl-price-grid { grid-template-columns: 1fr; }
    .role-grid, .control-grid { grid-template-columns: 1fr; }
    .domain-details { grid-template-columns: 1fr; }
    .tenant-browser-body { grid-template-columns: 1fr; }
    .tenant-sidebar { display: none; }
    .capability-pairs { grid-template-columns: 1fr; }
    .workflow-copy { position: static; }
    .story-grid.reverse > :first-child { order: 0; }
}

@media (max-width: 560px) {
    .announcement { font-size: 11px; }
    .announcement span { display: none; }
    .wordmark { font-size: 16px; }
    .wordmark-logo { width: 106px; }
    .header-inner > .button { padding-inline: 12px; font-size: 12px; }
    .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
    .micro-proof { gap: 10px 15px; }
    .product-body { padding: 18px; }
    .mock-heading { align-items: flex-start; flex-direction: column; }
    .proof-grid { grid-template-columns: 1fr; }
    .proof-grid > div { border-right: 0; border-bottom: 1px solid var(--line); }
    .proof-grid > div:last-child { border-bottom: 0; }
    .pain-grid { margin-top: 45px; }
    .feature-grid { grid-template-columns: 1fr; }
    .feature-card-wide { display: block; }
    .feature-card-wide .feature-icon { margin-bottom: 45px; }
    .feature-card-wide > :last-child { margin-top: 28px; }
    .report-list b { font-size: 18px; }
    .choice-card h2 { font-size: 39px; }
    .white-label-grid h2 { font-size: 39px; }
    .price-lockup strong { font-size: 58px; }
    .final-cta { padding: 85px 0; }
    .footer-grid { grid-template-columns: 1fr; gap: 38px; }
    .footer-bottom { align-items: flex-start; flex-direction: column; gap: 7px; }
    .wl-hero { padding-top: 65px; }
    .wl-hero-copy h1 { font-size: 52px; }
    .pricing-card { padding: 27px; }
    .brand-preview { margin-top: 50px; }
    .brand-preview-main { padding: 22px; }
    .brand-preview-title { align-items: flex-start; flex-direction: column; }
    .wl-feature-grid { grid-template-columns: 1fr; }
    .api-visual pre { padding: 27px 20px; font-size: 11px; }
    .use-case-grid article { min-height: 280px; }
    .use-case-grid small { margin-bottom: 55px; }
    .faq-grid h2 { font-size: 45px; }
    .white-label-page .wl-hero { padding: 60px 0; }
    .white-label-page .wl-hero-copy h1 { font-size: clamp(40px, 12vw, 48px); }
    .white-label-page .wl-hero .hero-actions .button { width: 100%; min-width: 0; }
    .tenant-main { padding: 20px; }
    .tenant-welcome, .tenant-status { align-items: flex-start; flex-direction: column; }
    .tenant-metrics, .domain-details, .capability-pairs, .qc-checks, .control-grid { grid-template-columns: 1fr; }
    .domain-card { padding: 28px 22px; }
    .role-card { min-height: auto; }
    .workflow-steps li { grid-template-columns: 42px 1fr; gap: 14px; }
    .workflow-steps li > span { width: 36px; height: 36px; }
    .queue-header, .queue-footer, .qc-panel-head, .report-panel-head { align-items: flex-start; flex-direction: column; }
    .queue-row { grid-template-columns: 42px 1fr; }
    .queue-row > em { grid-column: 2; }
    .qc-checks p { border-right: 0; }
    .client-report-row { grid-template-columns: 24px 1fr; }
    .client-report-row > em { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; }
}