/* 2026-10-26 refresh: calm forest-and-sage scheme, Manrope type, framed product views, sales-led homepage. */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/manrope-latin-20261026.woff2") format("woff2");
}
:root {
  --ink: #1d2823;
  --muted: #54605a;
  --paper: #f0f1ee;
  --tint: #e6e9e3;
  --card: #f8f9f6;
  --line: #c9cfca;
  --card-line: #cfd6cd;
  --brand: #1d3e30;
  --accent: #34523f;
  --green: #34523f;
  --leaf: #6b8a64;
  --gold: #76592b;
  --dark: #0f1a14;
  --deep: #173024;
  --signal: #bec9ad;
  --signal-hover: #d2d9c7;
  --on-dark: #f1f3ed;
  --on-dark-muted: #bac4b9;
  --dark-line: #2b382e;
  --glow: radial-gradient(55% 70% at 80% 30%, #bec9ad1f 0%, transparent 70%);
  --card-shadow: 0 22px 40px -30px #1d3e3066;
  --sans: Manrope, Inter, Arial, Helvetica, sans-serif;
}

body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 450; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 650; letter-spacing: -0.03em; }
em { font-style: normal; }
::selection { background: var(--signal); color: #0b1310; }
:focus-visible { outline: 3px solid #6f856d; outline-offset: 4px; }
.eyebrow { color: #4b6546; font-size: 12px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.section-head h2 em, .story-copy h2 em, .deployment-summary h2 em { color: var(--accent); }

/* Buttons */
.btn { border-radius: 8px; font-weight: 700; font-size: 14px; padding-inline: 20px; transition: transform 160ms, background 160ms, border-color 160ms; }
.btn .icon { transition: transform 180ms; }
.btn:hover .icon { transform: translateX(3px); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: none; }
.btn-primary:hover { background: #142b20; border-color: #142b20; }
.btn-secondary { border-color: #89968a; color: var(--ink); background: transparent; }
.btn-secondary:hover { background: #e1e6df; }
.text-link { color: var(--brand); font-weight: 700; }
.text-link:hover { color: var(--accent); }

/* Header */
.site-header { background: #090f0cf2; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: var(--dark-line); }
.brand-by { color: var(--on-dark-muted); border-color: #465348; }
.main-nav > a, .nav-group > summary { font-weight: 550; }
.site-header .nav-cta { background: var(--signal); border-color: var(--signal); color: #141e17; box-shadow: none; }
.site-header .nav-cta:hover { background: var(--signal-hover); border-color: var(--signal-hover); }
.main-nav > a:hover, .nav-group > summary:hover,
.main-nav > a[aria-current="page"], .nav-group--current > summary,
.nav-group[open] > summary { color: var(--signal); }
.main-nav > a[aria-current="page"]::after { background: var(--signal); }
.main-nav > a[aria-current="page"]::after, .nav-group[open] > summary { border-bottom-color: var(--signal); }
.main-nav:has(.nav-group[open]) > a { color: var(--on-dark-muted); }
.site-header :focus-visible, .home-intro :focus-visible, .page-hero :focus-visible,
.section-dark :focus-visible, .site-footer :focus-visible, .cta-band :focus-visible { outline-color: var(--signal); }
.mega-panel { background: #f5f6f2; border-color: #b9c3ba; border-top-color: #788a68; border-radius: 12px; box-shadow: 0 24px 60px #050b0870; }
.mega-preview { background: #e2e7de; border-color: #c3ccc0; border-radius: 10px; }
.main-nav .mega-link:hover, .main-nav .mega-link:focus-visible { background: #e1e7dc; border-color: #bbc8b4; }
.mega-panel :focus-visible { outline-color: var(--accent); }
.mega-art-source, .mega-art-core { fill: #f5f6f2; }
.mega-art-result { fill: var(--signal); }

/* Dark introductions */
.home-intro { background: var(--dark); }
.page-hero { background: var(--glow), var(--dark); }
.home-intro, .page-hero { color: var(--on-dark); border-bottom: 1px solid var(--dark-line); }
.home-intro::before, .page-hero::before, .site-footer::before { opacity: 0.7; }
.home-intro .eyebrow, .page-hero .eyebrow { color: var(--on-dark-muted); }
.home-message h1 em, .page-intro h1 em, .cta-inner h2 em { color: var(--signal); background: none; -webkit-text-fill-color: currentColor; }
.home-intro .btn-primary, .page-hero .btn-primary, .cta-inner .btn-primary { background: var(--signal); border-color: var(--signal); color: #141e17; box-shadow: none; }
.home-intro .btn-primary:hover, .page-hero .btn-primary:hover, .cta-inner .btn-primary:hover { background: var(--signal-hover); border-color: var(--signal-hover); }
.home-intro .btn-secondary, .page-hero .btn-secondary, .cta-inner .btn-secondary { border-color: #778a7b; color: var(--on-dark); }
.home-intro .btn-secondary:hover, .page-hero .btn-secondary:hover, .cta-inner .btn-secondary:hover { background: #253329; border-color: var(--on-dark-muted); }
.breadcrumb { color: var(--on-dark-muted); }
.breadcrumb a, .page-hero .text-link { color: #d3dfc6; }
.breadcrumb a:hover, .page-hero .text-link:hover { color: var(--signal); }
.page-hero .lede, .home-message .lede { color: #c5cec2; }
.home-intro .product-shot figcaption, .page-hero .product-shot figcaption,
.hero-platform figcaption { color: var(--on-dark-muted); }
.platform-view-title { color: #e4e9df; }

/* Homepage hero */
.home-intro { padding: 72px 0 84px; overflow: hidden; }
@media (min-width: 761px) { .hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; } }
.home-message h1 { font-size: clamp(42px, 5vw, 70px); line-height: 1.06; max-width: 13ch; font-weight: 650; letter-spacing: -0.055em; }
.home-message .eyebrow { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; font-size: 11px; }
.eyebrow-dot { width: 22px; height: 2px; border-radius: 2px; background: var(--signal); box-shadow: none; }
.home-message .lede { font-size: 19px; line-height: 1.6; max-width: 44ch; margin-top: 26px; }
.home-message .actions { margin-top: 32px; }
.home-message .btn { min-height: 50px; font-size: 15px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 30px 0 0; padding: 0; list-style: none; color: #c5cec2; font-size: 13px; font-weight: 550; }
.hero-chips li { display: inline-flex; align-items: center; gap: 8px; }
.hero-chips .icon { width: 16px; height: 16px; color: var(--signal); }
.hero-visual { position: relative; min-width: 0; }
.hero-visual::before { content: ""; position: absolute; inset: -10% -10% -6% 0; background: radial-gradient(closest-side, #bec9ad30, transparent 72%); filter: blur(24px); z-index: -1; pointer-events: none; }
.platform-tabs.tab-list { border-bottom-color: var(--dark-line); }
.platform-tabs.tab-list button { color: #a7b3a5; }
.platform-tabs.tab-list button[aria-selected="true"] { color: var(--on-dark); border-bottom-color: var(--signal); }
.platform-tabs.tab-list button:hover { color: var(--on-dark); border-bottom-color: #6f856d; }
.platform-tabs.tab-list button:focus-visible { outline-color: var(--signal); }

/* Floating example answer: a dark glass card, like a live console note. */
.answer-card { position: absolute; left: -56px; bottom: 76px; width: min(340px, 78%); padding: 18px 20px; border: 1px solid #4e6652; border-radius: 14px; background: #1c3024f2; color: var(--on-dark); box-shadow: 0 30px 60px -20px #000000c0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2; pointer-events: none; }
.answer-card-label { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; color: var(--on-dark-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.answer-card-label .icon { width: 14px; height: 14px; color: var(--signal); }
.answer-q { margin: 0 0 10px auto; width: fit-content; max-width: 92%; padding: 9px 13px; border-radius: 12px 12px 4px 12px; background: var(--signal); color: #141e17; font-size: 13px; font-weight: 650; line-height: 1.45; }
.answer-a { padding: 11px 13px; border: 1px solid #ffffff1a; border-radius: 12px 12px 12px 4px; background: #ffffff0d; }
.answer-a p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--on-dark); }
.answer-a .answer-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.answer-sources span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid #4e6652; border-radius: 6px; background: #ffffff08; color: #d3dfc6; font-size: 11px; font-weight: 650; }
.answer-sources .icon { width: 12px; height: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .answer-card { animation: answer-in 700ms 400ms cubic-bezier(.2,.8,.2,1) both; }
  @keyframes answer-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}

/* Framed product views: every screenshot sits in a dark console window. */
.shot-link, .platform-screen {
  position: relative;
  padding-top: 30px;
  border: 1px solid #26372b;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 30px 60px -32px #0b131080;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms;
}
.shot-link::before, .platform-screen::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 30px;
  border-radius: 11px 11px 0 0;
  background:
    radial-gradient(circle at 16px 15px, #d9776b 4px, transparent 4.5px),
    radial-gradient(circle at 31px 15px, #d9b56b 4px, transparent 4.5px),
    radial-gradient(circle at 46px 15px, #79b77c 4px, transparent 4.5px),
    #1a2820;
  pointer-events: none;
}
.shot-link::after, .platform-screen::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: min(36%, 260px);
  height: 14px;
  transform: translateX(-50%);
  border-radius: 6px;
  background: #ffffff14;
  pointer-events: none;
}
.platform-screen { aspect-ratio: auto; }
.platform-screen img { aspect-ratio: 3 / 2; height: auto; }
.home-intro .shot-link, .page-hero .shot-link, .platform-screen, .section-dark .shot-link { border-color: #3a4c3f; box-shadow: 0 0 0 1px #ffffff08, 0 40px 80px -30px #000; }
.shot-link:hover, .platform-screen:hover { border-color: var(--leaf); transform: translateY(-3px); box-shadow: 0 36px 70px -30px #0b1310a0; }
.home-intro .platform-screen:hover, .page-hero .shot-link:hover { box-shadow: 0 0 0 1px #bec9ad33, 0 44px 90px -30px #000; }
.shot-expand, .platform-enlarge { border-radius: 8px; border-color: var(--card-line); color: var(--brand); background: #fff; }
.shot-link:hover .shot-expand, .platform-screen:hover .platform-enlarge { background: #e2e7de; }
.product-shot { position: relative; }
.product-shot figcaption { margin-top: 14px; color: var(--muted); }
.product-shot figcaption span:first-child { color: var(--ink); font-weight: 700; }
.section-dark .product-shot figcaption span:first-child { color: var(--on-dark); }
/* A soft sage glow lifts each feature screen instead of a coloured block. */
.feature-story > .product-shot::before {
  content: "";
  position: absolute;
  inset: 4% 6% -2%;
  z-index: -1;
  background: radial-gradient(closest-side, #8ea58640, transparent);
  filter: blur(30px);
  pointer-events: none;
}
.feature-story { isolation: isolate; }
.section-dark .feature-story > .product-shot::before { background: radial-gradient(closest-side, #bec9ad30, transparent); }

/* Award */
.award-recognition { background: #141d17; border-color: var(--dark-line); }
.award-mark { color: #c3a66f; }
.award-label { color: #d1bc8d; }
.award-date, .award-context { color: var(--on-dark-muted); }
.award-copy h2 { color: var(--on-dark); }
.award-inner > .text-link { color: #d3dfc6; }
.award-inner > .text-link:hover { color: var(--signal); }

/* Stats */
.stat-band { background: var(--paper); border-bottom: 1px solid var(--line); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-block: 48px; }
.stat-grid > div { display: flex; flex-direction: column; gap: 4px; padding: 4px 28px; border-left: 1px solid var(--line); }
.stat-grid > div:first-child { border-left: 0; padding-left: 0; }
.stat-grid strong { font-size: clamp(44px, 4.4vw, 64px); line-height: 1; font-weight: 750; letter-spacing: -0.05em; color: var(--brand); }
.stat-label { color: var(--ink); font-size: 15px; font-weight: 700; margin-top: 10px; }
.stat-grid span:last-child { color: #4f5d51; font-size: 14px; line-height: 1.5; }

/* Pain points */
.pain-section { background: var(--paper); }
.pain-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pain-grid article { padding: 28px 26px; border: 1px solid var(--card-line); border-radius: 14px; background: var(--card); }
.pain-grid .icon { width: 24px; height: 24px; padding: 0; color: var(--gold); background: none; }
.pain-grid h3 { margin: 20px 0 10px; font-size: 20px; font-weight: 700; line-height: 1.25; }
.pain-grid p { margin: 0; color: #4b584e; font-size: 15px; line-height: 1.65; }
.pain-fix { display: flex; align-items: center; gap: 14px; margin: 24px 0 0; padding: 18px 22px; border: 1px solid #c3cdbf; border-left: 3px solid var(--leaf); border-radius: 12px; background: #e3e8df; color: #4b584e; font-size: 16px; line-height: 1.55; }
.pain-fix .icon { flex-shrink: 0; width: 18px; height: 18px; padding: 5px; box-sizing: content-box; border-radius: 50%; background: var(--brand); color: #fff; }
.pain-fix strong { color: var(--brand); font-weight: 750; }

/* Dark bands */
.section-dark { background: var(--deep); color: var(--on-dark); }
.governance-story { background: var(--dark); }
.section-dark p, .section-dark .product-shot figcaption { color: var(--on-dark-muted); }
.section-dark .eyebrow, .section-dark .control-strip svg { color: var(--on-dark-muted); }
.section-dark em, .section-dark .section-head h2 em, .section-dark .story-copy h2 em { color: var(--signal); }
.section-dark .text-link { color: var(--signal); }
.section-dark .text-link:hover { color: var(--on-dark); }
.control-strip, .evaluation-grid { border-color: #ffffff24; }
.step-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.step-grid li { position: relative; padding: 28px 26px 30px; border: 1px solid #ffffff24; border-radius: 14px; background: #ffffff0a; }
.step-grid .icon { width: 36px; height: 36px; padding: 0; color: var(--signal); background: none; stroke-width: 1.5; }
.step-index { position: absolute; top: 18px; right: 22px; color: #82978a; font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; }
.step-grid h3 { margin: 22px 0 10px; color: var(--on-dark); font-size: 22px; font-weight: 700; }
.step-grid p { margin: 0; font-size: 15px; line-height: 1.65; }

/* Outcome cards: soft tinted tiles. */
.home-value { background: var(--paper); }
.outcome-grid { gap: 16px; }
.outcome-grid article, .outcome-grid article:nth-child(n) { padding: 28px 26px; border: 1px solid #c3cdbf; border-radius: 14px; background: #e3e8df; box-shadow: none; transition: transform 180ms, border-color 180ms; }
.outcome-grid article:nth-child(2) { background: #dde6e1; }
.outcome-grid article:nth-child(3) { background: #e8e5d9; }
.outcome-grid article:nth-child(4) { background: #e0e4e5; }
.outcome-grid article:hover { transform: translateY(-4px); border-color: #49674f; box-shadow: none; }
.outcome-marker { color: var(--brand); }
.outcome-marker > .icon { width: 32px; height: 32px; padding: 0; background: none; stroke-width: 1.5; }
.outcome-marker .index { color: #4f5d51; }
.outcome-grid h3, .case-panel h3, .capability-group h3, .pricing-plan h3 { font-weight: 700; }
.outcome-grid h3 a { color: var(--ink); }
.outcome-grid p { color: #4f5d51; }

/* Showcase sections */
.analytics-showcase { background: var(--tint); border-block: 1px solid var(--line); }
.analytics-showcase .eyebrow, .studio-story .eyebrow, .home-use-cases .eyebrow, .detail-related .eyebrow { color: #4b6546; }
.analytics-showcase .wide-shot { max-width: 1120px; }
.analytics-showcase .wide-shot .shot-link { box-shadow: 0 50px 90px -46px #1d3e30a0; }
.knowledge-story, .section-tint { background: var(--tint); }
.studio-story { background: var(--paper); }
.story-copy h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -0.045em; }
.story-copy p { color: var(--muted); font-size: 17px; line-height: 1.7; }
.section-dark .story-copy p { color: var(--on-dark-muted); }
.check-list .icon { color: #fff; background: var(--accent); border-radius: 50%; padding: 3px; box-sizing: content-box; width: 12px; height: 12px; }
.section-head h2 { font-size: clamp(34px, 3.8vw, 52px); line-height: 1.08; letter-spacing: -0.045em; }
.section-head p { color: var(--muted); font-size: 17px; line-height: 1.7; }
.section-dark .section-head p { color: var(--on-dark-muted); }

/* Integrations */
.integrations-section { background: var(--paper); }
.integration-selection { border: 1px solid #ffffff1a; border-radius: 14px; background: var(--deep); color: var(--on-dark); box-shadow: none; }
.integration-selection > strong { color: var(--signal); }
.integration-selection span, .integration-selection p { color: var(--on-dark-muted); }
.integration-logo-grid { gap: 12px; border: 0; }
.integration-logo-grid .integration-provider, .integration-logo-grid .integration-provider:nth-child(n) { border: 1px solid #d3d9d1; border-radius: 12px; background: var(--card); transition: transform 180ms, border-color 180ms; }
@media (hover: hover) { .integration-logo-grid .integration-provider:hover { background: var(--card); border-color: var(--accent); transform: translateY(-3px); } }
.integration-more li { color: var(--muted); }

/* Use cases & deployment */
.home-use-cases { background: var(--paper); }
.tab-list button { border-radius: 8px; }
.tab-list button[aria-selected="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
.case-panel { margin-top: 18px; padding: 34px; border: 1px solid var(--card-line); border-radius: 14px; background: var(--card); box-shadow: none; }
.case-evidence { border-color: var(--line); }
.case-evidence .small-label { color: var(--accent); }
.deployment-options > div { border-color: var(--line); }
.deployment-options dt { color: var(--brand); }

/* Quick answers */
.quick-answers { background: var(--paper); }
.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.quick-card { display: flex; flex-direction: column; padding: 26px 24px; border: 1px solid var(--card-line); border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; transition: transform 180ms, border-color 180ms; }
.quick-card:hover { transform: translateY(-4px); border-color: #49674f; }
.quick-card h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; line-height: 1.35; }
.quick-card p { margin: 0 0 20px; color: #4f5d51; font-size: 15px; line-height: 1.6; }
.quick-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: #25452f; font-size: 13px; font-weight: 750; }

/* CTA & footer */
.cta-band { background: #111c16; border-top: 1px solid var(--dark-line); color: var(--on-dark); padding-block: 88px; }
.cta-inner h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.08; max-width: 22ch; font-weight: 650; letter-spacing: -0.05em; }
.cta-inner p { color: #c5cec2; font-size: 17px; }
.cta-inner .btn { min-height: 52px; font-size: 15px; }
.site-footer { background: #080e0b; border-top-color: var(--dark-line); }
.footer-brand > p { color: #e4e9df; }
.footer-column h2 { color: var(--on-dark-muted); letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; font-weight: 700; }
.footer-column a, .footer-policies a { color: #c5cec2; }
.footer-column a:hover, .footer-policies a:hover { color: var(--on-dark); }
.footer-location, .chat-status, .footer-bottom p, .footer-bottom a { color: #9fab9c; }
.footer-policies, .footer-bottom { border-color: var(--dark-line); }

/* Inner pages */
.page-hero { padding: 28px 0 72px; }
.page-intro h1 { font-size: clamp(38px, 4.6vw, 62px); line-height: 1.06; font-weight: 650; letter-spacing: -0.05em; }
.page-intro .lede { font-size: 18px; line-height: 1.65; }
.page-intro .btn { min-height: 48px; }
.section-nav { background: var(--card); border-color: var(--line); }
.section-nav a:hover, .section-nav a[aria-current] { color: var(--brand); }
.product-availability, .availability-note { border-left-color: var(--leaf); }
.capability-group:nth-of-type(3n), .capability-group:nth-of-type(3n + 2) { background: var(--tint); }
.capability-intro h2 { font-weight: 650; }
.detail-steps li, .detail-steps li:nth-child(n) { border-top-color: var(--leaf); }
.detail-steps .index, .principle-list .index { color: var(--gold); }
.detail-capabilities .availability-note { border-top-color: var(--line); }
.detail-related { background: var(--tint); }
.detail-related-links a { border-color: var(--card-line); border-radius: 12px; background: var(--card); }
.sector-nav { background: var(--card); border: 1px solid var(--card-line); border-left: 3px solid var(--leaf); border-radius: 12px; }
.sector-story { border-color: var(--line); }
.sector-detail > div { border-left-color: var(--leaf); }
.source-rail { background: var(--tint); border-radius: 12px; }
.system-map { background: var(--card); border-color: var(--card-line); border-radius: 14px; box-shadow: var(--card-shadow); }
.architecture-layer[open] { background: var(--tint); }
.audit-rail { background: var(--deep); border-radius: 12px; }
.audit-rail span { color: #d3dfc6; }
.pricing-plan { background: var(--card); border-color: var(--card-line); border-radius: 14px; box-shadow: none; }
.pricing-plan--featured { background: #e3e8df; border-color: #a9b7a4; border-top: 4px solid var(--brand); box-shadow: var(--card-shadow); }
.pricing-plan li .icon { color: var(--accent); }
.briefing-form-wrap { background: var(--card); border: 1px solid var(--card-line); border-top: 4px solid var(--brand); border-radius: 14px; box-shadow: var(--card-shadow); }
input, select, textarea { background: #fff; border-color: #b9c3ba; border-radius: 8px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.faq-list details { border-color: var(--line); }
.faq-list details[open] { background: var(--card); border-radius: 12px; }
.faq-list details[open] + details { border-top-color: var(--line); }
.company-wordmark { color: var(--brand); }
.contact-steps span { color: var(--gold); }
.brochure-prompt, .brochure-dialog { background: var(--card); }
.brochure-prompt { border-top-color: var(--brand); }
.brochure-demo-option input { accent-color: var(--brand); }
.brochure-dialog::backdrop, .screenshot-dialog::backdrop { background: #050b08cf; }
.integrations-page .breadcrumb { color: var(--muted); }
.integrations-page .breadcrumb a { color: var(--brand); }

@media (max-width: 1100px) and (min-width: 761px) {
  .hero-grid { gap: 40px; }
}
@media (max-width: 1100px) {
  .answer-card { left: -20px; width: min(290px, 64%); }
  .pain-grid, .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid strong { font-size: 44px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .answer-card { display: none; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .stat-grid > div:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  .home-intro { padding: 32px 0 40px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .outcome-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .home-message h1 { font-size: 42px; max-width: none; }
  .home-message .lede { font-size: 16px; margin-top: 18px; }
  .home-message .actions { margin-top: 24px; }
  .home-message .btn { min-height: 46px; font-size: 14px; }
  .hero-chips { margin-top: 22px; font-size: 12px; gap: 8px 16px; }
  .answer-card { position: relative; left: auto; bottom: auto; width: auto; margin: 18px 0 0; }
  .shot-link, .platform-screen { padding-top: 22px; border-radius: 10px; }
  .shot-link::before, .platform-screen::before {
    height: 22px;
    border-radius: 9px 9px 0 0;
    background:
      radial-gradient(circle at 12px 11px, #d9776b 3px, transparent 3.5px),
      radial-gradient(circle at 23px 11px, #d9b56b 3px, transparent 3.5px),
      radial-gradient(circle at 34px 11px, #79b77c 3px, transparent 3.5px),
      #1a2820;
  }
  .shot-link::after, .platform-screen::after { top: 6px; height: 10px; }
  .shot-link:hover, .platform-screen:hover { transform: none; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding-block: 32px; }
  .stat-grid > div, .stat-grid > div:first-child { padding: 0; border-left: 0; }
  .stat-label { font-size: 14px; }
  .pain-grid, .quick-grid, .step-grid { grid-template-columns: 1fr; gap: 12px; }
  .pain-grid article, .quick-card, .outcome-grid article, .outcome-grid article:nth-child(n) { padding: 22px 20px; }
  .pain-fix { align-items: flex-start; font-size: 15px; padding: 16px 18px; }
  .case-panel { padding: 24px 20px; }
  .main-nav { background: #f5f6f2; color: var(--ink); }
  .main-nav > a:hover, .nav-group > summary:hover,
  .main-nav > a[aria-current="page"], .nav-group--current > summary,
  .nav-group[open] > summary, .main-nav:has(.nav-group[open]) > a { color: var(--brand); }
  .mobile-nav-link:hover { color: var(--brand); }
  .mega-main { background: #f5f6f2; }
  .site-header .main-nav :focus-visible { outline-color: var(--accent); }
  .menu-toggle { border-color: #71836f; }
  .page-intro h1 { font-size: 38px; }
  .page-intro .lede { font-size: 16px; }
  .cta-band { padding-block: 56px; }
    .cta-inner h2 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn .icon, .shot-link, .platform-screen, .outcome-grid article, .quick-card, .integration-provider { transition: none; }
  .btn:hover, .btn:hover .icon, .shot-link:hover, .platform-screen:hover, .outcome-grid article:hover, .quick-card:hover { transform: none; }
}
/* Decorative backdrops never widen the page. */
.section:has(.feature-story), .analytics-showcase { overflow-x: clip; }

/* Captions on dark heroes stay readable at every width. */
.home-intro .product-shot figcaption span:first-child,
.page-hero .product-shot figcaption span:first-child { color: var(--on-dark); }
.detail-related-links a { align-items: center; padding: 16px 18px; min-height: 60px; }

/* Phone layout: tidy rows, comfortable tap targets, nothing smaller than 12px. */
@media (max-width: 760px) {
  .section { padding-block: 64px; }
  .section-head { margin-bottom: 30px; }
  .section-head h2 { font-size: 34px; }
  .story-copy h2 { font-size: 31px; }
  .section-head p, .story-copy p { font-size: 16px; }

  /* Header */
  .nav-shell { gap: 10px; }
  .site-header .nav-cta { min-height: 42px; padding: 0 16px; font-size: 13px; gap: 8px; }
  .site-header .nav-cta .icon { width: 15px; height: 15px; }
  .menu-toggle { width: 44px; height: 44px; border-radius: 8px; }
  .main-nav { border-radius: 0 0 14px 14px; box-shadow: 0 24px 40px -20px #050b0899; }

  /* Hero product tabs become even chips */
  .platform-tabs.tab-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; border-bottom: 0; }
  .platform-tabs.tab-list button,
  .platform-tabs.tab-list button:nth-child(n) { flex: 1 1 calc(33.333% - 8px); grid-column: auto; min-height: 44px; padding: 8px 10px; border: 1px solid #34463a; border-radius: 8px; background: #ffffff08; font-size: 13px; gap: 6px; flex-wrap: nowrap; }
  .platform-tabs.tab-list button[aria-selected="true"] { background: var(--signal); border-color: var(--signal); color: #141e17; }
  .platform-tabs .icon { width: 15px; height: 15px; }
  .answer-card-label, .answer-sources span { font-size: 12px; }

  /* Use-case tabs and page section links scroll sideways as one tidy row */
  .home-use-cases .tab-list, .section-nav .container {
    display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    padding: 2px 0 6px; border: 0;
  }
  .home-use-cases .tab-list { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .home-use-cases { overflow-x: clip; }
  .home-use-cases .tab-list::-webkit-scrollbar, .section-nav .container::-webkit-scrollbar { display: none; }
  .home-use-cases .tab-list button { flex: 0 0 auto; min-height: 44px; padding: 10px 16px; border: 1px solid var(--card-line); border-radius: 8px; background: var(--card); font-size: 14px; white-space: nowrap; scroll-snap-align: start; }
  .home-use-cases .tab-list button[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
  .home-use-cases .tab-list button .icon { width: 14px; }
  .case-panel { margin-top: 12px; }
  .section-nav { padding-block: 12px; }
  .section-nav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--card-line); border-radius: 8px; background: var(--paper); font-size: 13px; white-space: nowrap; scroll-snap-align: start; }

  /* Integrations: compact logo tiles and wrapping name chips */
  .integration-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .integration-logo-grid .integration-provider,
  .integration-logo-grid .integration-provider:nth-child(n) { min-height: 92px; padding: 14px 6px; gap: 8px; border-radius: 12px; }
  .integration-logo-grid .integration-provider:last-child:nth-child(odd) { grid-column: auto; }
  .integration-logo-grid .integration-provider img { width: 28px; height: 28px; flex-basis: 28px; }
  .integration-logo-grid .integration-provider strong { font-size: 12.5px; line-height: 1.3; }
  .integration-more ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .integration-more li { padding: 6px 12px; border: 1px solid var(--card-line); border-radius: 8px; background: var(--card); font-size: 13px; line-height: 1.4; }
  .integration-selection { padding: 22px; }

  /* Cards and steps breathe a little less on small screens */
  .stat-band .stat-grid strong { font-size: 42px; }
  .step-grid li { padding: 24px 22px; }
  .step-grid h3 { font-size: 21px; margin-top: 18px; }
  .step-index { font-size: 40px; }
  .pain-grid h3 { margin-top: 16px; font-size: 19px; }
  .deployment-options > div { gap: 14px; }

  /* Footer: brand on top, two even link columns, 44px tap rows */
  .site-footer { padding: 48px 0 28px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand > p { font-size: 20px; line-height: 1.35; margin-top: 16px; }
  .footer-column h2 { font-size: 12px; margin-bottom: 6px; }
  .footer-column a { display: flex; align-items: center; min-height: 44px; font-size: 14px; }
  .footer-location { font-size: 12px; }
  .footer-policies { gap: 0 18px; }
  .footer-policies a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
  .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }

  .system-map figcaption .small-label, .audit-rail span { font-size: 12px; }
  .wordmark { min-height: 44px; }
}
@media (max-width: 380px) {
  .home-message h1 { font-size: 37px; }
  .site-header .nav-cta { padding: 0 13px; font-size: 12.5px; }
  .site-header .nav-cta .icon { display: none; }
  .platform-tabs.tab-list button, .platform-tabs.tab-list button:nth-child(n) { font-size: 12px; padding-inline: 8px; }
  .integration-logo-grid .integration-provider strong { font-size: 12px; }
  .section-head h2 { font-size: 30px; }
}