/*
 * Modal layer: the sitewide look from the 2026-10 redesign (mockups/revamp-2026-10-27/v3).
 *
 * Loaded last on every page (BaseLayout for Astro routes, scripts/legacy-html.mjs for
 * the committed HTML routes), so it restyles the shared header, footer and the
 * legacy component families without touching their markup or copy.
 * Page families add their own layer in modal-<family>.css.
 */

:root {
  --mk-primary: #3847fe;
  --mk-primary-press: #2b39e6;
  --mk-soft: #eef0ff;
  --mk-ink: #121212;
  --mk-ink-2: #3d3d44;
  --mk-muted: #626269;
  --mk-muted-2: #8a8a93;
  --mk-subtle: #f7f7f8;
  --mk-line: #ececef;
  --mk-line-2: #e2e2e7;
  --mk-success: #087a50;
  --mk-success-soft: #e7f6ef;
  --mk-crumb: #3b3f63;
  --mk-display: "Geist Variable", Geist, "Inter Variable", Inter, system-ui, -apple-system, sans-serif;
  --mk-body: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mk-wrap: min(1160px, calc(100% - 48px));
  --mk-pad: clamp(22px, 5vw, 64px);
  --mk-ease: cubic-bezier(.23, 1, .32, 1);
  --mk-header: 68px;
  --mk-ring: 0 0 0 1px var(--mk-line-2), 0 1px 2px rgb(18 18 18 / .04);
  --mk-ring-lift: 0 0 0 1px #d6d8f5, 0 12px 28px -18px rgb(30 36 120 / .35);
  --mk-frame:
    radial-gradient(70% 90% at 8% 10%, #cfe6ff 0%, transparent 60%),
    radial-gradient(60% 80% at 92% 12%, #dcd6ff 0%, transparent 60%),
    radial-gradient(80% 90% at 70% 100%, #8e98ff 0%, transparent 65%),
    radial-gradient(70% 80% at 10% 100%, #a9c4ff 0%, transparent 60%),
    #c7ceff;
  --mk-frame-soft:
    radial-gradient(60% 120% at 0% 0%, #dfeaff 0%, transparent 60%),
    radial-gradient(60% 120% at 100% 100%, #d9d5ff 0%, transparent 60%),
    #e6e9ff;
  --mk-dots: radial-gradient(rgb(255 255 255 / .7) 1px, transparent 1.2px);
  --mk-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --mk-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --mk-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E");
}

html { scroll-padding-top: calc(var(--mk-header) + 24px); }
body:not(.landing-page) { background-color: #fff; }
body:not(.landing-page) :is(h1, h2, h3, h4, [id]) { scroll-margin-top: calc(var(--mk-header) + 24px); }

/* ---------- header: flat bar, hairline once scrolled ---------- */
html body .site-header {
  top: 0;
  width: 100%;
  margin: 0;
  background: rgb(255 255 255 / .86);
  border-bottom: 1px solid transparent;
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  transition: border-color 200ms ease, background-color 200ms ease;
}
html body .site-header.is-stuck,
html body .site-header:has(.site-nav-item[data-open="true"]),
html body .site-header:has(.site-nav-mobile[open]) {
  background: rgb(255 255 255 / .94);
  border-bottom-color: var(--mk-line);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
}
html body .site-header .site-nav,
html body .site-header.is-stuck .site-nav,
html body .site-header:has(.site-nav-item[data-open="true"]) .site-nav,
html body .site-header:has(.site-nav-mobile[open]) .site-nav {
  width: var(--mk-wrap);
  min-height: var(--mk-header);
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html body .site-brand { font-family: var(--mk-display); font-size: 17px; font-weight: 600; letter-spacing: -.03em; }
html body .site-brand svg { width: 22px; height: 22px; }
html body .site-nav .site-nav-link,
html body .site-nav .site-nav-trigger { font-size: 14.5px; font-weight: 500; color: var(--mk-ink-2); }
html body .site-nav .site-nav-link:hover,
html body .site-nav .site-nav-trigger:hover { color: var(--mk-ink); }
html body .site-header .site-nav-cta,
html body .site-header .site-nav-cta:hover {
  min-height: 36px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--mk-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 1px 2px rgb(0 0 0 / .2);
}
html body .site-header .site-nav-cta:hover { background: #2a2a30; filter: none; }
html body .site-header .site-nav-cta:active { transform: scale(.97); }

/* ---------- footer: hairline top, quiet uppercase column labels ---------- */
html body .seo-footer { margin-top: clamp(56px, 8vw, 96px); border-top: 1px solid var(--mk-line); background: #fff; }
html body .seo-footer .seo-footer-inner { width: var(--mk-wrap); padding-top: 56px; padding-bottom: 48px; }
html body .seo-footer .seo-footer-inner h3 {
  margin-bottom: 14px;
  font: 500 12px/1.2 var(--mk-body);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mk-muted-2);
}
html body .seo-footer a:not(.seo-brand) { color: var(--mk-ink-2); }
html body .seo-footer a:not(.seo-brand):hover { color: var(--mk-ink); }
html body .seo-footer .seo-brand { font-family: var(--mk-display); font-weight: 600; letter-spacing: -.03em; color: var(--mk-ink); }
html body .seo-footer .seo-brand svg { color: var(--mk-primary); }
html body .seo-footer .seo-social a { border-radius: 8px; box-shadow: var(--mk-ring); background: #fff; }
html body .seo-footer-featured { border-top: 1px solid var(--mk-line); }
html body .seo-footer-featured-inner,
html body .seo-footer-legal-inner { width: var(--mk-wrap); }
html body .seo-footer .seo-footer-featured-inner p { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--mk-muted-2); }
html body .seo-footer-legal { border-top: 1px solid var(--mk-line); background: #fff; }

/* ---------- typography inside page content ---------- */
body:not(.landing-page) main :is(h1, h2, h3) {
  font-family: var(--mk-display);
  font-variation-settings: normal;
  font-weight: 600;
  color: var(--mk-ink);
}
body:not(.landing-page) main h1 { letter-spacing: -.045em; }
body:not(.landing-page) main h2 { letter-spacing: -.035em; }
body:not(.landing-page) main h3 { letter-spacing: -.02em; }

/* ---------- buttons: squared-pill ink primary, hairline secondary ---------- */
body:not(.landing-page) main :is(.seo-button, .btn-dark, .btn-light, .db-offer-button, .customer-button, .site-closing-cta-button, .brand-button),
body:not(.landing-page) :is(.seo-cta-band, .db-offer) :is(.seo-button, .btn-dark, .btn-light) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  font: 500 15px/1.15 var(--mk-body);
  letter-spacing: 0;
  text-decoration: none;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 140ms var(--mk-ease);
}
body:not(.landing-page) main :is(.seo-button.primary, .seo-button:not(.secondary), .btn-dark, .db-offer-button, .customer-button.primary, .site-closing-cta-button),
body:not(.landing-page) .seo-cta-band .seo-button.primary {
  background: var(--mk-ink);
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 1px 2px rgb(0 0 0 / .2);
}
body:not(.landing-page) main :is(.seo-button.primary, .seo-button:not(.secondary), .btn-dark, .db-offer-button, .customer-button.primary, .site-closing-cta-button):hover {
  background: #2a2a30;
  transform: none;
}
body:not(.landing-page) main :is(.seo-button.secondary, .btn-light),
body:not(.landing-page) .seo-cta-band .seo-button.secondary {
  background: #fff;
  color: var(--mk-ink) !important;
  box-shadow: inset 0 0 0 1px var(--mk-line-2), 0 1px 2px rgb(18 18 18 / .05);
}
body:not(.landing-page) main :is(.seo-button.secondary, .btn-light):hover { box-shadow: inset 0 0 0 1px #cfcfd6, 0 1px 2px rgb(18 18 18 / .05); transform: none; }
body:not(.landing-page) main :is(.seo-button, .btn-dark, .btn-light, .db-offer-button, .customer-button):active { transform: scale(.97); }
body:not(.landing-page) main :is(.seo-button, .btn-dark, .btn-light, .db-offer-button)::before { content: none; }

/* tools and Astro feature pages use their own button classes */
body:not(.landing-page) main :is(.tool-button, .tool-button-secondary),
body.feature-page main .landing-button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  font: 500 15px/1.15 var(--mk-body);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 140ms var(--mk-ease);
}
body:not(.landing-page) main .tool-button,
body.feature-page main .landing-button:not(.landing-button-secondary) {
  background: var(--mk-ink);
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 1px 2px rgb(0 0 0 / .2);
}
body:not(.landing-page) main .tool-button:hover,
body.feature-page main .landing-button:not(.landing-button-secondary):hover { background: #2a2a30; filter: none; }
body:not(.landing-page) main .tool-button-secondary,
body.feature-page main .landing-button-secondary {
  background: #fff;
  color: var(--mk-ink) !important;
  box-shadow: inset 0 0 0 1px var(--mk-line-2), 0 1px 2px rgb(18 18 18 / .05);
}
body.feature-page main .landing-button:active,
body:not(.landing-page) main :is(.tool-button, .tool-button-secondary):active { transform: scale(.97); }

/* ---------- hero frame: pastel gradient card under the header ---------- */
body:not(.landing-page) > main > :is(.seo-hero, .tool-page-head),
body:not(.landing-page) > main > .seo-article > .seo-article-hero {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: var(--mk-wrap);
  margin: calc(var(--mk-header) + 14px) auto 0;
  padding: clamp(40px, 6vw, 72px) var(--mk-pad) clamp(40px, 5.5vw, 64px);
  border: 0;
  border-radius: 28px;
  background: var(--mk-frame);
  overflow: hidden;
}
body:not(.landing-page) > main > :is(.seo-hero, .tool-page-head)::after,
body:not(.landing-page) > main > .seo-article > .seo-article-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .35;
  background-image: var(--mk-dots);
  background-size: 18px 18px;
  pointer-events: none;
}
body:not(.landing-page) > main > .seo-hero > .seo-shell,
body:not(.landing-page) > main > .seo-article > .seo-article-hero > .seo-shell { width: 100%; max-width: none; margin: 0; }
body:not(.landing-page) > .seo-breadcrumb + main > .seo-hero,
body:not(.landing-page) > .seo-breadcrumb + main > .seo-article > .seo-article-hero { padding-top: clamp(72px, 8vw, 96px); }

/* other page families' first sections get the same frame */
body:not(.landing-page) > main > :is(.industry-hub-hero, .paper-industry-hero, .case-hero, .customers-hero) {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: var(--mk-wrap);
  max-width: none;
  margin: calc(var(--mk-header) + 14px) auto 0;
  padding: clamp(40px, 6vw, 72px) var(--mk-pad) clamp(40px, 5.5vw, 64px);
  border: 0;
  border-radius: 28px;
  background: var(--mk-frame);
  overflow: hidden;
}
body:not(.landing-page) > main > :is(.industry-hub-hero, .paper-industry-hero, .case-hero, .customers-hero)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .35;
  background-image: var(--mk-dots);
  background-size: 18px 18px;
  pointer-events: none;
}
body:not(.landing-page) > main > :is(.paper-industry-hero, .case-hero, .customers-hero) > * { width: 100%; max-width: none; margin-inline: 0; }
body:not(.landing-page) > main > .hub-breadcrumb + .paper-industry-hero { margin-top: 12px; }
/* the paper heroes' product frame bleeds off the frame's right edge on purpose */
body:not(.landing-page) > main > .paper-industry-hero { padding-right: 0; padding-bottom: clamp(32px, 4vw, 48px); }
body:not(.landing-page) > main > .paper-industry-hero .paper-industry-hero-inner { min-height: 0; }
body:not(.landing-page) > main > .paper-industry-hero .paper-industry-hero-copy { min-height: 560px; }
body:not(.landing-page) > main > .hub-breadcrumb { box-sizing: border-box; width: var(--mk-wrap); margin: calc(var(--mk-header) + 14px) auto 0; padding: 0 4px; }
body:not(.landing-page) main :is(.industry-hub-hero, .paper-industry-hero, .case-hero, .customers-hero) h1 { color: var(--mk-ink); letter-spacing: -.05em; }
body:not(.landing-page) main :is(.industry-hub-hero, .paper-industry-hero, .case-hero, .customers-hero) p { color: #2e3150; }
body:not(.landing-page) main :is(.industry-hub-hero, .paper-industry-hero) :is(.eyebrow, .paper-industry-pill) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: rgb(255 255 255 / .7);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .9);
  color: var(--mk-ink-2);
  font: 500 13px/1 var(--mk-body);
  letter-spacing: 0;
  text-transform: none;
}
body:not(.landing-page) main .paper-industry-hero .accent { color: var(--mk-primary); }

/* breadcrumb sits inside the frame's top padding */
body:not(.landing-page) > .seo-breadcrumb {
  top: calc(var(--mk-header) + 14px + clamp(26px, 3.4vw, 34px));
  box-sizing: border-box;
  width: var(--mk-wrap);
  margin: 0 auto;
  padding: 0 var(--mk-pad);
  font-size: 13.5px;
  color: var(--mk-crumb);
}
body:not(.landing-page) > .seo-breadcrumb > .seo-shell { width: auto; max-width: none; }
/* keep the frame's top margin inside main so the absolute breadcrumb lines up */
body:not(.landing-page) > main { display: flow-root; }
body:not(.landing-page) :is(.seo-breadcrumb, .dir-breadcrumb) a { color: var(--mk-crumb); text-decoration: none; }
body:not(.landing-page) :is(.seo-breadcrumb, .dir-breadcrumb) a:hover { color: var(--mk-ink); }

body:not(.landing-page) main :is(.seo-hero, .seo-article-hero, .tool-page-head) h1 {
  max-width: 17ch;
  font-size: clamp(2.35rem, 5.2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.05em;
  color: var(--mk-ink);
}
body:not(.landing-page) main :is(.seo-hero, .seo-article-hero, .tool-page-head) :is(.lead, .dir-answer, .dir-intro, > p) {
  max-width: 62ch;
  color: #2e3150;
  font-size: clamp(16px, 1.35vw, 17.5px);
  line-height: 1.6;
}
body:not(.landing-page) main :is(.seo-hero, .seo-article-hero, .tool-page-head) :is(.lead, .dir-answer) { font-size: clamp(16.5px, 1.5vw, 19px); }
body:not(.landing-page) main :is(.seo-hero, .seo-article-hero, .tool-page-head) a:not([class]) { color: var(--mk-ink); text-decoration: underline; text-decoration-color: rgb(18 18 18 / .3); text-underline-offset: 3px; }
body:not(.landing-page) main :is(.seo-hero, .seo-article-hero, .tool-page-head) :is(.seo-byline, .seo-proofline, .dir-byline) { color: var(--mk-crumb); font-size: 13.5px; }
body:not(.landing-page) main :is(.seo-hero, .seo-article-hero, .tool-page-head) :is(.seo-byline, .dir-byline) a { color: var(--mk-ink); font-weight: 600; }
body:not(.landing-page) main :is(.seo-proofline) span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 7px;
  background: rgb(255 255 255 / .55);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7);
  color: var(--mk-crumb);
}
body:not(.landing-page) main .seo-proofline span::before { color: var(--mk-success); }

/* eyebrow in the frame becomes a white tag chip */
body:not(.landing-page) main :is(.seo-hero, .seo-article-hero, .tool-page-head) :is(.seo-eyebrow, .tool-kicker) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  background: rgb(255 255 255 / .7);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .9), 0 1px 2px rgb(30 36 120 / .08);
  color: var(--mk-ink-2);
  font: 500 13px/1 var(--mk-body);
  letter-spacing: 0;
  text-transform: none;
}
body:not(.landing-page) main .tool-page-head .tool-title-mark { display: inline-flex; align-items: center; gap: 0; }
body:not(.landing-page) main .tool-page-head .tool-title-mark .tool-icon { display: none; }

/* ---------- section rhythm and heads ---------- */
body:not(.landing-page) main .seo-section.alt { background: transparent; border-block: 0; }
body:not(.landing-page) main :is(.seo-section, .dir-section, .seo-article-section) h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.45rem);
  line-height: 1.08;
}
body:not(.landing-page) main :is(.seo-section, .seo-article-section, .dir-section) :is(p, li) { color: var(--mk-ink-2); }
body:not(.landing-page) main :is(.seo-section, .seo-cta-band, .bc-verdict, .seo-section-head) > .seo-eyebrow,
body:not(.landing-page) main .seo-section-head .seo-eyebrow,
body:not(.landing-page) main :is(.section-kicker, .db-offer-kicker) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px;
  border-radius: 7px;
  background: var(--mk-soft);
  color: var(--mk-primary);
  font: 500 12.5px/1 var(--mk-body);
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- cards ---------- */
body:not(.landing-page) main :is(.seo-card, .dir-hub-card, .tool-card, .industry-hub-card) {
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--mk-ring);
  transition: box-shadow 200ms ease, transform 200ms var(--mk-ease);
}
body:not(.landing-page) main a:is(.seo-card, .dir-hub-card, .tool-card, .industry-hub-card):hover,
body:not(.landing-page) main :is(.seo-card, .dir-hub-card, .tool-card):has(> a:only-child):hover { box-shadow: var(--mk-ring-lift); }

/* ---------- hairline tables ---------- */
body:not(.landing-page) main :is(.seo-table-wrap, .dir-table-wrap, .rt-wrap, .bc-table-wrap) {
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--mk-ring);
}
body:not(.landing-page) main :is(.seo-table, .dir-table, .rt) :is(th, td) { border-color: var(--mk-line); }
body:not(.landing-page) main :is(.seo-table, .dir-table, .rt) thead th {
  background: #fff;
  color: var(--mk-muted-2);
  font: 500 11.5px/1.3 var(--mk-body);
  letter-spacing: .07em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--mk-line);
}
body:not(.landing-page) main :is(.seo-table, .dir-table, .rt) tbody tr { transition: background-color 140ms ease; }
body:not(.landing-page) main :is(.seo-table, .dir-table, .rt) tbody tr:hover { background: #fafafb; }
body:not(.landing-page) main :is(.seo-table, .dir-table, .rt) td { color: var(--mk-ink-2); }

/* ---------- FAQ: hairline rows, answers stay visible ---------- */
body:not(.landing-page) main :is(.seo-faq-list, .dir-faq-list) { display: block; border-top: 1px solid var(--mk-line); }
body:not(.landing-page) main :is(.seo-faq-item, .dir-faq-item) {
  padding: 20px 0 22px;
  border: 0;
  border-bottom: 1px solid var(--mk-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body:not(.landing-page) main :is(.seo-faq-item, .dir-faq-item) h3 { margin: 0 0 8px; font-size: 16.5px; line-height: 1.35; letter-spacing: -.015em; }
body:not(.landing-page) main :is(.seo-faq-item, .dir-faq-item) p { margin: 0; color: var(--mk-muted); font-size: 15px; line-height: 1.65; }
body:not(.landing-page) main :is(.bc-faq, .pricing-faq-list) { border-top: 1px solid var(--mk-line); }
body:not(.landing-page) main :is(.bc-faq-item, .pricing-faq-list > details) {
  border: 0;
  border-bottom: 1px solid var(--mk-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
body:not(.landing-page) main :is(.bc-faq-item, .pricing-faq-list > details) > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  list-style: none;
  cursor: pointer;
  font: 500 15.5px/1.4 var(--mk-body);
  color: var(--mk-ink);
}
body:not(.landing-page) main :is(.bc-faq-item, .pricing-faq-list > details) > summary h3 { margin: 0; font: inherit; letter-spacing: -.01em; }
body:not(.landing-page) main :is(.bc-faq-item, .pricing-faq-list > details) > summary::-webkit-details-marker { display: none; }
body:not(.landing-page) main :is(.bc-faq-item, .pricing-faq-list > details) > summary::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--mk-muted);
  -webkit-mask: var(--mk-plus) center / contain no-repeat;
  mask: var(--mk-plus) center / contain no-repeat;
  transition: transform 220ms var(--mk-ease);
}
body:not(.landing-page) main :is(.bc-faq-item, .pricing-faq-list > details)[open] > summary::after { transform: rotate(45deg); }
body:not(.landing-page) main :is(.bc-faq-item, .pricing-faq-list > details) > p { margin: 0; padding: 0 32px 20px 0; color: var(--mk-muted); font-size: 15px; line-height: 1.65; }

/* ---------- unlock band (db-offer) ---------- */
body:not(.landing-page) main .db-offer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: var(--mk-frame-soft);
  box-shadow: none;
  color: var(--mk-ink);
}
body:not(.landing-page) main .db-offer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  background-image: var(--mk-dots);
  background-size: 18px 18px;
  pointer-events: none;
}
body:not(.landing-page) main .db-offer .db-offer-kicker { background: rgb(255 255 255 / .7); color: var(--mk-ink-2); }
body:not(.landing-page) main .db-offer .db-offer-copy .db-offer-title { font-family: var(--mk-display); font-weight: 600; letter-spacing: -.03em; color: var(--mk-ink); }
body:not(.landing-page) main .db-offer .db-offer-copy p { color: #2e3150; }

/* ---------- closing band: gradient, centred ---------- */
body:not(.landing-page) main .seo-cta-band,
body:not(.landing-page) .seo-cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: var(--mk-wrap);
  margin: clamp(56px, 8vw, 96px) auto 0;
  padding: clamp(56px, 8vw, 88px) 24px;
  border-radius: 28px;
  background: var(--mk-frame);
  color: var(--mk-ink);
  text-align: center;
}
body:not(.landing-page) .seo-cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .35;
  background-image: var(--mk-dots);
  background-size: 18px 18px;
  pointer-events: none;
}
body:not(.landing-page) .seo-cta-band h2 {
  max-width: 16ch;
  margin: 0;
  color: var(--mk-ink);
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -.045em;
}
body:not(.landing-page) .seo-cta-band p { max-width: 34rem; margin: 0; color: #2e3150; font-size: 16.5px; }
body:not(.landing-page) .seo-cta-band .seo-eyebrow { background: rgb(255 255 255 / .7); color: var(--mk-ink-2); }
body:not(.landing-page) .seo-cta-band .seo-actions { justify-content: center; margin-top: 6px; }

/* ---------- JS closing CTA (site-motion.js): gradient band, no screenshot ---------- */
html body .site-closing-cta { margin-top: clamp(56px, 8vw, 96px); padding: 0; background: transparent; overflow: visible; }
html body .site-closing-cta-inner {
  box-sizing: border-box;
  width: var(--mk-wrap);
  min-height: 0;
  align-items: center;
  padding: clamp(56px, 8vw, 92px) 24px;
  overflow: hidden;
  border-radius: 28px;
  background: var(--mk-frame);
}
html body .site-closing-cta-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .35;
  background-image: var(--mk-dots);
  background-size: 18px 18px;
  pointer-events: none;
}
html body .site-closing-cta-stage,
html body .site-closing-cta-fade { display: none; }
html body .site-closing-cta-content { gap: 22px; }
html body .site-closing-cta-mark,
html body .site-closing-cta-mark img { width: 44px; height: 44px; }
html body .site-closing-cta .site-closing-cta-copy h2 {
  max-width: 15ch;
  color: var(--mk-ink);
  font-family: var(--mk-display);
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 600;
  font-variation-settings: normal;
  line-height: 1.04;
  letter-spacing: -.045em;
}
html body .site-closing-cta .site-closing-cta-copy p { max-width: 32rem; color: #2e3150; font-size: 16.5px; line-height: 1.6; }
html body .site-closing-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: var(--mk-ink);
  color: #fff;
  font: 500 15.5px/1 var(--mk-body);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 1px 2px rgb(0 0 0 / .2);
  transition: background-color 160ms ease, transform 140ms var(--mk-ease);
}
html body .site-closing-cta-button:hover { background: #2a2a30; }
html body .site-closing-cta-button:active { transform: scale(.97); }

@media (max-width: 720px) {
  :root { --mk-wrap: min(1160px, calc(100% - 28px)); --mk-header: 64px; }
  body:not(.landing-page) > main > :is(.seo-hero, .tool-page-head),
  body:not(.landing-page) > main > .seo-article > .seo-article-hero { border-radius: 22px; margin-top: calc(var(--mk-header) + 8px); }
  body:not(.landing-page) > .seo-breadcrumb { top: calc(var(--mk-header) + 8px + 22px); }
  body:not(.landing-page) .seo-cta-band,
  html body .site-closing-cta-inner { border-radius: 22px; }
  html body .seo-footer .seo-footer-inner { padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.landing-page) main :is(.seo-button, .btn-dark, .btn-light, .db-offer-button, .seo-card, .dir-hub-card, .tool-card) { transition: none; }
}

/* industry pages: no grey full-bleed bands. The search preview sits on the gradient
   frame like a product shot, the brief journey on a quiet rounded panel. */
body.industry-page > main > :is(.paper-industry-preview, .paper-industry-journey, .paper-industry-related) { background: transparent; }
body.industry-page > main > :is(.paper-industry-preview, .paper-industry-journey) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  width: var(--mk-wrap);
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding: clamp(56px, 7vw, 96px) clamp(16px, 3vw, 40px);
  border-radius: 28px;
}
body.industry-page > main > .paper-industry-preview { background: var(--mk-frame); }
body.industry-page > main > .paper-industry-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .35;
  background-image: var(--mk-dots);
  background-size: 18px 18px;
  pointer-events: none;
}
body.industry-page > main > .paper-industry-journey { background: var(--mk-subtle); box-shadow: inset 0 0 0 1px var(--mk-line); }
body.industry-page > main > :is(.paper-industry-preview, .paper-industry-journey) > .paper-industry-section-inner { width: 100%; max-width: none; }
body.industry-page > main > .paper-industry-preview .paper-industry-section-heading p { color: #2e3150; }
body.industry-page > main > .paper-industry-preview .paper-industry-preview-grid {
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(30 36 120 / .08), 0 40px 80px -30px rgb(25 30 110 / .55);
}
body.industry-page > main > .paper-industry-preview .paper-industry-proof-row > * { color: var(--mk-ink-2); }
@media (max-width: 720px) {
  body.industry-page > main > :is(.paper-industry-preview, .paper-industry-journey) { border-radius: 22px; padding-inline: 12px; }
}

/* integrations hub: the breadcrumb is visually hidden, so the hero still clears the fixed header */
body:not(.landing-page) > main > .workflow-breadcrumb + .paper-industry-hero { margin-top: calc(var(--mk-header) + 14px); }

/* integrations, integration detail and developer API: the strip after the hero rides up onto the frame */
body.industry-page > main > .paper-industry-hero + :is(.hub-lanes, .integration-fact-strip, .integration-proof, .api-proof) { background: transparent; }
@media (min-width: 1000px) {
  body.industry-page > main > .paper-industry-hero:has(+ :is(.hub-lanes, .integration-fact-strip, .integration-proof, .api-proof)) { padding-bottom: clamp(128px, 11vw, 160px); }
  body.industry-page > main > .paper-industry-hero + :is(.hub-lanes, .integration-fact-strip, .integration-proof, .api-proof) {
    position: relative;
    z-index: 1;
    margin-top: clamp(-112px, -9vw, -88px);
    padding-top: 0;
    padding-bottom: clamp(56px, 7vw, 88px);
  }
  body.industry-page > main > .paper-industry-hero + :is(.integration-fact-strip, .integration-proof, .api-proof) > :is(.integration-fact-grid, .integration-proof-inner, .api-proof-grid) {
    box-sizing: border-box;
    width: calc(var(--mk-wrap) - 2 * var(--mk-pad));
    padding: 8px;
    border: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(30 36 120 / .08), 0 30px 60px -30px rgb(30 36 120 / .5);
  }
  body.industry-page > main > .paper-industry-hero + .hub-lanes > .hub-lanes-grid { width: calc(var(--mk-wrap) - 2 * var(--mk-pad)); }
  body.industry-page > main > .paper-industry-hero + .hub-lanes .hub-lane {
    border: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(30 36 120 / .08), 0 30px 60px -30px rgb(30 36 120 / .5);
  }
}

/* feature pages: the hero moves onto the gradient frame and the short answer rides up onto it */
body.feature-page > main > .fp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  width: var(--mk-wrap);
  margin: calc(var(--mk-header) + 14px) auto 0;
  padding: clamp(48px, 6vw, 72px) var(--mk-pad) clamp(40px, 5.5vw, 64px);
  border-radius: 28px;
  background: var(--mk-frame);
}
body.feature-page > main > .fp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .35;
  background-image: var(--mk-dots);
  background-size: 18px 18px;
  pointer-events: none;
}
body.feature-page > main > .fp-hero > .fp-hero-glow { display: none; }
body.feature-page > main > .fp-hero > .fp-hero-inner { width: 100%; max-width: none; margin: 0; }
body.feature-page > main > .fp-hero .fp-hero-copy p { color: #2e3150; }
@media (min-width: 1000px) {
  body.feature-page > main > .fp-hero:has(+ .fp-answer) { padding-bottom: clamp(128px, 11vw, 160px); }
  body.feature-page > main > .fp-hero + .fp-answer {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: calc(var(--mk-wrap) - 2 * var(--mk-pad));
    margin-top: clamp(-112px, -9vw, -88px);
    padding: clamp(24px, 2.6vw, 34px);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(30 36 120 / .08), 0 30px 60px -30px rgb(30 36 120 / .5);
  }
}
@media (max-width: 720px) {
  body.feature-page > main > .fp-hero { border-radius: 22px; }
}

/* customers index: the story cards ride up onto the hero frame */
body.customers-index > main > .customers-library > .customer-exact-grid { box-sizing: border-box; width: var(--mk-wrap); max-width: none; margin-inline: auto; }
@media (min-width: 1000px) {
  body.customers-index > main > .customers-hero:has(+ .customers-library) { padding-bottom: clamp(150px, 13vw, 190px); }
  body.customers-index > main > .customers-hero + .customers-library {
    position: relative;
    z-index: 1;
    margin-top: clamp(-136px, -11vw, -110px);
    padding-top: 0;
  }
  body.customers-index > main > .customers-library > .customer-exact-grid { width: calc(var(--mk-wrap) - 2 * var(--mk-pad)); }
}

/* customer stories: headline left, result figure right */
@media (min-width: 1100px) {
  body:not(.landing-page) > main > .case-hero > .customer-shell:has(> .case-result-figure) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 56px);
    align-items: center;
  }
  body:not(.landing-page) > main > .case-hero > .customer-shell:has(> .case-result-figure) > .case-breadcrumb { grid-column: 1 / -1; }
  body:not(.landing-page) > main > .case-hero > .customer-shell:has(> .case-result-figure) > .case-article-head { grid-column: 1; }
  body:not(.landing-page) > main > .case-hero > .customer-shell:has(> .case-result-figure) > .case-result-figure { grid-column: 2; margin: 0; }
  /* the dark ROI card (Tinka) must fit half the shell */
  body:not(.landing-page) main .case-hero .case-roi-visual { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); min-height: 0; }
  body:not(.landing-page) main .case-hero .case-roi-copy { padding: 36px 32px; }
  body:not(.landing-page) main .case-hero .case-roi-copy h2 { font-size: clamp(1.9rem, 2.6vw, 2.5rem); }
  body:not(.landing-page) main .case-hero .case-roi-shift { grid-template-columns: 1fr; gap: 14px; }
  body:not(.landing-page) main .case-hero .case-roi-shift > span { display: none; }
  body:not(.landing-page) main .case-hero .case-roi-shift dd { font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
}
/* the ROI card is dark: keep its own light text over the kit's ink headings */
body:not(.landing-page) main .case-roi-copy h2 { color: #fff; }
body:not(.landing-page) main .case-hero .case-roi-copy > p { color: rgba(255,255,255,.68); }
body.industry-page > main > .paper-industry-hero + :is(.hub-lanes, .integration-fact-strip, .integration-proof, .api-proof) { border-top: 0; border-bottom: 0; }
body.customers-index > main > .customers-hero > .customers-hero-inner { padding-top: clamp(24px, 4vw, 56px); }

/* shared seo-hero template (features, compare "vs" pages, buyer pages): the first
   headed section rides up onto the hero frame as a white card */
@media (min-width: 1000px) {
  body:not(.landing-page):not(.pricing-page) > main > .seo-hero:has(+ .seo-section > .seo-shell > .seo-section-head:first-child) {
    padding-bottom: clamp(128px, 11vw, 160px);
  }
  body:not(.landing-page):not(.pricing-page) > main > .seo-hero + .seo-section:has(> .seo-shell > .seo-section-head:first-child) {
    position: relative;
    z-index: 1;
    margin-top: clamp(-112px, -9vw, -88px);
    padding-top: 0;
    background: transparent;
  }
  body:not(.landing-page):not(.pricing-page) > main > .seo-hero + .seo-section:has(> .seo-shell > .seo-section-head:first-child) > .seo-shell {
    box-sizing: border-box;
    width: calc(var(--mk-wrap) - 2 * var(--mk-pad));
    padding: clamp(24px, 2.6vw, 34px);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(30 36 120 / .08), 0 30px 60px -30px rgb(30 36 120 / .5);
  }
}

/* legal pages: the hero sits on the gradient frame like every other page */
body.legal-page > main > .legal-hero,
body.legal-page > .legal-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  width: var(--mk-wrap);
  margin: calc(var(--mk-header) + 14px) auto 0;
  padding: clamp(40px, 6vw, 72px) var(--mk-pad) clamp(40px, 5.5vw, 64px);
  border: 0;
  border-radius: 28px;
  background: var(--mk-frame);
}
body.legal-page > main > .legal-hero::after,
body.legal-page > .legal-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .35;
  background-image: var(--mk-dots);
  background-size: 18px 18px;
  pointer-events: none;
}
body.legal-page .legal-hero > .shell { width: 100%; max-width: none; margin: 0; padding: 0; }
@media (max-width: 720px) {
  body.legal-page > main > .legal-hero, body.legal-page > .legal-hero { border-radius: 22px; }
}