/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Custom animation for critical findings flash */
@keyframes pulse-once {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
    background-color: rgb(254 226 226); /* red-100 */
  }
}

.animate-pulse-once {
  animation: pulse-once 1s ease-in-out;
}

/* Compact briefing prose for analysis summaries */
.analysis-summary-markdown {
  color: rgb(55 65 81); /* gray-700 */
  font-size: 1rem;
  line-height: 1.7;
}

.analysis-summary-markdown > *:first-child {
  margin-top: 0;
}

.analysis-summary-markdown > *:last-child {
  margin-bottom: 0;
}

.analysis-summary-markdown h1,
.analysis-summary-markdown h2,
.analysis-summary-markdown h3,
.analysis-summary-markdown h4 {
  color: rgb(17 24 39); /* gray-900 */
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.analysis-summary-markdown p {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.analysis-summary-markdown ul,
.analysis-summary-markdown ol {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  padding-left: 1.25rem;
}

.analysis-summary-markdown ul {
  list-style: disc;
}

.analysis-summary-markdown ol {
  list-style: decimal;
}

.analysis-summary-markdown li {
  margin-top: 0.25rem;
}

.analysis-summary-markdown strong {
  color: rgb(17 24 39); /* gray-900 */
  font-weight: 600;
}

.analysis-summary-markdown a {
  color: rgb(26 180 153); /* brand-secondary */
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Compact markdown styling for activity feed */
.feed-markdown {
  font-size: 0.8125rem;
  line-height: 1.5;
}

.feed-markdown > *:first-child {
  margin-top: 0;
}

.feed-markdown > *:last-child {
  margin-bottom: 0;
}

.feed-markdown h1,
.feed-markdown h2,
.feed-markdown h3,
.feed-markdown h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.5em;
  color: rgb(17 24 39); /* gray-900 */
}

.feed-markdown h2 {
  padding-bottom: 0.25em;
  border-bottom: 1px solid rgb(229 231 235); /* gray-200 */
}

.feed-markdown h3 {
  color: rgb(55 65 81); /* gray-700 */
}

.feed-markdown p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.feed-markdown ul,
.feed-markdown ol {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 1.25em;
}

.feed-markdown li {
  margin-top: 0.125em;
  margin-bottom: 0.125em;
}

.feed-markdown strong {
  font-weight: 600;
  color: rgb(17 24 39); /* gray-900 */
}

.feed-markdown hr {
  margin: 0.75em 0;
  border: none;
  border-top: 1px solid rgb(209 213 219); /* gray-300 */
}

/* Table styling for feed */
.feed-markdown table {
  width: 100%;
  margin: 0.75em 0;
  font-size: 0.75rem;
  border-collapse: collapse;
  border: 1px solid rgb(229 231 235); /* gray-200 */
}

.feed-markdown thead {
  background-color: rgb(249 250 251); /* gray-50 */
}

.feed-markdown th {
  padding: 0.375rem 0.5rem;
  text-align: left;
  font-weight: 600;
  color: rgb(55 65 81); /* gray-700 */
  border-bottom: 1px solid rgb(209 213 219); /* gray-300 */
}

.feed-markdown td {
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid rgb(243 244 246); /* gray-100 */
  vertical-align: top;
}

.feed-markdown tbody tr:hover {
  background-color: rgb(249 250 251); /* gray-50 */
}

.feed-markdown code {
  font-size: 0.75rem;
  padding: 0.125rem 0.25rem;
  background-color: rgb(243 244 246); /* gray-100 */
  border-radius: 0.25rem;
}

.feed-markdown pre {
  margin: 0.5em 0;
  padding: 0.5rem;
  font-size: 0.75rem;
  background-color: rgb(249 250 251); /* gray-50 */
  border-radius: 0.375rem;
  overflow-x: auto;
}

.feed-markdown blockquote {
  margin: 0.5em 0;
  padding-left: 0.75em;
  border-left: 2px solid rgb(209 213 219); /* gray-300 */
  color: rgb(107 114 128); /* gray-500 */
}

/* Legal page typography */
.legal-prose {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgb(55 65 81); /* gray-700 */
}

.legal-prose h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: rgb(17 24 39); /* gray-900 */
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.legal-prose h2 {
  font-size: 1.15rem;
  font-weight: 600;
  color: rgb(17 24 39); /* gray-900 */
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid rgb(229 231 235); /* gray-200 */
}

.legal-prose h3 {
  font-size: 1rem;
  font-weight: 600;
  color: rgb(17 24 39); /* gray-900 */
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.legal-prose p {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.legal-prose ol,
.legal-prose ul {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
}

.legal-prose ol {
  list-style-type: decimal;
}

.legal-prose ul {
  list-style-type: disc;
}

.legal-prose li {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}

.legal-prose li > p {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.legal-prose strong {
  font-weight: 600;
  color: rgb(17 24 39); /* gray-900 */
}

.legal-prose a {
  color: rgb(79 70 229); /* indigo-600 */
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-prose a:hover {
  color: rgb(67 56 202); /* indigo-700 */
}

.legal-prose table {
  width: 100%;
  margin: 1rem 0;
  font-size: 0.8125rem;
  border-collapse: collapse;
  border: 1px solid rgb(229 231 235); /* gray-200 */
}

.legal-prose thead {
  background-color: rgb(249 250 251); /* gray-50 */
}

.legal-prose th {
  padding: 0.625rem 0.75rem;
  text-align: left;
  font-weight: 600;
  color: rgb(55 65 81); /* gray-700 */
  border-bottom: 1px solid rgb(209 213 219); /* gray-300 */
}

.legal-prose td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid rgb(243 244 246); /* gray-100 */
  vertical-align: top;
}

.legal-prose tbody tr:hover {
  background-color: rgb(249 250 251); /* gray-50 */
}

.legal-prose em {
  font-style: italic;
}

/* Hide tool call events when "show tools" is unchecked.
   Uses CSS so newly streamed elements are hidden instantly. */
.hide-tool-events [data-activity-feed-target="toolEvent"] {
  display: none;
}

/* ==========================================================================
   LANDING PAGE — Refined Minimalist Design
   Inspired by isomeet.com, popcorn.space, shuttle.zip
   Brand: Geist font, #EF6438 primary, #1AB499 secondary
   ========================================================================== */

:root {
  --l-primary: #1AB499;
  --l-secondary: #EF6438;
  --l-text: #0A0A0A;
  --l-text-secondary: #4B5563;
  --l-text-muted: #5F6872;
  --l-bg: #ffffff;
  --l-bg-subtle: #FAFAFA;
  --l-border: #E5E7EB;
  --l-border-light: #F3F4F6;
  --l-max-width: 1120px;
  --l-transition: 0.2s ease;
}

/* ---------- Geometric Grid Background ---------- */

.landing-grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.026) 1px, transparent 1px);
  background-size: 84px 84px;
}

.landing-grid-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 82% 68% at 50% 24%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.58) 52%, rgba(255,255,255,0.9) 100%);
}

.landing-body > *:not(.landing-grid-bg) {
  position: relative;
  z-index: 1;
}

/* ---------- Scroll Animations ---------- */

.js [data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js [data-animate].animate-in {
  opacity: 1;
  transform: translateY(0);
}
.js [data-animate][data-delay="1"] { transition-delay: 0.08s; }
.js [data-animate][data-delay="2"] { transition-delay: 0.16s; }
.js [data-animate][data-delay="3"] { transition-delay: 0.24s; }

[data-entrance] {
  opacity: 0;
  transform: translateY(16px);
  animation: landingFadeIn 0.6s ease forwards;
}
[data-entrance="1"] { animation-delay: 0.05s; }
[data-entrance="2"] { animation-delay: 0.15s; }
[data-entrance="3"] { animation-delay: 0.25s; }
[data-entrance="4"] { animation-delay: 0.35s; }
[data-entrance="5"] { animation-delay: 0.5s; }

@keyframes landingFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-animate], [data-entrance] { opacity: 1; transform: none; transition: none; animation: none; }
  .landing-body > .landing-skip-link,
  .landing-nav,
  .landing-nav-link,
  .landing-nav-more-trigger svg,
  .landing-nav-more-link,
  .landing-locale-switcher a,
  .landing-btn-primary,
  .landing-btn-nav,
  .landing-mobile-menu,
  .landing-mobile-menu-link { transition: none; animation: none; }
  .landing-btn-primary:hover,
  .landing-btn-nav:hover { transform: none; }
}

/* ---------- Navigation ---------- */

.landing-body > .landing-skip-link {
  display: block;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 14px;
  color: #fff;
  background: #0a0a0a;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform var(--l-transition);
}

.landing-skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--l-primary);
  outline-offset: 2px;
}

.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

/* Keep desktop dropdowns above the later main stacking layer. */
.landing-body > .landing-nav {
  z-index: 100;
}

.landing-nav.scrolled {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--l-border-light);
}

.landing-nav-link {
  color: var(--l-text-secondary);
  font-weight: 500;
  font-size: 0.875rem;
  transition: color var(--l-transition);
  text-decoration: none;
}

.landing-nav-link:hover {
  color: var(--l-text);
}

.landing-nav-more {
  position: relative;
}

.landing-nav-more summary {
  list-style: none;
}

.landing-nav-more summary::-webkit-details-marker {
  display: none;
}

.landing-nav-more-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.landing-nav-more-trigger svg {
  width: 12px;
  height: 12px;
  transition: transform var(--l-transition);
}

.landing-nav-more[open] .landing-nav-more-trigger {
  color: var(--l-text);
}

.landing-nav-more[open] .landing-nav-more-trigger svg {
  transform: rotate(180deg);
}

.landing-nav-more-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 220px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--l-border-light);
  box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.22);
}

.landing-nav-more-link {
  display: block;
  padding: 9px 12px;
  white-space: nowrap;
  color: var(--l-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--l-transition), background var(--l-transition);
}

.landing-nav-more-link:hover,
.landing-nav-more-link:focus-visible {
  color: var(--l-text);
  background: var(--l-bg-subtle);
}

.landing-nav-more-trigger:focus-visible,
.landing-nav-more-link:focus-visible {
  outline: 2px solid var(--l-primary);
  outline-offset: 3px;
}

.landing-locale-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 6px;
  background: var(--l-bg-subtle);
  border: 1px solid var(--l-border-light);
}

.landing-locale-switcher a,
.landing-locale-switcher span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  transition: all var(--l-transition);
}

.landing-locale-switcher a:hover {
  color: var(--l-text);
}

/* ---------- Buttons ---------- */

.landing-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  background: var(--l-text);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  transition: all var(--l-transition);
  text-decoration: none;
}

.landing-btn-primary:hover {
  background: #1a1a1a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.landing-btn-nav {
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  background: var(--l-text);
  color: #fff;
  font-weight: 600;
  font-size: 0.8125rem;
  border: none;
  cursor: pointer;
  transition: all var(--l-transition);
  text-decoration: none;
}

.landing-btn-nav:hover {
  background: #1a1a1a;
  transform: translateY(-1px);
}

.landing-btn-nav--mobile {
  padding: 8px 13px;
  white-space: nowrap;
}

.landing-btn-nav:focus-visible,
.landing-hamburger:focus-visible,
.landing-mobile-menu-link:focus-visible,
.landing-mobile-locale-switcher a:focus-visible,
.landing-hero-cta-primary:focus-visible,
.landing-hero-cta-showcase:focus-visible {
  outline: 2px solid var(--l-primary);
  outline-offset: 3px;
}

/* ---------- Mobile hamburger & menu ---------- */

.landing-hamburger {
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--l-text);
  -webkit-tap-highlight-color: transparent;
}

.landing-mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.landing-mobile-menu--open {
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.landing-mobile-menu-inner {
  border-top: 1px solid var(--l-border-light);
  padding: 8px 0;
}

.landing-mobile-locale-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 18px 10px;
  border-bottom: 1px solid var(--l-border-light);
}

.landing-mobile-locale-switcher a,
.landing-mobile-locale-switcher span {
  padding: 6px 8px;
  color: var(--l-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.landing-mobile-locale-switcher span {
  color: var(--l-text);
  background: var(--l-bg-subtle);
}

.landing-mobile-menu-link {
  display: block;
  padding: 12px 24px;
  color: var(--l-text-muted);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color var(--l-transition), background var(--l-transition);
}

.landing-mobile-menu-link:hover {
  color: var(--l-text);
  background: var(--l-bg-subtle);
}

/* Welcome-back button for logged-in users */
.landing-btn-welcome {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  background: var(--l-primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  transition: all var(--l-transition);
  text-decoration: none;
}

.landing-btn-welcome:hover {
  background: color-mix(in srgb, var(--l-primary) 88%, black);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 180, 153, 0.25);
}

.landing-btn-welcome span {
  transition: transform var(--l-transition);
}

.landing-btn-welcome:hover span {
  transform: translateX(2px);
}

.landing-welcome-greeting {
  font-size: 0.8125rem;
  color: var(--l-text-muted);
  margin-bottom: 12px;
}

.landing-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid var(--l-border-light);
  color: var(--l-text);
  font-weight: 600;
  font-size: 0.875rem;
  transition: all var(--l-transition);
  text-decoration: none;
  white-space: nowrap;
}

.landing-btn-outline:hover {
  background: var(--l-text);
  border-color: var(--l-text);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.landing-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--l-text-secondary);
  font-weight: 500;
  font-size: 0.875rem;
  transition: color var(--l-transition);
  text-decoration: none;
}

.landing-btn-secondary:hover {
  color: var(--l-text);
}

/* ---------- Display Heading (Instrument Serif) ---------- */

.landing-display-heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  max-width: 1040px;
  font-size: clamp(2.75rem, 6vw, 4.45rem);
  font-weight: 800;
  font-optical-sizing: auto;
  letter-spacing: -0.032em;
  line-height: 1.05;
  color: var(--l-text);
  margin-bottom: 0;
}

.landing-display-heading em {
  font-style: normal;
  font-weight: 800;
  color: var(--l-primary);
}

/* ---------- Typography ---------- */

.landing-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--l-text-muted);
  margin-bottom: 12px;
}

.landing-section-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--l-text);
}

.landing-section-lead {
  font-size: 1.0625rem;
  color: var(--l-text-secondary);
  line-height: 1.7;
}

/* ---------- Hero ---------- */

/* Latest release, in place of the hero eyebrow: plain text, fed by the newest
   updates_page entry, so it never goes stale. */
.landing-hero-news {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--l-text-secondary);
  text-decoration: none;
  transition: color var(--l-transition);
}
.landing-hero-news strong { font-weight: 700; color: var(--l-primary); }
.landing-hero-news svg { width: 12px; height: 12px; transition: transform var(--l-transition); }
.landing-hero-news:hover { color: var(--l-text); }
.landing-hero-news:hover svg { transform: translateX(3px); }
.landing-hero-news:focus-visible { outline: 2px solid var(--l-primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .landing-hero-news, .landing-hero-news svg { transition: none; }
}

.landing-hero-subtitle {
  max-width: 720px;
  margin: 22px auto 0;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.65;
  color: var(--l-text-secondary);
}

.landing-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--l-text-secondary);
  background: var(--l-bg-subtle);
  border: 1px solid var(--l-border);
  margin-bottom: 28px;
}

.landing-hero-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--l-primary);
  animation: badgePulse 2.5s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ---------- Logo Bar ---------- */

.landing-logo-row {
  margin-top: 112px;
  padding-bottom: 32px;
}

.landing-logo-bar img {
  height: 28px;
  filter: grayscale(100%);
  opacity: 0.25;
  transition: all var(--l-transition);
}

.landing-logo-bar img:hover {
  filter: grayscale(0%);
  opacity: 0.6;
}

.landing-logo-bar img[alt="Balta"] {
  height: 36px;
}

@media (max-width: 768px) {
  .landing-logo-row {
    margin-top: 84px;
    padding-bottom: 24px;
  }

  .landing-logo-bar img {
    height: 18px;
  }
  .landing-logo-bar img[alt="Balta"] {
    height: 24px;
  }
  .landing-logo-bar {
    gap: 48px !important;
  }
}

/* ---------- Feature workbench (homepage) ----------
   One wide hairline frame (wider than the page column, with generous side margins):
   a two-tone headline, a feature index on the left and, for the selected feature, a
   statement plus a real product view with one lifted detail. Views are 2x crops of
   the demo workspaces (images/landing/workbench); the detail is placed in container
   units of the scene, so it stays over the same row as the scene grows. */

.landing-wb-section {
  --wb-faint: #9CA3AF;
  --wb-stage-buyer: #EFF5F3;
  --wb-stage-vendor: #F8F2EE;
  padding-top: 112px;
  padding-bottom: 112px;
  background: var(--l-bg-subtle);
}

.landing-wb {
  width: min(1440px, calc(100% - 2 * clamp(24px, 4.5vw, 72px)));
  margin: 0 auto;
  background: var(--l-bg);
  border: 1px solid var(--l-border);
}

.landing-wb-head { padding: 52px 56px 44px; }

.landing-wb-title,
.landing-wb-claim {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  color: var(--l-text);
}
.landing-wb-title span,
.landing-wb-claim span { color: var(--wb-faint); }

.landing-wb-title {
  max-width: 1000px;
  font-size: clamp(2rem, 3.6vw, 2.625rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.landing-wb-body {
  display: grid;
  grid-template-columns: 284px minmax(0, 1fr);
  border-top: 1px solid var(--l-border);
}

/* Index: dark micro-label titles over grey items; type alone sets the hierarchy */
.landing-wb-nav { padding: 44px 0 34px; }
.landing-wb-group--buyer { --wb-side: var(--l-primary); }
.landing-wb-group--vendor { --wb-side: var(--l-secondary); }
.landing-wb-group + .landing-wb-group,
.landing-wb-more { margin-top: 28px; }

.landing-wb-group-label {
  margin: 0 0 10px;
  padding: 0 24px 0 56px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--l-text);
}

.landing-wb-tab {
  position: relative;
  display: block;
  width: 100%;
  padding: 7px 24px 7px 56px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-align: left;
  color: var(--wb-faint);
  cursor: pointer;
  transition: color var(--l-transition);
}
.landing-wb-tab:hover { color: var(--l-text-secondary); }
.landing-wb-tab[aria-selected="true"] { color: var(--l-text); font-weight: 600; }
.landing-wb-tab[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: var(--wb-side);
}
.landing-wb-tab:focus-visible { outline: 2px solid var(--l-primary); outline-offset: -2px; }

.landing-wb-more ul { margin: 0; padding: 0; list-style: none; }
.landing-wb-more li { padding: 7px 24px 7px 56px; line-height: 1.25rem; }
.landing-wb-more li a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--wb-faint);
  text-decoration: none;
  transition: color var(--l-transition);
}
.landing-wb-more li a:hover { color: var(--l-text-secondary); }

.landing-wb-explore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--l-text);
  text-decoration: none;
}
.landing-wb-explore svg { width: 13px; height: 13px; transition: transform var(--l-transition); }
.landing-wb-explore:hover { color: var(--l-text); }
.landing-wb-explore:hover svg { transform: translateX(3px); }
.landing-wb-explore:focus-visible { outline: 2px solid var(--l-primary); outline-offset: 3px; }
.landing-wb-all { margin: 16px 0 0 56px; font-size: 0.8125rem; }

/* Selected feature: statement, then the product scene */
.landing-wb-main { min-width: 0; border-left: 1px solid var(--l-border); container-type: inline-size; }
.landing-wb-main { display: flex; flex-direction: column; }
.landing-wb-panel { display: flex; flex: 1; flex-direction: column; }
.landing-wb-panel[hidden] { display: none; }
.landing-wb-panel--buyer { --wb-stage: var(--wb-stage-buyer); }
.landing-wb-panel--vendor { --wb-stage: var(--wb-stage-vendor); }

.landing-wb-statement { min-height: 190px; padding: 34px 56px 28px; }
.landing-wb-claim {
  max-width: 600px;
  font-size: 1.375rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.landing-wb-statement .landing-wb-explore { margin-top: 14px; }

.landing-wb-stage {
  position: relative;
  flex: 1;
  min-height: 480px;
  overflow: hidden;
  border-top: 1px solid var(--l-border);
  background: var(--wb-stage);
}
.landing-wb-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
}
/* Soft bottom edge where the product continues */
.landing-wb-stage::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--wb-stage));
  pointer-events: none;
}

.landing-wb-scene {
  position: absolute;
  top: 40px;
  /* Always bleeds about 40px past the right edge; on wide stages the left inset grows */
  left: max(56px, calc(100cqw - 1060px));
  width: clamp(880px, calc(100cqw + 24px), 1100px);
  container-type: inline-size;
}
.landing-wb-shot {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 18px 48px -18px rgba(15, 23, 42, 0.22);
}
.landing-wb-detail {
  position: absolute;
  top: 16.8cqw;
  left: 38.52cqw;
  width: 45.45cqw;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 28px 60px -16px rgba(15, 23, 42, 0.32);
}
.landing-wb-detail--check { top: 16.36cqw; }
.landing-wb-detail--draft-rfp { top: 7.27cqw; left: 44.89cqw; width: 39.09cqw; }
.landing-wb-detail--market { top: 8.64cqw; left: 41.7cqw; width: 42.27cqw; }
.landing-wb-detail--plan { top: 12.5cqw; }
.landing-wb-detail--compliance { left: 32.61cqw; width: 51.36cqw; }
.landing-wb-detail--find { top: 12.27cqw; left: 39.89cqw; width: 44.09cqw; }
.landing-wb-detail--draft-bid { top: 17cqw; left: 30.8cqw; width: 53.18cqw; }

.landing-wb-panel:not([hidden]) .landing-wb-scene { animation: landing-wb-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.landing-wb-panel:not([hidden]) .landing-wb-statement { animation: landing-wb-fade 0.35s ease; }
@keyframes landing-wb-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes landing-wb-fade { from { opacity: 0; } }

@media (max-width: 900px) {
  .landing-wb-section { padding-top: 88px; padding-bottom: 88px; }
  .landing-wb { width: calc(100% - 32px); }
  .landing-wb-head { padding: 40px 24px 32px; }
  .landing-wb-body { grid-template-columns: minmax(0, 1fr); }
  /* The index becomes one horizontal strip of tabs */
  .landing-wb-nav {
    display: flex;
    gap: 4px;
    padding: 12px 10px 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--l-border);
    scrollbar-width: none;
  }
  .landing-wb-nav::-webkit-scrollbar { display: none; }
  .landing-wb-group { display: contents; }
  .landing-wb-group-label,
  .landing-wb-more { display: none; }
  .landing-wb-tab { width: auto; flex: none; padding: 10px 14px 12px; white-space: nowrap; }
  .landing-wb-tab[aria-selected="true"]::before { top: auto; right: 14px; bottom: 0; left: 14px; width: auto; height: 2px; }
  .landing-wb-main { border-left: 0; }
  .landing-wb-statement { min-height: 0; padding: 28px 24px; }
  .landing-wb-claim { font-size: 1.1875rem; }
  .landing-wb-stage { flex: none; min-height: 0; height: 360px; }
  .landing-wb-scene { top: 28px; left: 24px; width: 560px; }
  /* The scene is wider than the phone; keep the lifted detail inside the frame, 16px from its edge */
  .landing-wb-detail[class] { left: calc(100vw - 32px - 24px - 16px - 252px); width: 252px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-wb-panel:not([hidden]) .landing-wb-scene,
  .landing-wb-panel:not([hidden]) .landing-wb-statement { animation: none; }
  .landing-wb-tab,
  .landing-wb-explore svg { transition: none; }
}

/* ---------- Academy — prominent quiz panel + small principles strip ---------- */

.landing-academy-quiz-panel {
  display: block;
  border: 1px solid var(--l-border);
  background: #ffffff;
  padding: 36px 32px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.landing-academy-quiz-panel:hover {
  border-color: var(--l-text);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.landing-academy-quiz-panel .quiz-cta {
  transition: transform 0.2s ease;
}

.landing-academy-quiz-panel:hover .quiz-cta {
  transform: translateX(3px);
}

@media (min-width: 768px) {
  .landing-academy-quiz-panel { padding: 48px; }
}

.landing-academy-principle {
  display: flex;
  gap: 14px;
}

.landing-academy-principle .p-icon {
  color: var(--l-primary);
  flex-shrink: 0;
}

.landing-academy-principle .p-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--l-text);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.landing-academy-principle .p-desc {
  font-size: 0.875rem;
  color: var(--l-text-secondary);
  line-height: 1.6;
}

/* ---------- Hero workflow chooser — premium twin cards ----------
   Two distinct, generously spaced tracks, each anchored by a
   micro-UI snippet of its side of the product. */
.landing-twins {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  max-width: 1040px;
  margin: 52px auto 0;
  text-align: left;
}

.landing-twin-card-wrap {
  position: relative;
  display: flex;
  padding-bottom: 6px;
}

.landing-twin-card-wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 6px;
  right: -6px;
  top: 6px;
  background: var(--accent);
  z-index: 0;
  transition: transform var(--l-transition);
}

.landing-twin-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 40px;
  background: var(--l-bg);
  border: 1px solid #E2E8F0;
  color: inherit;
  text-decoration: none;
  transition: transform var(--l-transition), border-color var(--l-transition);
}

.landing-twin-card--buyer {
  --accent: var(--l-primary);
  --accent-soft: rgba(26, 180, 153, 0.07);
  --accent-line: rgba(26, 180, 153, 0.18);
}

.landing-twin-card--bidder {
  --accent: var(--l-secondary);
  --accent-soft: rgba(239, 100, 56, 0.07);
  --accent-line: rgba(239, 100, 56, 0.18);
}

.landing-twin-card-wrap:hover .landing-twin-card {
  transform: translate(-2px, -2px);
  border-color: var(--accent-line);
}

.landing-twin-card-wrap:hover::after {
  transform: translate(2px, 2px);
}

/* The visual anchor — a micro-UI snippet of the product. */
.landing-twin-ui {
  width: 100%;
  margin: 0 0 36px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  position: relative;
  overflow: visible;
  background: transparent;
}

.landing-twin-ui-image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 26px rgba(15, 23, 42, 0.1));
}

/* Card copy */
.landing-twin-kicker {
  margin-bottom: 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.landing-twin-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.3125rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--l-text);
  margin-bottom: 10px;
}

.landing-twin-body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--l-text-secondary);
  margin-bottom: 26px;
}

.landing-twin-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}

.landing-twin-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 9px;
  min-height: 47px;
  padding: 13px 24px;
  background: var(--l-text);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
  max-width: 100%;
  text-align: center;
  transition: background var(--l-transition);
}

.landing-twin-cta:focus-visible,
.landing-twin-showcase-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 3px;
}

.landing-twin-showcase-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--l-text);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  max-width: 100%;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--l-transition);
}

.landing-twin-showcase-button:hover {
  color: var(--accent);
}

.landing-twin-showcase-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--accent);
  border-radius: 999px;
  color: #ffffff;
  flex-shrink: 0;
  transition: transform var(--l-transition), background var(--l-transition);
}

.landing-twin-showcase-button:hover .landing-twin-showcase-icon {
  background: color-mix(in srgb, var(--accent) 88%, black);
  transform: translateY(-1px);
}

.landing-twin-showcase-icon svg {
  width: 14px;
  height: 14px;
  transform: translateX(1px);
}

.landing-twin-arrow {
  display: inline-flex;
  transition: transform var(--l-transition);
}

.landing-twin-card:hover .landing-twin-cta {
  background: #1a1a1a;
}

.landing-gift-tag {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: min(245px, calc(100% - 56px));
  min-height: 40px;
  padding: 8px 13px 8px 9px;
  background: color-mix(in srgb, var(--accent) 7%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 999px;
  color: var(--l-text);
  text-decoration: none;
  box-shadow: 0 18px 44px -28px rgba(15, 23, 42, 0.46),
              inset 0 1px 0 rgba(255, 255, 255, 0.85);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity var(--l-transition), transform var(--l-transition),
              border-color var(--l-transition), box-shadow var(--l-transition);
}

.landing-twin-card:hover .landing-gift-tag,
.landing-twin-card:focus-within .landing-gift-tag {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.landing-gift-tag:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow: 0 22px 52px -30px rgba(15, 23, 42, 0.54),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.landing-gift-tag:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 3px;
}

.landing-gift-tag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex-shrink: 0;
}

.landing-gift-tag-icon svg {
  width: 21px;
  height: 21px;
}

.landing-gift-tag-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.landing-gift-tag-amount {
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--l-text);
}

.landing-gift-tag-line {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
}

.landing-twin-card:hover .landing-twin-arrow {
  transform: translateX(3px);
}

/* Stack the twin cards before they get cramped. */
@media (max-width: 880px) {
  .landing-twins {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 460px;
    margin-top: 36px;
  }

  .landing-twin-card {
    padding: 28px;
  }

  .landing-gift-tag {
    max-width: min(230px, calc(100% - 40px));
  }
}

/* ============================================================
   Hero triptych — buyer | result | vendor
   ============================================================ */
/* Hero product trailer: a muted 16:9 loop in place of the old visuals */
.landing-hero-video-wrap {
  margin: 56px auto 0;
}
.landing-hero-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--l-bg-subtle);
  border: 1px solid var(--l-border);
  border-radius: var(--buyer-screenshot-radius, 8px);
  box-shadow: 0 30px 70px -28px rgba(15, 23, 42, 0.28), 0 10px 28px -14px rgba(15, 23, 42, 0.12);
}
.landing-hero-video-frame {
  position: relative;
}
/* Fullscreen control: phones only, where the 16:9 frame is too small to read */
.landing-hero-video-fullscreen {
  display: none;
}
@media (max-width: 640px) {
  .landing-hero-video-frame {
    margin-inline: -16px;
  }
  .buyer-hero-proof:has(> .landing-hero-video-frame) {
    overflow-x: visible;
  }
  .landing-hero-video-fullscreen {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: rgba(10, 10, 10, 0.72);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
  }
  .landing-hero-video-fullscreen svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  .landing-hero-video-fullscreen:focus-visible {
    outline: 2px solid var(--l-primary);
    outline-offset: 2px;
  }
}
/* Buyer / vendor doors under the trailer: same width as the video, side
   colour only on the 2px top edge (text stays monochrome) */
.landing-hero-personas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
  text-align: left;
}
.landing-hero-door {
  --door-accent: var(--l-primary);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 24px 24px 28px;
  background: var(--l-bg);
  border: 1px solid var(--l-border);
  border-radius: var(--buyer-screenshot-radius, 8px);
  overflow: hidden;
  color: var(--l-text);
  text-decoration: none;
  transition: transform var(--l-transition), box-shadow var(--l-transition), border-color var(--l-transition);
}
.landing-hero-door--vendor { --door-accent: var(--l-secondary); }
.landing-hero-door::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--door-accent);
}
.landing-hero-door:hover {
  color: var(--l-text);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}
.landing-hero-door:focus-visible { outline: 2px solid var(--l-primary); outline-offset: 3px; }
.landing-hero-door-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.landing-hero-door-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.landing-hero-door-desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--l-text-secondary);
}
.landing-hero-door-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--l-border);
  border-radius: 50%;
  color: var(--l-text);
  transition: background var(--l-transition), border-color var(--l-transition), color var(--l-transition), transform var(--l-transition);
}
.landing-hero-door-arrow svg { width: 14px; height: 14px; display: block; }
.landing-hero-door:hover .landing-hero-door-arrow {
  background: var(--l-text);
  border-color: var(--l-text);
  color: #fff;
  transform: translateX(2px);
}
@media (max-width: 640px) {
  .landing-hero-personas { grid-template-columns: 1fr; gap: 12px; }
  .landing-hero-door { padding: 20px 20px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-hero-door,
  .landing-hero-door-arrow { transition: none; }
  .landing-hero-door:hover,
  .landing-hero-door:hover .landing-hero-door-arrow { transform: none; }
}

.landing-triptych {
  position: relative;
  margin: 56px auto 0;
  display: grid;
  /* Narrow persona lanes; the wide center holds the result card plus the
     document stacks peeking out on both sides (see .landing-sources) */
  grid-template-columns: 0.72fr minmax(0, 2.16fr) 0.72fr;
  gap: 32px;
  align-items: center;
}

.landing-triptych-beam {
  position: absolute;
  top: 50%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, #D1D5DB 40%, #D1D5DB 60%, transparent);
  opacity: 0.7;
  z-index: 0;
}
.landing-triptych-beam--left  { left: 21%; right: 60%; }
.landing-triptych-beam--right { left: 60%; right: 21%; }

/* Persona columns */
.landing-persona {
  position: relative;
  z-index: 1;
  padding: 0 8px;
  text-align: left;
}
.landing-persona--right { text-align: right; }

.landing-persona-role {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(1.7rem, 2.7vw, 2.25rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--l-text);
  margin: 0 0 18px;
}

.landing-persona-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease-out;
}

.landing-persona-link:hover {
  color: inherit;
  transform: translateY(-2px);
}

.landing-persona-link:focus-visible {
  outline: 2px solid var(--l-primary);
  outline-offset: 8px;
}

.landing-persona-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  color: var(--l-text);
  font-size: 0.78rem;
  font-weight: 700;
}

/* Source document stacks — RFP set (left) and bid set (right) tucked
   behind the result card, vertically centered on it */
.landing-sources {
  position: relative;
  z-index: 2;
  max-width: 470px;
  margin: 0 auto;
}

.landing-source-page,
.landing-source-sheet {
  position: absolute;
  top: 50%;
  width: 204px;
  height: 268px;
  margin-top: -134px;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--l-border);
  border-radius: 3px;
  box-shadow: 0 10px 26px -12px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}
.landing-source-page { padding: 16px 16px 14px; }
.landing-source-sheet { box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.14); }
.landing-source-page--l  { left: -80px; transform: rotate(-6.5deg); }
.landing-source-page--r  { right: -80px; transform: rotate(6.5deg); }
.landing-source-sheet--l1 { left: -80px; transform: rotate(-10.5deg) translate(-9px, 6px); }
.landing-source-sheet--l2 { left: -80px; transform: rotate(-14.5deg) translate(-18px, 13px); opacity: 0.62; }
.landing-source-sheet--r1 { right: -80px; transform: rotate(10.5deg) translate(9px, 6px); }
.landing-source-sheet--r2 { right: -80px; transform: rotate(14.5deg) translate(18px, 13px); opacity: 0.62; }

.landing-source-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.landing-source-tag {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 3px;
  flex: none;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.landing-source-tag--rfp { background: #E6F7F3; color: #0D8B73; }
.landing-source-tag--bid { background: #FDEDE6; color: #C24F2A; }
.landing-source-ref {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 8.5px;
  color: #B7BDC7;
  white-space: nowrap;
  overflow: hidden;
}
.landing-source-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--l-text);
  margin-top: 11px;
  line-height: 1.4;
  text-align: left;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--l-border-light);
}
.landing-source-body { margin-top: 11px; text-align: left; }
.landing-source-h {
  display: block;
  height: 5px;
  width: 42%;
  border-radius: 2px;
  background: #D6DBE2;
  margin: 12px 0 7px;
}
.landing-source-h:first-child { margin-top: 0; }
.landing-source-body i {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: #ECEFF2;
  margin: 5px 0;
}
.landing-source-body i.w1 { width: 100%; }
.landing-source-body i.w2 { width: 94%; }
.landing-source-body i.w3 { width: 97%; }
.landing-source-body i.w4 { width: 64%; }
.landing-source-body i.ind { width: 84%; margin-left: 12px; }
.landing-source-body i.hl-rfp { background: #BFEAE0; }
.landing-source-body i.hl-bid { background: #F9D4C3; }
.landing-source-table { margin-top: 12px; border: 1px solid #EEF0F2; border-radius: 2px; }
.landing-source-table > div { display: flex; border-bottom: 1px solid #EEF0F2; }
.landing-source-table > div:last-child { border-bottom: none; }
.landing-source-table span {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: #ECEFF2;
  margin: 6px 8px;
}
.landing-source-table span:first-child { flex: 2.2; }
.landing-source-table span:last-child { flex: 1; background: #E3E7EC; }

/* Center showcase — replicates the analysis-result card */
.landing-showcase {
  position: relative;
  z-index: 2;
  background: #fff;
  border: 1px solid #E7E1D8;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 30px 70px -20px rgba(15, 23, 42, 0.22),
    0 10px 28px -14px rgba(15, 23, 42, 0.10);
}

.landing-showcase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: #FCF0DC;
  border-bottom: 1px solid #F2DDC0;
}
.landing-showcase-header-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #B26A2A;
}
.landing-showcase-header-count {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  color: #C58547;
}

.landing-showcase-body { padding: 22px 24px 18px; }

.landing-sev-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.landing-sev {
  padding: 6px 4px 4px;
  border-right: 1px solid var(--l-border-light);
  text-align: left;
}
.landing-sev:last-child { border-right: none; }
.landing-sev-n {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.landing-sev-l {
  display: block;
  margin-top: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--l-text-muted);
}
.landing-sev--critical  .landing-sev-n { color: #E96A5F; }
.landing-sev--major     .landing-sev-n { color: #F08A4B; }
.landing-sev--minor     .landing-sev-n { color: #E0B341; }
.landing-sev--strength  .landing-sev-n { color: #5BB17C; }

.landing-sev-bar {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: #F3F4F6;
}
.landing-sev-bar > span { display: block; height: 100%; }
.landing-sev-bar > span:nth-child(1) { flex: 5; background: #E96A5F; }
.landing-sev-bar > span:nth-child(2) { flex: 3; background: #F08A4B; }
.landing-sev-bar > span:nth-child(3) { flex: 2; background: #E0B341; }
.landing-sev-bar > span:nth-child(4) { flex: 3; background: #5BB17C; }
.landing-sev-bar-cap {
  display: block;
  margin-top: 6px;
  text-align: right;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  color: #16A34A;
}

.landing-showcase-list {
  margin-top: 14px;
  border-top: 1px solid var(--l-border-light);
}
.landing-showcase-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--l-border-light);
}
.landing-showcase-row:last-child { border-bottom: none; }
.landing-showcase-row-shield {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--l-primary);
}
.landing-showcase-row--ok     .landing-showcase-row-shield { color: #5BB17C; }
.landing-showcase-row--warn   .landing-showcase-row-shield { color: #E0B341; }
.landing-showcase-row--fail   .landing-showcase-row-shield { color: #E96A5F; }
.landing-showcase-row--scored .landing-showcase-row-shield { color: #7A8AA8; }
.landing-showcase-row-name {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--l-text);
  text-align: left;
}
.landing-showcase-row-status {
  display: flex;
  align-items: center;
  gap: 6px;
}
.landing-sc-pill {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.landing-sc-pill svg { width: 14px; height: 14px; stroke-width: 2.4; }
.landing-sc-pill--ok   { background: #E8F4EC; color: #4A8C66; }
.landing-sc-pill--warn { background: #FAF0D4; color: #A88324; }
.landing-sc-pill--fail { background: #FBE3DF; color: #B5564C; }
.landing-sc-chat { width: 22px; height: 22px; color: var(--l-text-muted); }
.landing-sc-chat--ok   { color: #15803D; }
.landing-sc-chat--warn { color: #B45309; }
.landing-sc-chat--fail { color: #B91C1C; }

.landing-sc-score {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 4px 10px;
  background: #ECFDF5;
  border: 1px solid #BBF7D0;
  border-radius: 999px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.8125rem;
  line-height: 1;
  color: #15803D;
  white-space: nowrap;
}
.landing-sc-score strong {
  font-weight: 700;
  font-size: 0.9375rem;
}
.landing-sc-score-sep {
  opacity: 0.45;
  margin: 0 1px;
}
.landing-sc-score-max {
  font-weight: 600;
  opacity: 0.85;
}

.landing-showcase-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-top: 12px;
  padding: 16px 0 4px;
  border-top: 1px solid var(--l-border-light);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: #9CA3AF;
  text-align: left;
}
.landing-showcase-footer strong { font-weight: 500; color: #6B7280; }
.landing-showcase-footer-right { text-align: right; }
.landing-showcase-footer-right .lbl {
  display: block;
  font-weight: 300;
  color: #9CA3AF;
}
.landing-showcase-footer-right .val {
  display: block;
  margin-top: 2px;
  font-weight: 500;
  color: #6B7280;
}

.landing-hero-conversion {
  margin-top: 24px;
}

.landing-free-offer {
  color: var(--l-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
}

.landing-hero-conversion .landing-free-offer {
  color: var(--l-text-secondary);
  margin-top: 12px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.landing-free-offer--pricing {
  margin: -12px 0 28px;
}

/* CTA row beneath the hero subtitle */
.landing-hero-ctas {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 0;
  flex-wrap: wrap;
}
.landing-hero-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--l-text);
  border: 1px solid var(--l-text);
  text-decoration: none;
  transition: all var(--l-transition);
}
.landing-hero-cta-primary:hover {
  background: #1a1a1a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.landing-hero-cta-showcase {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px 9px 9px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--l-text);
  background: transparent;
  border: 1px solid var(--l-border);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--l-transition);
}
.landing-hero-cta-showcase:hover { border-color: var(--l-text); }
.landing-hero-cta-showcase-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--l-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  transition: background var(--l-transition), transform var(--l-transition);
}
.landing-hero-cta-showcase:hover .landing-hero-cta-showcase-icon {
  background: #1a1a1a;
  transform: translateY(-1px);
}
.landing-hero-cta-showcase-icon svg {
  width: 14px;
  height: 14px;
  color: #fff;
  display: block;
  shape-rendering: geometricPrecision;
}

@media (max-width: 980px) {
  /* Card on top (full width), personas below as a two-up row of tappable
     cards with a colored accent edge; document stacks are desktop-only */
  .landing-triptych {
    grid-template-columns: 1fr 1fr;
    gap: 36px 12px;
  }
  .landing-triptych-beam { display: none; }
  .landing-sources { grid-column: 1 / -1; }
  .landing-source-page,
  .landing-source-sheet { display: none; }
  .landing-persona {
    order: 2;
    text-align: center;
    margin: 0;
    border: 1px solid var(--l-border);
    border-top: 2px solid var(--l-primary);
    padding: 22px 14px 20px;
  }
  .landing-persona--right { text-align: center; border-top-color: var(--l-secondary); }
  .landing-persona-role { font-size: clamp(1.4rem, 5.6vw, 1.75rem); margin-bottom: 4px; }
  .landing-persona-action { margin-top: 10px; font-size: 0.72rem; }
}

@media (max-width: 520px) {
  .landing-twin-cta {
    width: 100%;
  }

  .landing-twin-showcase-button {
    margin-left: 0;
  }
}

@media (max-width: 1279px) {
  .landing-body > .landing-nav {
    position: fixed;
  }

  .landing-locale-switcher--desktop {
    display: none;
  }

  .landing-mobile-menu {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .landing-hero-section {
    padding-top: 48px;
  }

  .landing-display-heading {
    font-size: clamp(2.55rem, 13vw, 3.35rem);
  }

  .landing-hero-subtitle {
    margin-top: 18px;
  }

  .landing-hero-conversion {
    margin-top: 20px;
  }

  .landing-hero-ctas {
    align-items: stretch;
  }

}

@media (hover: none) {
  .landing-gift-tag {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-gift-tag,
  .landing-twin-showcase-button {
    transition: none;
  }
}

/* ---------- Homepage: shared two-tone headline ----------
   The claim in ink, the explanation in grey, in one heading. */

.landing-two-tone {
  max-width: 860px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(2rem, 3.6vw, 2.625rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--l-text);
}
.landing-two-tone span { color: #9CA3AF; }
.landing-two-tone--dark { color: #fff; }
.landing-two-tone--dark span { color: #6B7280; }

/* ---------- Homepage: why trust the output ----------
   The headline and four steps share one column; beside it, from the headline's top,
   a tinted canvas runs out to the viewport edge. On it: a real critical finding that
   quotes the RFP and the bid, and the agent's reading feed laid over its corner at a
   slight angle. On arrival the feed rises (01), a scan line reads the finding, then
   markers 02 (the quotes) and 03 (Verified) appear. */

.landing-trust { padding-top: 128px; padding-bottom: 136px; overflow-x: clip; background: var(--l-bg); }

.landing-trust-grid {
  /* Distance from the page column to the viewport edge */
  --trust-gutter: max(24px, calc((100vw - var(--l-max-width)) / 2));
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}

.landing-trust-copy .landing-two-tone { font-size: clamp(2rem, 3.2vw, 2.5rem); }
.landing-trust-steps { margin: 48px 0 0; padding: 0; list-style: none; counter-reset: trust-step; }
.landing-trust-steps li {
  position: relative;
  padding-left: 60px;
  counter-increment: trust-step;
}
.landing-trust-steps li + li { margin-top: 32px; }
.landing-trust-steps li::before {
  content: counter(trust-step, decimal-leading-zero);
  position: absolute;
  top: -6px;
  left: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #E5E7EB;
}
.landing-trust-steps h3 { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em; }
.landing-trust-steps p { max-width: 360px; margin-top: 6px; font-size: 0.9375rem; line-height: 1.6; color: var(--l-text-secondary); }

.landing-trust-evidence {
  position: relative;
  margin: 0 calc(-1 * var(--trust-gutter)) 0 0;
  padding: 56px var(--trust-gutter) 168px 56px;
  border-radius: 20px 0 0 20px;
  background: #EFF5F3;
  isolation: isolate;
}
.landing-trust-evidence::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: radial-gradient(rgba(15, 23, 42, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent);
          mask-image: linear-gradient(to right, #000 55%, transparent);
}
.landing-trust-finding { position: relative; max-width: 540px; }
.landing-trust-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 18px 48px -18px rgba(15, 23, 42, 0.22);
}
/* The reading feed: laid over the finding's lower-right corner, tilted */
.landing-trust-feed {
  position: absolute;
  bottom: 24px;
  left: calc(56px + min(540px, 100% - 56px) - 196px);
  width: 290px;
  rotate: 2deg;
}
.landing-trust-feed .landing-trust-shot { box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 32px 64px -18px rgba(15, 23, 42, 0.38); }

.landing-trust-mark {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--l-text);
  box-shadow: 0 0 0 4px #EFF5F3;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
}
/* 02 beside the RFP and bid quotes, 03 right after the Verified tag, 01 on the feed */
.landing-trust-mark--quote { top: 70%; left: -14px; }
.landing-trust-mark--check { top: calc(22% - 14px); left: 77%; box-shadow: 0 0 0 4px #fff; }
.landing-trust-mark--read { top: -14px; left: 24px; }

/* The agent reading: a soft teal line passes down the finding once */
.landing-trust-scan {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 56px;
  border-radius: 10px;
  background: linear-gradient(to bottom, transparent, rgba(26, 180, 153, 0.14) 80%, rgba(26, 180, 153, 0.55) 98%, transparent);
  pointer-events: none;
  opacity: 0;
}
.js .landing-trust-evidence .landing-trust-mark { transform: scale(0.4); opacity: 0; }
.js .landing-trust-evidence .landing-trust-feed { transform: translateY(24px); opacity: 0; }
.js .landing-trust-evidence.animate-in .landing-trust-feed { animation: landing-trust-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
.js .landing-trust-evidence.animate-in .landing-trust-mark--read { animation: landing-trust-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) 0.7s both; }
.js .landing-trust-evidence.animate-in .landing-trust-scan { animation: landing-trust-scan 1.5s cubic-bezier(0.45, 0, 0.3, 1) 0.9s both; }
.js .landing-trust-evidence.animate-in .landing-trust-mark--quote { animation: landing-trust-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) 2.2s both; }
.js .landing-trust-evidence.animate-in .landing-trust-mark--check { animation: landing-trust-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) 2.5s both; }
@keyframes landing-trust-scan {
  0% { top: -24px; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  /* The bright edge is the scan's bottom: stop it on the finding's bottom edge */
  100% { top: calc(100% - 56px); opacity: 0; }
}
@keyframes landing-trust-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes landing-trust-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------- Homepage: proof ----------
   Our own published analyses stand in for customer quotes. The light case study
   runs out to the left viewport edge (the trust canvas runs to the right), led by one large
   figure that counts up on arrival. The research column shows each study's result
   as a small chart drawn from the published numbers. */

.landing-proof {
  --proof-gutter: max(24px, calc((100vw - var(--l-max-width)) / 2));
  padding-top: 120px;
  padding-bottom: 160px;
  overflow-x: clip;
  background: var(--l-bg-subtle);
}

.landing-proof-title {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: end;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.landing-proof-title-claim {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--l-text);
}
.landing-proof-title-rest {
  max-width: 400px;
  padding-bottom: 6px;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: #9CA3AF;
}

.landing-proof-grid {
  display: grid;
  grid-template-columns: calc(var(--proof-gutter) + 0.56 * min(100vw - 2 * var(--proof-gutter), var(--l-max-width))) minmax(0, 1fr);
  gap: 56px;
  align-items: stretch;
  margin-top: 56px;
  padding-right: var(--proof-gutter);
}

.landing-proof-case {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--l-border);
  border-left: 0;
  border-radius: 0 20px 20px 0;
  background: var(--l-bg);
  color: var(--l-text);
  text-decoration: none;
  isolation: isolate;
  transition: box-shadow var(--l-transition);
}
.landing-proof-case::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(560px 360px at 100% 0%, rgba(26, 180, 153, 0.10), transparent 70%),
    radial-gradient(480px 320px at 0% 100%, rgba(239, 100, 56, 0.07), transparent 70%);
}
.landing-proof-case:hover { color: var(--l-text); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); }
.landing-proof-case:focus-visible { outline: 2px solid var(--l-primary); outline-offset: 3px; }
.landing-proof-case-inner { display: flex; flex-direction: column; height: 100%; padding: 48px 56px 44px var(--proof-gutter); }

.landing-proof-kicker { font-size: 0.8125rem; font-weight: 600; color: var(--l-text-muted); }
.landing-proof-case h3 {
  max-width: 520px;
  margin-top: 14px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.landing-proof-hero-stat { display: flex; align-items: flex-end; gap: 20px; margin-top: 36px; }
.landing-proof-hero-stat .landing-count {
  font-family: "Plus Jakarta Sans", sans-serif;
  /* Gradient text paints only inside the box: pad it so the glyph bottoms and the
     last digit's right edge are not clipped, then pull the padding back out */
  margin: -0.08em -0.1em -0.12em 0;
  padding: 0.08em 0.1em 0.12em 0;
  font-size: clamp(5.5rem, 10vw, 8.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--l-text) 35%, var(--l-primary));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.landing-proof-hero-label { max-width: 180px; padding-bottom: 6px; font-size: 0.9375rem; line-height: 1.4; color: var(--l-text-secondary); }

.landing-proof-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 36px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--l-border);
}
.landing-proof-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.landing-proof-stats dd {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.landing-proof-stats dt { margin-top: 2px; font-size: 0.8125rem; line-height: 1.4; color: var(--l-text-muted); }

/* Count-up: an animatable integer rendered through a counter */
@property --landing-count { syntax: "<integer>"; inherits: false; initial-value: 0; }
.landing-count { --landing-count: var(--to); counter-reset: landing-count var(--landing-count); }
.landing-count::after { content: counter(landing-count); }
.js .landing-proof-case .landing-count { --landing-count: 0; transition: --landing-count 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s; }
.js .landing-proof-case .landing-proof-hero-stat .landing-count { transition-duration: 2s; }
.js .landing-proof-case.animate-in .landing-count { --landing-count: var(--to); }

.landing-proof-note { max-width: 560px; margin-top: 28px; font-size: 0.9375rem; line-height: 1.6; color: var(--l-text-secondary); }
.landing-proof-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 20px; font-size: 0.875rem; font-weight: 600; color: var(--l-primary-deep, #0D8B73); }
.landing-proof-link svg { width: 13px; height: 13px; transition: transform var(--l-transition); }
.landing-proof-case:hover .landing-proof-link svg { transform: translateX(3px); }

.landing-proof-research { display: flex; flex-direction: column; }
.landing-proof-label { margin-bottom: 8px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--l-text); }
.landing-proof-row {
  display: grid;
  grid-template-areas: "text arrow" "chart arrow";
  grid-template-columns: minmax(0, 1fr) 14px;
  column-gap: 16px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid var(--l-border);
  color: inherit;
  text-decoration: none;
}
.landing-proof-row:last-child { border-bottom: 1px solid var(--l-border); }
.landing-proof-row-text { grid-area: text; }
.landing-proof-row > svg { grid-area: arrow; width: 14px; height: 14px; color: #9CA3AF; transition: transform var(--l-transition), color var(--l-transition); }
.landing-proof-row strong {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--l-text);
}
.landing-proof-row em { font-style: normal; font-weight: 700; }
.landing-proof-row-text > span { display: block; margin-top: 4px; font-size: 0.9375rem; line-height: 1.5; color: var(--l-text-secondary); }
.landing-proof-row:hover { color: inherit; }
.landing-proof-row:hover > svg { transform: translateX(3px); color: var(--l-text); }
.landing-proof-row:focus-visible { outline: 2px solid var(--l-primary); outline-offset: 3px; }

/* Price study: the official share against the measured one */
.landing-proof-bars { grid-area: chart; display: grid; gap: 10px; margin-top: 16px; }
.landing-proof-bars-caption { font-size: 0.75rem; font-weight: 600; color: var(--l-text-muted); }
.landing-proof-bar {
  display: grid;
  grid-template-areas: "name value" "track track";
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  font-size: 0.75rem;
}
.landing-proof-bar-name { grid-area: name; color: var(--l-text-secondary); }
.landing-proof-bar-track { grid-area: track; }
.landing-proof-bar-value { grid-area: value; }
.landing-proof-bar-track { height: 6px; overflow: hidden; border-radius: 999px; background: #E9EBEE; }
.landing-proof-bar-fill { display: block; width: var(--value); height: 100%; border-radius: inherit; background: #9CA3AF; }
.landing-proof-bar--measured .landing-proof-bar-fill { background: var(--l-secondary); }
.landing-proof-bar--measured .landing-proof-bar-value { color: #C2410C; }
.landing-proof-bar-value { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--l-text); }
.js .landing-proof-row .landing-proof-bar-fill { width: 0; transition: width 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s; }
.js .landing-proof-row.animate-in .landing-proof-bar-fill { width: var(--value); }
.js .landing-proof-row.animate-in .landing-proof-bar--measured .landing-proof-bar-fill { transition-delay: 0.55s; }

/* Platform comparison: eleven platforms, one lit */
.landing-proof-platforms { grid-area: chart; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.landing-proof-dots { display: flex; gap: 5px; }
.landing-proof-dots span { width: 12px; height: 12px; border-radius: 3px; background: #E5E7EB; }
.landing-proof-dots span.is-us { background: var(--l-primary); box-shadow: 0 0 0 3px rgba(26, 180, 153, 0.18); }
.landing-proof-dots-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--l-text-secondary); }
.landing-proof-dots-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--l-primary); }

/* ---------- Homepage: data handling ----------
   A dark panel as wide as the feature frame, set across the seam between the grey
   proof section and the white pricing section, with a slow ambient glow. */

.landing-safety { background: linear-gradient(to bottom, var(--l-bg-subtle) 50%, var(--l-bg) 50%); }

.landing-safety-panel {
  position: relative;
  width: min(1440px, calc(100% - 2 * clamp(16px, 4.5vw, 72px)));
  margin: 0 auto;
  overflow: hidden;
  border-radius: 24px;
  background: #0A0A0A;
  isolation: isolate;
}
.landing-safety-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 70% 0%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 90% at 70% 0%, #000, transparent 75%);
}
.landing-safety-glow {
  position: absolute;
  inset: -40%;
  z-index: -2;
  background:
    radial-gradient(closest-side at 30% 40%, rgba(26, 180, 153, 0.22), transparent),
    radial-gradient(closest-side at 75% 60%, rgba(239, 100, 56, 0.14), transparent);
  animation: landing-safety-drift 22s ease-in-out infinite alternate;
}
@keyframes landing-safety-drift {
  from { transform: translate3d(-6%, -4%, 0) rotate(0deg); }
  to { transform: translate3d(6%, 4%, 0) rotate(12deg); }
}

.landing-safety-inner { width: min(var(--l-max-width), calc(100% - 64px)); margin: 0 auto; padding: 72px 0 80px; }
.landing-safety-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5DD4B8;
}
.landing-safety-label svg { width: 14px; height: 14px; }
.landing-safety-icon { display: block; width: 22px; height: 22px; margin-bottom: 16px; color: #5DD4B8; }
.landing-safety-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; }
.landing-safety-dpa { font-size: 0.875rem; color: #9CA3AF; }
.landing-safety-dpa a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.landing-safety-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.landing-safety-items li { padding: 28px 28px 0 0; }
.landing-safety-items li + li { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.landing-safety-items h3 { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1rem; font-weight: 700; color: #fff; }
.landing-safety-items p { margin-top: 8px; font-size: 0.875rem; line-height: 1.6; color: #9CA3AF; }

/* ---------- Homepage: testimonial ----------
   Continues the grey proof band: the two-tone headline says who is speaking
   (our own team), then a stack of white cards, each a photo beside one large
   quote with the key phrase in dark teal (plain teal is too light for text).
   The card behind peeks out below the front one; switching swings the front
   card aside and back into the stack while the next one rises into place. */

.landing-voice { padding-bottom: 160px; background: var(--l-bg-subtle); }

.landing-voice-deck { margin-top: 56px; }
.landing-voice-stack {
  display: grid;
  padding-bottom: 24px;
  touch-action: pan-y;
}
.landing-voice-card {
  grid-area: 1 / 1;
  margin: 0;
  padding: 48px;
  background: var(--l-bg);
  border: 1px solid var(--l-border);
  border-radius: 20px;
  transform-origin: 50% 100%;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.landing-voice-card[data-position="0"] { z-index: 2; }
.landing-voice-card[data-position="1"] { z-index: 1; transform: translateY(24px) scale(0.96); cursor: pointer; }
.landing-voice-card[data-position="1"]:hover { transform: translateY(30px) scale(0.96); }
.landing-voice-card[data-position="1"] .landing-voice-grid { opacity: 0; }
.landing-voice-grid { transition: opacity 0.35s ease; }
.landing-voice-card.is-leaving { animation: landingVoiceLeave 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.landing-voice-card.is-leaving[data-direction="prev"] { animation-name: landingVoiceLeavePrev; }
.landing-voice-card.is-leaving .landing-voice-grid { transition-delay: 0.1s; }

@keyframes landingVoiceLeave {
  0% { z-index: 3; transform: none; }
  45% { z-index: 3; transform: translateX(-14%) rotate(-3deg) scale(0.97); }
  55% { z-index: 1; transform: translateX(-12%) rotate(-2deg) scale(0.96); }
  100% { z-index: 1; transform: translateY(24px) scale(0.96); }
}
@keyframes landingVoiceLeavePrev {
  0% { z-index: 3; transform: none; }
  45% { z-index: 3; transform: translateX(14%) rotate(3deg) scale(0.97); }
  55% { z-index: 1; transform: translateX(12%) rotate(2deg) scale(0.96); }
  100% { z-index: 1; transform: translateY(24px) scale(0.96); }
}

.landing-voice-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  height: 100%;
}
.landing-voice-photo {
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}
.landing-voice-quote p {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--l-text);
  text-indent: -0.4em;
}
.landing-voice-quote em { font-style: normal; color: #0D8B73; }
.landing-voice-caption { display: flex; flex-direction: column; gap: 4px; margin-top: 32px; }
.landing-voice-caption strong { font-size: 1rem; font-weight: 700; color: var(--l-text); }
.landing-voice-caption span { font-size: 0.875rem; color: var(--l-text-secondary); }

.landing-voice-controls { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.landing-voice-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--l-border);
  border-radius: 999px;
  background: var(--l-bg);
  color: var(--l-text);
  transition: border-color var(--l-transition), box-shadow var(--l-transition);
}
.landing-voice-arrow:hover { border-color: #D1D5DB; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); }
.landing-voice-arrow svg { width: 16px; height: 16px; }
.landing-voice-dots { display: flex; gap: 4px; }
.landing-voice-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.landing-voice-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #D1D5DB;
  transition: width var(--l-transition), background-color var(--l-transition);
}
.landing-voice-dot[aria-current="true"]::before { width: 20px; background: var(--l-text); }
.landing-voice-arrow:focus-visible,
.landing-voice-dot:focus-visible { outline: 2px solid var(--l-primary); outline-offset: 2px; }

@media (max-width: 900px) {
  .landing-voice { padding-bottom: 96px; }
  .landing-voice-deck { margin-top: 36px; }
  .landing-voice-card { padding: 28px 24px; }
  /* Photo beside the name, quote below: keeps the cards short, so the shorter
     quote does not leave a tall empty card (the stack takes the tallest height). */
  .landing-voice-grid {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas: "photo caption" "quote quote";
    gap: 20px 16px;
    align-content: start;
  }
  .landing-voice-body { display: contents; }
  .landing-voice-photo { grid-area: photo; max-width: 64px; border-radius: 999px; }
  .landing-voice-caption { grid-area: caption; align-self: center; margin-top: 0; }
  .landing-voice-quote { grid-area: quote; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-voice-card,
  .landing-voice-grid { transition: none; }
  .landing-voice-card.is-leaving { animation: none; }
}

/* ---------- Homepage: pricing ----------
   A pricing table: three tender sizes with the cost per analysis in large tabular
   figures and their scope as ticks, all three equal, then a footer
   band inside the same card with what is always free and how to start. */

.landing-pricing-section { padding-top: 176px; padding-bottom: 128px; background: var(--l-bg); }

.landing-pricing-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.landing-pricing-head .landing-two-tone { max-width: 640px; }
.landing-pricing-head .landing-wb-explore { flex: none; margin-bottom: 8px; }

.landing-pricing-table {
  margin-top: 56px;
  overflow: hidden;
  border: 1px solid var(--l-border);
  border-radius: 16px;
  background: var(--l-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 24px 56px -32px rgba(15, 23, 42, 0.18);
}

.landing-pricing-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.landing-pricing-tier { position: relative; padding: 40px 36px 36px; }
.landing-pricing-tier + .landing-pricing-tier { border-left: 1px solid var(--l-border); }

.landing-pricing-tier-name { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--l-text); }
.landing-pricing-tier-price { margin-top: 18px; }
.landing-pricing-tier-price strong {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(2.25rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--l-text);
}
.landing-pricing-tier-price span { display: block; margin-top: 8px; font-size: 0.8125rem; color: var(--l-text-muted); }
.landing-pricing-tier-desc {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--l-border-light);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--l-text);
}
.landing-pricing-tier ul,
.landing-pricing-free ul { display: grid; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; }
.landing-pricing-tier li,
.landing-pricing-free li { display: flex; gap: 9px; font-size: 0.875rem; line-height: 1.45; color: var(--l-text-secondary); }
.landing-pricing-tier li svg,
.landing-pricing-free li svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--l-primary); }

.landing-pricing-foot {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  border-top: 1px solid var(--l-border);
  background: var(--l-bg-subtle);
}
.landing-pricing-free { display: flex; flex-direction: column; padding: 32px 36px 36px; }
.landing-pricing-free ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 28px; }
.landing-pricing-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--l-text); }

.landing-pricing-start { display: flex; flex-direction: column; padding: 32px 36px 36px; border-left: 1px solid var(--l-border); }
.landing-pricing-credit { display: flex; align-items: baseline; gap: 10px; }
.landing-pricing-credit strong {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--l-text);
}
.landing-pricing-credit span { font-size: 0.875rem; font-weight: 600; color: var(--l-text-secondary); }
.landing-pricing-start ul { display: grid; gap: 6px; margin: 12px 0 24px; padding: 0; list-style: none; }
.landing-pricing-start li { font-size: 0.8125rem; line-height: 1.45; color: var(--l-text-secondary); }
.landing-pricing-start .landing-btn-primary { align-self: flex-start; margin-top: auto; }

.landing-pricing-note { max-width: 520px; margin-top: auto; padding-top: 24px; font-size: 0.8125rem; line-height: 1.55; color: var(--l-text-muted); }

/* ---------- Homepage: questions ----------
   A grey band: the heading stays in view while the questions scroll past. */

.landing-faq-section { padding-top: 112px; padding-bottom: 112px; background: var(--l-bg-subtle); }
.landing-faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
.landing-faq-title { position: sticky; top: 112px; }

.landing-faq { interpolate-size: allow-keywords; }
.landing-faq details { border-top: 1px solid var(--l-border); }
.landing-faq details:last-child { border-bottom: 1px solid var(--l-border); }
.landing-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--l-text);
}
.landing-faq summary::-webkit-details-marker { display: none; }
.landing-faq summary::after { content: "+"; font-weight: 500; color: #9CA3AF; transition: transform var(--l-transition); }
.landing-faq details[open] summary::after { transform: rotate(45deg); }
.landing-faq summary:focus-visible { outline: 2px solid var(--l-primary); outline-offset: 3px; }
.landing-faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
}
.landing-faq details[open]::details-content { block-size: auto; }
.landing-faq details p { padding: 0 48px 24px 0; font-size: 0.9375rem; line-height: 1.65; color: var(--l-text-secondary); }

/* ---------- Homepage: closing call to action ----------
   The two sides of a tender again, as in the hero: two tinted halves meeting at a
   hairline, each with its own start. */

.landing-home-cta { padding-top: 96px; background: var(--l-bg); }
/* Centred at display size: the page closes the way the hero opens */
.landing-home-cta-head { max-width: var(--l-max-width); margin: 0 auto; box-sizing: content-box; text-align: center; }
.landing-home-cta-head .landing-two-tone {
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.landing-home-cta-head .landing-two-tone span { display: block; }

.landing-home-cta-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 56px;
  border-top: 1px solid var(--l-border);
  border-bottom: 1px solid var(--l-border);
}
.landing-home-cta-side {
  --cta-tint: rgba(26, 180, 153, 0.07);
  position: relative;
  display: flex;
  padding: 64px 56px 72px;
  background: linear-gradient(to bottom, var(--cta-tint), transparent 85%);
  transition: background-color 0.4s ease;
}
.landing-home-cta-side::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--l-primary); }
.landing-home-cta-side--buyer { justify-content: flex-end; }
.landing-home-cta-side--vendor { --cta-tint: rgba(239, 100, 56, 0.07); border-left: 1px solid var(--l-border); }
.landing-home-cta-side--vendor::before { background: var(--l-secondary); }
.landing-home-cta-side:hover { background-color: color-mix(in srgb, var(--cta-tint) 60%, transparent); }
.landing-home-cta-copy { width: min(100%, calc(var(--l-max-width) / 2 - 56px)); }
.landing-home-cta-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--l-text); }
.landing-home-cta-copy h3 {
  max-width: 440px;
  margin-top: 12px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
}
.landing-home-cta-copy > p:not(.landing-home-cta-label) { margin: 10px 0 28px; font-size: 0.9375rem; line-height: 1.6; color: var(--l-text-secondary); }

.landing-home-cta-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--l-max-width);
  margin: 0 auto;
  padding-top: 24px;
  padding-bottom: 72px;
  box-sizing: content-box;
  font-size: 0.875rem;
  color: var(--l-text-secondary);
}
.landing-home-cta-foot a { font-weight: 600; color: var(--l-text); text-decoration: none; }
.landing-home-cta-foot a:hover { color: var(--l-primary); }

@media (max-width: 900px) {
  .landing-trust { padding-top: 88px; padding-bottom: 88px; }
  .landing-pricing-section { padding-top: 104px; padding-bottom: 88px; }
  .landing-faq-section { padding-top: 80px; padding-bottom: 80px; }
  .landing-faq-title { position: static; }
  .landing-proof { padding-top: 88px; padding-bottom: 96px; }
  .landing-proof-grid { grid-template-columns: minmax(0, 1fr); padding-right: 0; }
  .landing-proof-research { padding: 0 24px; }
  .landing-proof-case { margin-right: 16px; }
  .landing-proof-case-inner { padding: 32px 24px; }
  .landing-proof-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .landing-trust-grid, .landing-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .landing-pricing-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .landing-pricing-table { margin-top: 36px; }
  .landing-pricing-tiers, .landing-pricing-foot, .landing-pricing-free ul { grid-template-columns: minmax(0, 1fr); }
  .landing-pricing-tier { padding: 28px 24px; }
  .landing-pricing-tier + .landing-pricing-tier { border-left: 0; border-top: 1px solid var(--l-border); }
  .landing-pricing-free, .landing-pricing-start { padding: 28px 24px; }
  .landing-pricing-start { border-left: 0; border-top: 1px solid var(--l-border); }
  .landing-proof-grid { gap: 40px; }
  .landing-proof-title { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .landing-proof-title-rest { font-size: 1.125rem; }
  .landing-trust-grid { --trust-gutter: 24px; }
  .landing-trust-evidence { padding: 28px 24px 176px 24px; }
  .landing-trust-feed { left: auto; right: 8px; bottom: 16px; width: 230px; }
  .landing-trust-mark--quote { left: -10px; }
  .landing-proof-case h3 { font-size: 1.375rem; }
  .landing-safety-inner { width: calc(100% - 48px); padding: 64px 0; }
  .landing-safety-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .landing-safety-items { grid-template-columns: minmax(0, 1fr); }
  .landing-safety-items li, .landing-safety-items li + li { padding: 20px 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .landing-home-cta { padding-top: 72px; }
  .landing-home-cta-head .landing-two-tone { font-size: 2.25rem; }
  .landing-home-cta-sides { grid-template-columns: minmax(0, 1fr); }
  .landing-home-cta-side { padding: 44px 24px 48px; }
  .landing-home-cta-side--vendor { border-left: 0; border-top: 1px solid var(--l-border); }
  .landing-home-cta-copy { width: 100%; }
  .landing-home-cta-foot { flex-direction: column; padding-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-safety-glow { animation: none; }
  .js .landing-trust-evidence .landing-trust-mark,
  .js .landing-trust-evidence .landing-trust-feed { transform: none; opacity: 1; animation: none; }
  .landing-trust-scan { display: none; }
  .js .landing-proof-case .landing-count { --landing-count: var(--to); transition: none; }
  .js .landing-proof-row .landing-proof-bar-fill { width: var(--value); transition: none; }
  .landing-proof-case, .landing-home-cta-side, .landing-faq details::details-content { transition: none; }
}

/* ---------- Subpages: About ---------- */

.subpage-story-layout {
  max-width: 720px;
}

.subpage-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 48px 0;
  border-top: 1px solid var(--l-border-light);
  border-bottom: 1px solid var(--l-border-light);
}

.subpage-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  text-align: center;
}

.subpage-stat-number {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--l-primary);
  letter-spacing: -0.04em;
  line-height: 1.2;
}

.subpage-stat-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--l-text-muted);
}

.subpage-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--l-border);
}

.subpage-team-card {
  background: #ffffff;
  padding: 40px 32px;
  transition: all 0.3s ease;
}

.subpage-team-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  z-index: 1;
}

.subpage-team-photo {
  width: 80px;
  height: 80px;
  overflow: hidden;
  margin-bottom: 20px;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.subpage-team-card:hover .subpage-team-photo {
  filter: grayscale(0%);
}

.subpage-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.subpage-team-role {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--l-primary);
  margin-bottom: 10px;
}

.subpage-team-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--l-text);
  margin-bottom: 10px;
}

.subpage-team-bio {
  font-size: 0.9375rem;
  color: var(--l-text-secondary);
  line-height: 1.65;
}

@media (max-width: 768px) {
  .subpage-stats-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .subpage-team-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Subpages: Contacts ---------- */

.contacts-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* Left column: contact list */
.contacts-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contacts-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--l-border-light);
  text-decoration: none;
  transition: all 0.2s ease;
}

.contacts-item:first-child {
  padding-top: 0;
}

.contacts-item:last-child {
  border-bottom: none;
}

.contacts-item--link:hover {
  padding-left: 8px;
}

.contacts-item--link:hover .contacts-item-value {
  color: var(--l-primary);
}

.contacts-item-icon {
  color: var(--l-primary);
  flex-shrink: 0;
  margin-top: 3px;
}

.contacts-item-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--l-text-muted);
  margin-bottom: 4px;
}

.contacts-item-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--l-text);
  line-height: 1.5;
  transition: color 0.2s ease;
}

/* Right column: form card */
.contacts-form-card {
  background: var(--l-bg-subtle);
  border: 1px solid var(--l-border-light);
  border-radius: 16px;
  padding: 36px;
}

/* Native contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--l-text);
  letter-spacing: 0.01em;
}

.contact-form-input,
.contact-form-textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--l-text);
  background: var(--l-bg);
  border: 1px solid var(--l-border);
  border-radius: 10px;
  outline: none;
  transition: border-color var(--l-transition), box-shadow var(--l-transition);
  box-sizing: border-box;
}

.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
  color: var(--l-text-muted);
}

.contact-form-input:focus,
.contact-form-textarea:focus {
  border-color: var(--l-text);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}

.contact-form-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.55;
}

.contact-form-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  background: var(--l-text);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: all var(--l-transition);
  margin-top: 4px;
}

.contact-form-submit:hover {
  background: #1a1a1a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.contact-form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.contact-form-errors {
  margin-bottom: 20px;
  padding: 14px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
}

.contact-form-errors-heading {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #b91c1c;
  margin: 0 0 6px 0;
}

.contact-form-errors ul {
  margin: 0;
  padding-left: 18px;
}

.contact-form-errors li {
  font-size: 0.8125rem;
  color: #b91c1c;
  line-height: 1.5;
}

/* Thanks page */
.contacts-thanks-wrap {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.contacts-thanks-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  color: var(--l-primary);
}

.contacts-thanks-body {
  font-size: 1.0625rem;
  color: var(--l-text-secondary);
  line-height: 1.7;
  margin-top: 16px;
}

@media (max-width: 640px) {
  .contact-form-row {
    grid-template-columns: 1fr;
  }

  .contacts-form-card {
    padding: 28px 22px;
  }
}

/* CTA link (kept from before) */
.subpage-contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--l-text);
  text-decoration: none;
  padding: 14px 0;
  transition: color 0.2s ease;
}

.subpage-contact-cta:hover {
  color: var(--l-secondary);
}

.subpage-contact-cta svg {
  color: var(--l-primary);
}

@media (max-width: 768px) {
  .contacts-two-col {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ---------- Subpages: Features ---------- */

.subpage-feature-header {
  margin-bottom: 48px;
}

.subpage-feature-screenshot {
  margin-bottom: 32px;
}

.subpage-feature-screenshot-placeholder {
  aspect-ratio: 16 / 9;
  background: var(--l-bg-subtle);
  border: 2px dashed var(--l-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.subpage-feature-screenshot-placeholder span {
  font-size: 0.8125rem;
  color: var(--l-text-muted);
}

.subpage-feature-capabilities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--l-border);
}

.subpage-capability-card {
  background: #ffffff;
  padding: 36px 32px;
  transition: all 0.3s ease;
}

.subpage-capability-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  z-index: 1;
}

.subpage-capability-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--l-text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.subpage-capability-desc {
  font-size: 0.9375rem;
  color: var(--l-text-secondary);
  line-height: 1.65;
}

@media (max-width: 768px) {
  .subpage-feature-capabilities {
    grid-template-columns: 1fr;
  }
}

/* ---------- Subpages: Pricing ---------- */

.subpage-price-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
}

.subpage-price-hero-text {
  max-width: 520px;
}

.subpage-price-hero-text .subpage-price-aside {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.subpage-price-card {
  width: 320px;
  overflow: hidden;
  border: 1px solid var(--l-border);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.subpage-price-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}

.subpage-price-card-top {
  background:
    radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px),
    var(--l-primary);
  background-size: 16px 16px;
  padding: 36px 40px 40px;
  text-align: center;
}

.subpage-price-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  display: block;
  margin-bottom: 8px;
}

.subpage-price-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.subpage-price-amount {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 5rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.04em;
  line-height: 1;
}

.subpage-price-currency {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: -0.02em;
  line-height: 1;
}

.subpage-price-card-bottom {
  background: #ffffff;
  padding: 28px 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.subpage-price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--l-text-secondary);
  line-height: 1.4;
}

.subpage-price-row svg {
  flex-shrink: 0;
}

.subpage-price-aside {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--l-text-muted);
  line-height: 1.7;
}

.subpage-costs-table {
  max-width: 720px;
}

.subpage-costs-header {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 2px solid var(--l-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--l-text-muted);
}

.subpage-costs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--l-border-light);
  font-size: 0.9375rem;
  color: var(--l-text-secondary);
}

.subpage-costs-value {
  font-weight: 800;
  color: var(--l-text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
}

.subpage-pricing-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--l-border);
  max-width: 720px;
}

.subpage-pricing-col {
  background: #ffffff;
}

.subpage-pricing-col-header {
  padding: 28px 32px;
  border-bottom: 1px solid var(--l-border-light);
}

.subpage-pricing-col-header h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--l-text);
}

.subpage-pricing-col-header--free {
  border-bottom-color: var(--l-primary);
  border-bottom-width: 2px;
}

.subpage-pricing-col-header--credits {
  border-bottom-color: var(--l-secondary);
  border-bottom-width: 2px;
}

.subpage-pricing-list {
  list-style: none;
  padding: 24px 32px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.subpage-pricing-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--l-text-secondary);
  line-height: 1.5;
}

.subpage-pricing-list li svg {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .subpage-price-hero {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .subpage-price-hero-text {
    max-width: none;
  }

  .subpage-price-card {
    width: 100%;
    max-width: 360px;
  }
}

@media (max-width: 640px) {
  .subpage-price-card {
    padding: 36px 28px;
  }

  .subpage-pricing-columns {
    grid-template-columns: 1fr;
  }
}

/* ---------- Blog ---------- */

.landing-blog-card {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 16 / 11;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid var(--l-border-light);
}

.landing-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.landing-blog-card-image {
  position: absolute;
  inset: 0;
}

.landing-blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.landing-blog-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.05) 100%);
}

.landing-blog-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
}

.landing-blog-card-date {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}

.landing-blog-card-series {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 6px;
}

.landing-blog-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

/* Blog Show - Hero */

.landing-blog-hero {
  position: relative;
  height: 400px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-blog-hero-image {
  position: absolute;
  inset: 0;
}

.landing-blog-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.landing-blog-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.2) 100%);
}

.landing-blog-hero-content {
  position: relative;
  text-align: center;
  max-width: 720px;
  padding: 0 24px;
}

.landing-blog-hero-date {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
}

.landing-blog-hero-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

@media (max-width: 768px) {
  .landing-blog-hero {
    height: 300px;
  }
  .landing-blog-hero-title {
    font-size: 1.5rem;
  }
}

/* Blog Post Body */

.blog-post-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}

.blog-post-body h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--l-text);
  margin-top: 40px;
  margin-bottom: 16px;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

.blog-post-body p {
  font-size: 1.0625rem;
  color: var(--l-text-secondary);
  line-height: 1.75;
  margin-bottom: 20px;
}

.blog-post-body strong {
  color: var(--l-text);
  font-weight: 600;
}

.blog-post-body ul,
.blog-post-body ol {
  margin-bottom: 20px;
  padding-left: 24px;
}

.blog-post-body ul {
  list-style: disc;
}

.blog-post-body ol {
  list-style: decimal;
}

.blog-post-body li {
  font-size: 1.0625rem;
  color: var(--l-text-secondary);
  line-height: 1.75;
  margin-bottom: 8px;
}

.blog-post-body ul.blog-post-findings {
  list-style: none;
  padding-left: 0;
  margin-bottom: 28px;
}

.blog-post-body ul.blog-post-findings li {
  padding: 10px 0 10px 18px;
  border-left: 2px solid var(--l-border-light);
  margin-bottom: 10px;
}

.blog-post-body ul.blog-post-findings li strong {
  color: var(--l-text);
  font-weight: 700;
}

.blog-post-body .blog-post-source {
  margin: 12px 0 2px;
  padding: 10px 14px;
  background: var(--l-bg-subtle);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--l-text-secondary);
  line-height: 1.55;
}

.blog-post-body .blog-post-source cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 0.8125rem;
  opacity: 0.75;
}

.blog-post-body blockquote {
  border-left: 3px solid var(--l-primary);
  padding-left: 20px;
  margin: 24px 0;
  font-style: italic;
  color: var(--l-text-secondary);
}

.blog-post-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0;
}

.blog-post-stat {
  padding: 20px 16px;
  border-radius: 12px;
  background: var(--l-bg-subtle);
  border: 1px solid var(--l-border-light);
}

.blog-post-stat-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--l-text);
  line-height: 1.2;
  margin-bottom: 6px;
}

.blog-post-stat-label {
  font-size: 0.8125rem;
  color: var(--l-text-secondary);
  line-height: 1.4;
}

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

/* headline two-way result — the one number the post is about */
.blog-post-versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin: 28px 0;
  padding: 28px 24px;
  border-radius: 12px;
  background: var(--l-bg-subtle);
  border: 1px solid var(--l-border-light);
}

.blog-post-versus-side { text-align: center; }

.blog-post-versus-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--l-text-secondary);
  margin-bottom: 10px;
}

.blog-post-versus-name::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  margin-right: 7px;
  vertical-align: baseline;
  background: var(--l-text-muted);
}

.blog-post-versus-side.is-glm .blog-post-versus-name::before { background: #7C3AED; }
.blog-post-versus-side.is-anthropic .blog-post-versus-name::before { background: #334155; }

.blog-post-versus-figure {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: var(--l-text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.blog-post-versus-side.is-glm .blog-post-versus-figure { color: #7C3AED; }

.blog-post-versus-sub {
  font-size: 0.8125rem;
  color: var(--l-text-secondary);
  margin-top: 8px;
}

.blog-post-versus-gap {
  text-align: center;
  padding: 0 4px;
  border-left: 1px solid var(--l-border-light);
  border-right: 1px solid var(--l-border-light);
}

.blog-post-versus-gap-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--l-text);
  line-height: 1.2;
  padding: 0 18px;
}

.blog-post-versus-gap-label {
  font-size: 0.75rem;
  color: var(--l-text-muted);
  padding: 0 18px;
  margin-top: 4px;
}

@media (max-width: 560px) {
  .blog-post-versus {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .blog-post-versus-figure { font-size: 2.5rem; }
  .blog-post-versus-gap {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--l-border-light);
    border-bottom: 1px solid var(--l-border-light);
    padding: 14px 0;
  }
}

.blog-post-body .blog-post-pullquote {
  position: relative;
  margin: 32px 0;
  padding: 24px 24px 24px 28px;
  border-left: 3px solid var(--l-border-light);
  border-radius: 0 12px 12px 0;
  background: var(--l-bg-subtle);
  font-size: 1.0625rem;
  font-style: normal;
  color: var(--l-text);
  line-height: 1.7;
}

.blog-post-body .blog-post-pullquote p {
  color: var(--l-text);
  margin-bottom: 0;
}

.blog-post-body .blog-post-pullquote .blog-post-pullquote-source {
  display: block;
  margin-top: 12px;
  font-size: 0.8125rem;
  font-style: normal;
  color: var(--l-text-secondary);
}

.blog-post-series-intro {
  margin: 0 0 36px;
  padding: 20px 24px;
  border-radius: 12px;
  background: var(--l-bg-subtle);
  border: 1px solid var(--l-border-light);
}

.blog-post-series-intro-name {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--l-primary);
  margin-bottom: 8px;
}

.blog-post-body .blog-post-series-intro p {
  font-size: 0.9375rem;
  color: var(--l-text-secondary);
  line-height: 1.6;
  margin-bottom: 0;
}

.blog-post-series-disclaimer {
  margin: 40px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--l-border-light);
}

.blog-post-body .blog-post-series-disclaimer p {
  font-size: 0.8125rem;
  color: var(--l-text-secondary);
  line-height: 1.6;
  margin-bottom: 0;
}

/* AI authorship notice - rendered at the foot of every post */

.blog-post-ai-notice {
  position: relative;
  margin: 44px 0 0;
  padding: 26px 28px;
}

.blog-post-ai-notice::before,
.blog-post-ai-notice::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--l-primary);
  border-style: solid;
}

.blog-post-ai-notice::before {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}

.blog-post-ai-notice::after {
  bottom: 0;
  right: 0;
  border-width: 0 2px 2px 0;
}

.blog-post-ai-notice-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--l-text-muted);
  margin-bottom: 8px;
}

.blog-post-body .blog-post-ai-notice p {
  font-size: 0.875rem;
  color: var(--l-text-secondary);
  line-height: 1.65;
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .blog-post-ai-notice {
    padding: 22px 20px;
  }
}

.blog-post-callout {
  margin: 28px 0;
  padding: 24px;
  border-radius: 12px;
  background: var(--l-bg-subtle);
  border: 1px solid var(--l-border-light);
}

.blog-post-callout-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--l-text);
  line-height: 1.3;
  margin-bottom: 8px;
}

.blog-post-body .blog-post-callout p {
  font-size: 0.9375rem;
  color: var(--l-text-secondary);
  margin-bottom: 0;
  line-height: 1.6;
}

/* --- Editorial data figures (blog post 22 onward) ---
   Series hues are validated for CVD separation against the #FAFAFA surface;
   every mark is direct-labelled, which is also the relief for teal's
   sub-3:1 contrast against that surface. */

.blog-post-figure {
  margin: 32px 0;
  padding: 24px;
  border-radius: 12px;
  background: var(--l-bg-subtle);
  border: 1px solid var(--l-border-light);
}

.blog-post-figure-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--l-text);
  line-height: 1.3;
  margin-bottom: 4px;
}

.blog-post-figure-note {
  font-size: 0.8125rem;
  color: var(--l-text-muted);
  line-height: 1.5;
  margin-bottom: 20px;
}

.blog-post-body .blog-post-figure-foot {
  font-size: 0.8125rem;
  color: var(--l-text-muted);
  line-height: 1.5;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--l-border-light);
}

/* Row-per-task bars: label above, bar + value below */
.blog-post-track {
  margin-bottom: 18px;
}

.blog-post-track:last-child {
  margin-bottom: 0;
}

.blog-post-track-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.blog-post-track-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--l-text);
  line-height: 1.4;
}

.blog-post-track-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--l-text);
  white-space: nowrap;
  line-height: 1.4;
}

.blog-post-track-bar {
  position: relative;
  height: 10px;
  border-radius: 4px;
  background: var(--l-border-light);
  overflow: hidden;
}

.blog-post-track-fill {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 3px;
  border-radius: 4px;
  background: var(--l-text-muted);
}

.blog-post-track-fill--extraction { background: #1AB499; }
.blog-post-track-fill--review     { background: #4338CA; }
.blog-post-track-fill--human      { background: #EF6438; }
.blog-post-track-fill--machine    { background: #1AB499; }
.blog-post-track-fill--neutral    { background: #94A3B8; }

.blog-post-track-meta {
  font-size: 0.8125rem;
  color: var(--l-text-secondary);
  line-height: 1.5;
  margin-top: 7px;
}

/* Headline ratio for the human-vs-machine comparison */
.blog-post-ratio {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--l-border-light);
}

.blog-post-ratio-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--l-text);
  line-height: 1;
  letter-spacing: -0.03em;
}

.blog-post-ratio-label {
  font-size: 0.875rem;
  color: var(--l-text-secondary);
  line-height: 1.5;
}

/* Compact ranked composition: label / bar / count on one line */
.blog-post-rank {
  display: grid;
  grid-template-columns: minmax(0, 11rem) 1fr 2.25rem;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}

.blog-post-rank:last-of-type {
  margin-bottom: 0;
}

.blog-post-rank-name {
  font-size: 0.8125rem;
  color: var(--l-text-secondary);
  line-height: 1.4;
}

.blog-post-rank-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--l-border-light);
  overflow: hidden;
}

.blog-post-rank-fill {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: 4px;
  background: #1AB499;
}

.blog-post-rank-count {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--l-text);
  text-align: right;
  line-height: 1.4;
}

@media (max-width: 560px) {
  .blog-post-figure {
    padding: 20px 16px;
  }

  .blog-post-rank {
    grid-template-columns: minmax(0, 8rem) 1fr 2rem;
    gap: 8px;
  }

  .blog-post-ratio-value {
    font-size: 1.875rem;
  }
}

.blog-post-body a {
  color: var(--l-primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--l-primary) 40%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--l-transition);
}

.blog-post-body a:hover {
  text-decoration-color: var(--l-primary);
}

.blog-post-cta {
  margin: 40px -24px;
  padding: 40px 32px;
  border-radius: 12px;
  background: #111;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.blog-post-cta-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.blog-post-cta-text {
  position: relative;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.3125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin-bottom: 24px;
}

.blog-post-body .blog-post-cta-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 13px 28px;
  border-radius: 6px;
  background: #fff;
  color: #111;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--l-transition);
}

.blog-post-body .blog-post-cta-button:hover {
  background: var(--l-primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(26, 180, 153, 0.3);
}

.blog-post-references {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--l-border-light);
}

.blog-post-references h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--l-text);
  margin-bottom: 16px;
}

.blog-post-references ol {
  list-style: decimal;
  padding-left: 20px;
  margin-bottom: 0;
}

.blog-post-references li {
  font-size: 0.875rem;
  color: var(--l-text-secondary);
  line-height: 1.6;
  margin-bottom: 6px;
}

.blog-post-references li a {
  font-size: 0.875rem;
}

.blog-post-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--l-primary);
  text-decoration: none;
  transition: opacity var(--l-transition);
}

.blog-post-back:hover {
  opacity: 0.7;
}

/* ---------- Blog post charts ---------- */

.blog-chart {
  margin: 32px 0;
  padding: 24px 24px 20px;
  border-radius: 12px;
  background: var(--l-bg-subtle);
  border: 1px solid var(--l-border-light);
}

.blog-chart-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--l-text);
  line-height: 1.3;
  margin: 0 0 4px;
}

.blog-chart-note {
  font-size: 0.8125rem;
  color: var(--l-text-muted);
  line-height: 1.4;
  margin: 0 0 18px;
}

.blog-chart-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.blog-chart-row:last-child { margin-bottom: 0; }

/* paired rows — the same stage measured on two providers */
.blog-chart-row.is-pair-top { margin-bottom: 4px; }
.blog-chart-row.is-pair-bottom { margin-bottom: 18px; }
.blog-chart-row.is-pair-bottom:last-of-type { margin-bottom: 0; }

.blog-chart-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--l-text-secondary);
  text-align: right;
}

.blog-chart-track {
  height: 26px;
  border-radius: 6px;
  background: var(--l-border-light);
  overflow: hidden;
}

.blog-chart-bar {
  display: block;
  height: 100%;
  border-radius: 6px;
  min-width: 2px;
  transition: width var(--l-transition);
}

/* stacked (verdict-distribution) bars */
.blog-chart-stack {
  display: flex;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
}

.blog-chart-seg {
  height: 100%;
}

.blog-chart-value {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--l-text);
  white-space: nowrap;
}

/* provider colour mapping — consistent across every chart */
.blog-chart-bar.is-anthropic,
.blog-chart-dot.is-anthropic { background: #334155; }
.blog-chart-bar.is-openai,
.blog-chart-dot.is-openai { background: var(--l-secondary); }
.blog-chart-bar.is-google,
.blog-chart-dot.is-google { background: var(--l-primary); }
.blog-chart-bar.is-glm,
.blog-chart-dot.is-glm { background: #7C3AED; }

/* verdict segment colours */
.blog-chart-seg.is-correct { background: var(--l-primary); }
.blog-chart-seg.is-improve { background: #86EFAC; }
.blog-chart-seg.is-revise  { background: #F59E0B; }
.blog-chart-seg.is-reject  { background: #DC2626; }
.blog-chart-dot.is-correct { background: var(--l-primary); }
.blog-chart-dot.is-improve { background: #86EFAC; }
.blog-chart-dot.is-revise  { background: #F59E0B; }
.blog-chart-dot.is-reject  { background: #DC2626; }

.blog-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--l-border-light);
}

.blog-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--l-text-secondary);
}

.blog-chart-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .blog-chart-row {
    grid-template-columns: 84px 1fr auto;
    gap: 8px;
  }
  .blog-chart-label { font-size: 0.75rem; }
}

/* ---------- Footer ---------- */

.landing-footer {
  border-top: 1px solid var(--l-border-light);
}

/* ============================================================
   Buyer landing page
   ============================================================ */

.buyer-page {
  --buyer-copy: #536071;
  --buyer-muted: #8b96a6;
  --buyer-teal-dark: #108a76;
  --buyer-line: #e7e9ed;
  --buyer-warm: #f7f6f2;
  --buyer-screenshot-radius: 8px;
  overflow: hidden;
}

.buyer-page h1,
.buyer-page h2,
.buyer-page h3 {
  font-family: "Plus Jakarta Sans", sans-serif;
}

.buyer-hero {
  padding-top: 86px;
  padding-bottom: 48px;
  background:
    radial-gradient(circle at 50% 32%, rgba(26, 180, 153, 0.055), transparent 35%),
    linear-gradient(180deg, #fff 0%, #fff 78%, #fbfcfb 100%);
}

.buyer-hero-layout {
  display: block;
}

.buyer-hero-copy {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

.buyer-hero h1 {
  max-width: 1050px;
  margin: 0 auto;
  font-size: clamp(3rem, 6vw, 5.35rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.052em;
  text-wrap: balance;
}

.buyer-hero-lead {
  max-width: 760px;
  margin: 24px auto 0;
  color: var(--buyer-copy);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
  text-wrap: pretty;
}

.buyer-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.buyer-primary-button,
.buyer-secondary-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 23px;
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
  transition: transform 0.18s ease-out, background-color 0.18s ease-out, border-color 0.18s ease-out;
}

.buyer-primary-button {
  color: #fff;
  background: var(--l-text);
  border: 1px solid var(--l-text);
}

.buyer-primary-button:hover {
  color: #fff;
  background: #242424;
  transform: translateY(-1px);
}

.buyer-secondary-button {
  color: var(--l-text);
  background: #fff;
  border: 1px solid var(--buyer-line);
}

.buyer-secondary-button:hover {
  border-color: var(--l-text);
}

.buyer-primary-button:focus-visible,
.buyer-secondary-button:focus-visible,
.buyer-tab:focus-visible,
.buyer-faq-list summary:focus-visible {
  outline: 2px solid var(--l-primary);
  outline-offset: 3px;
}

.buyer-offer {
  margin: 13px 0 0;
  color: var(--buyer-teal-dark);
  font-size: 0.8rem;
  line-height: 1.5;
}

.buyer-section-heading h2,
.buyer-timing-layout h2,
.buyer-trust-layout h2,
.buyer-faq-layout h2,
.buyer-final-cta h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.15rem);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.buyer-hero-proof {
  margin-top: 54px;
}

.buyer-decision-canvas {
  position: relative;
  min-width: 0;
  min-height: 570px;
  margin: 0;
  padding: 0 0 112px;
  overflow: visible;
}

.buyer-decision-canvas:focus-visible,
.buyer-evidence-composition:focus-visible,
.buyer-comparison-workspace:focus-visible,
.buyer-workbook-visual:focus-visible {
  outline: 2px solid var(--l-primary);
  outline-offset: 3px;
}

.buyer-decision-canvas__matrix {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #e1e4e8;
  background: #fff;
  box-shadow: 0 20px 50px -38px rgba(15, 23, 42, 0.4);
  border-radius: var(--buyer-screenshot-radius);
}

.buyer-decision-canvas__evidence {
  position: absolute;
  right: -26px;
  bottom: 0;
  width: 62%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 10px;
  box-shadow: 0 24px 54px -26px rgba(15, 23, 42, 0.4);
}

.buyer-decision-canvas__evidence img {
  width: 100%;
  height: auto;
  display: block;
}

.buyer-product-shot {
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  background: #fff;
  border: 1px solid #e1e4e8;
  box-shadow: 0 32px 72px -36px rgba(15, 23, 42, 0.4);
  scrollbar-width: thin;
}

.buyer-product-shot:focus-visible {
  outline: 2px solid var(--l-primary);
  outline-offset: 3px;
}

.buyer-product-shot img {
  width: 100%;
  height: auto;
  display: block;
}

.buyer-product-shot--compare {
  box-shadow: 0 26px 60px -42px rgba(15, 23, 42, 0.44);
}

.buyer-verification {
  color: var(--buyer-muted);
  text-align: center;
}

.buyer-verification--hero {
  max-width: 850px;
  margin: 24px auto 0;
}

.buyer-verification p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.6;
}

.buyer-logo-section {
  padding-top: 52px;
  padding-bottom: 62px;
}

.buyer-logo-caption {
  margin: 0;
  color: #737d89;
  font-size: 0.78rem;
  line-height: 1.5;
}

.buyer-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 34px 54px;
  margin-top: 18px;
}

.buyer-logo-row img {
  width: auto;
  max-width: 110px;
  height: 26px;
  object-fit: contain;
  opacity: 0.64;
  filter: grayscale(1);
}

.buyer-workflow-section {
  padding-top: 92px;
  padding-bottom: 92px;
  border-top: 1px solid var(--buyer-line);
}

.buyer-section-heading {
  max-width: 770px;
  margin-bottom: 34px;
}

.buyer-tab-list {
  width: min(650px, 100%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--buyer-line);
}

.buyer-tab {
  min-height: 52px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--buyer-copy);
  background: transparent;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 650;
}

.buyer-tab[aria-selected="true"] {
  color: var(--l-text);
  border-bottom-color: var(--l-primary);
}

.buyer-tab-panel {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  align-items: center;
  gap: 56px;
  min-height: 440px;
  padding-top: 38px;
}

.buyer-tab-panel[hidden] { display: none; }

.buyer-tab-copy h3 {
  margin: 0 0 16px;
  font-size: clamp(1.75rem, 3.2vw, 2.7rem);
  letter-spacing: -0.04em;
  line-height: 1.17;
}

.buyer-tab-copy > p:last-child {
  margin: 0;
  color: var(--buyer-copy);
  font-size: 1rem;
  line-height: 1.75;
}

.buyer-evidence-composition {
  position: relative;
  min-height: 390px;
  margin: 0;
  padding: 0 0 92px;
  overflow: visible;
}

.buyer-evidence-composition__matrix {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #e4e7ea;
  border-radius: var(--buyer-screenshot-radius);
}

.buyer-evidence-composition__detail {
  position: absolute;
  right: -18px;
  bottom: 0;
  width: 78%;
  height: auto;
  display: block;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  box-shadow: 0 22px 48px -26px rgba(15, 23, 42, 0.46);
}

.buyer-comparison-workspace {
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: var(--buyer-screenshot-radius);
  box-shadow: 0 26px 60px -42px rgba(15, 23, 42, 0.44);
  scrollbar-width: thin;
}

.buyer-comparison-workspace__surface {
  min-width: 0;
}

.buyer-comparison-workspace__modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #f8faf9;
  border-bottom: 1px solid #e1e4e8;
}

.buyer-comparison-workspace__mode {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  color: #687480;
  border-right: 1px solid #e7e9eb;
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
}

.buyer-comparison-workspace__mode:last-child {
  border-right: 0;
}

.buyer-comparison-workspace__mode.is-active {
  color: #0f6658;
  background: #fff;
  box-shadow: inset 0 -2px var(--l-primary);
}

.buyer-comparison-workspace__mode small {
  min-width: 22px;
  padding: 2px 6px;
  color: #6f7a84;
  background: #edf0ef;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.buyer-comparison-workspace__mode.is-active small {
  color: #0f6658;
  background: #e5f6f2;
}

.buyer-comparison-workspace img {
  width: 100%;
  height: auto;
  display: block;
}

.buyer-workbook-visual {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #f7f8f8;
  border: 1px solid var(--buyer-line);
  border-radius: var(--buyer-screenshot-radius);
  box-shadow: 0 26px 60px -42px rgba(15, 23, 42, 0.44);
}

.buyer-workbook-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #fff;
  border-bottom: 1px solid var(--buyer-line);
}

.buyer-workbook-file > span {
  width: 30px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: #28834f;
  font-size: 0.75rem;
  font-weight: 800;
}

.buyer-workbook-file strong,
.buyer-workbook-file small { display: block; }
.buyer-workbook-file strong { font-size: 0.8rem; }
.buyer-workbook-file small { margin-top: 3px; color: var(--buyer-muted); font-size: 0.67rem; }

.buyer-workbook-sheet {
  overflow: hidden;
  background: #fff;
}

.buyer-workbook-sheet img {
  width: 100%;
  height: auto;
  display: block;
}

.buyer-workbook-tabs {
  display: flex;
  gap: 2px;
  overflow: hidden;
  padding: 7px 8px 0;
  background: #ecefef;
  border-top: 1px solid #dfe3e3;
}

.buyer-workbook-tabs span {
  flex: 0 0 auto;
  padding: 7px 10px 8px;
  color: #66717c;
  background: #e2e6e5;
  border-radius: 5px 5px 0 0;
  font-size: 0.6rem;
  white-space: nowrap;
}

.buyer-workbook-tabs .is-active {
  color: #1f513e;
  background: #fff;
  font-weight: 700;
  box-shadow: inset 0 2px #28834f;
}

.buyer-workbook-contents {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 14px 16px 16px;
  background: #fff;
  border-top: 1px solid var(--buyer-line);
}

.buyer-workbook-contents span {
  padding: 6px 9px;
  color: var(--buyer-copy);
  background: #f4f6f6;
  border-radius: 999px;
  font-size: 0.63rem;
}

.buyer-quality-section {
  padding-top: 104px;
  padding-bottom: 104px;
}

.buyer-quality-intro {
  max-width: 900px;
}

.buyer-quality-intro h2 {
  margin: 0;
  font-size: clamp(2.45rem, 5vw, 4.65rem);
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.buyer-quality-intro p {
  max-width: 780px;
  margin: 24px 0 0;
  color: var(--buyer-copy);
  font-size: 1.02rem;
  line-height: 1.75;
}

.buyer-quality-visual {
  margin: 54px 0 0;
  overflow: hidden;
}

.buyer-quality-visual img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--buyer-line);
  border-radius: var(--buyer-screenshot-radius);
  box-shadow: 0 30px 72px -48px rgba(15, 23, 42, 0.5);
}

.buyer-quality-visual:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--l-primary) 45%, transparent);
  outline-offset: 5px;
}

.buyer-quality-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 38px;
  border-top: 1px solid var(--buyer-line);
}

.buyer-quality-points > div {
  min-width: 0;
  padding: 26px 32px 0 0;
}

.buyer-quality-points > div + div {
  padding-left: 32px;
  border-left: 1px solid var(--buyer-line);
}

.buyer-quality-points strong {
  display: block;
  font-size: 0.94rem;
  line-height: 1.4;
}

.buyer-quality-points p {
  margin: 10px 0 0;
  color: var(--buyer-copy);
  font-size: 0.8rem;
  line-height: 1.65;
}

.buyer-capabilities-section {
  padding-top: 88px;
  padding-bottom: 88px;
  background: var(--buyer-warm);
}

.buyer-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--buyer-line);
}

.buyer-capability-grid article { padding: 32px; background: #fff; }
.buyer-capability-grid h3 { margin: 0 0 12px; font-size: 1.15rem; line-height: 1.4; }
.buyer-capability-grid p { margin: 0; color: var(--buyer-copy); font-size: 0.86rem; line-height: 1.7; }

.buyer-timing-section { padding-top: 92px; padding-bottom: 92px; }

.buyer-timing-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
}

.buyer-timing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.buyer-timing-grid > div { padding: 28px; border: 1px solid var(--buyer-line); }
.buyer-timing-grid strong { display: block; font-size: 1.65rem; letter-spacing: -0.04em; }
.buyer-timing-grid span { display: block; margin-top: 8px; color: var(--buyer-copy); font-size: 0.8rem; line-height: 1.5; }
.buyer-timing-grid p { grid-column: 1 / -1; margin: 0; color: var(--buyer-copy); font-size: 0.85rem; line-height: 1.65; }

.buyer-trust-section {
  padding-top: 92px;
  padding-bottom: 92px;
  color: #fff;
  background: #151719;
}

.buyer-trust-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 80px;
}

.buyer-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #353a3f;
}

.buyer-trust-grid article { padding: 26px; background: #1d2023; }
.buyer-trust-grid strong { display: block; font-size: 0.9rem; }
.buyer-trust-grid p { margin: 9px 0 0; color: #aeb7bd; font-size: 0.78rem; line-height: 1.65; }

.buyer-faq-section { padding-top: 92px; padding-bottom: 92px; }

.buyer-faq-layout {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 80px;
}

.buyer-faq-list { border-top: 1px solid var(--buyer-line); }
.buyer-faq-list details { border-bottom: 1px solid var(--buyer-line); }
.buyer-faq-list summary { padding: 22px 4px; cursor: pointer; font-weight: 650; list-style: none; }
.buyer-faq-list summary::-webkit-details-marker { display: none; }
.buyer-faq-list summary::after { content: "+"; float: right; color: var(--buyer-muted); font-size: 1.2rem; font-weight: 400; }
.buyer-faq-list details[open] summary::after { content: "−"; }
.buyer-faq-list details p { margin: 0; padding: 0 4px 22px; color: var(--buyer-copy); line-height: 1.7; }

.buyer-final-cta {
  padding-top: 94px;
  padding-bottom: 94px;
  background: #eff9f6;
}

.buyer-final-cta p {
  max-width: 720px;
  margin: 18px auto 30px;
  color: var(--buyer-copy);
  line-height: 1.7;
}

@media (max-width: 900px) {
  .buyer-tab-panel,
  .buyer-timing-layout,
  .buyer-trust-layout,
  .buyer-faq-layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .buyer-tab-panel { min-height: 0; }
  .buyer-quality-points { grid-template-columns: 1fr; }
  .buyer-quality-points > div,
  .buyer-quality-points > div + div {
    padding: 22px 0;
    border-left: 0;
    border-bottom: 1px solid var(--buyer-line);
  }
  .buyer-capability-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .buyer-hero { padding-top: 58px; padding-bottom: 38px; }
  .buyer-hero h1 { font-size: 2.75rem; }
  .buyer-hero-actions { align-items: stretch; flex-direction: column; }
  .buyer-primary-button,
  .buyer-secondary-button { width: 100%; }
  .buyer-product-shot img { width: 720px; max-width: none; }
  .buyer-hero-proof,
  .buyer-evidence-composition,
  .buyer-comparison-workspace,
  .buyer-workbook-visual { overflow-x: auto; scrollbar-width: thin; }
  .buyer-decision-canvas { width: 820px; min-height: 535px; }
  .buyer-decision-canvas__evidence { right: auto; left: 180px; width: 520px; }
  .buyer-evidence-composition { width: 700px; min-height: 420px; }
  .buyer-comparison-workspace__surface { width: 720px; }
  .buyer-workbook-visual { width: 700px; }
  .buyer-workbook-sheet img { width: 1000px; max-width: none; }
  .buyer-logo-row { gap: 28px 34px; }
  .buyer-logo-row img { max-width: 84px; height: 22px; }
  .buyer-workflow-section,
  .buyer-quality-section,
  .buyer-capabilities-section,
  .buyer-timing-section,
  .buyer-trust-section,
  .buyer-faq-section { padding-top: 66px; padding-bottom: 66px; }
  .buyer-quality-intro h2 { font-size: 2.55rem; }
  .buyer-quality-visual {
    margin-top: 38px;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .buyer-quality-visual img { width: 720px; max-width: none; }
  .buyer-tab { font-size: 0.73rem; }
  .buyer-timing-grid,
  .buyer-trust-grid { grid-template-columns: 1fr; }
  .buyer-timing-grid p { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-persona-link,
  .buyer-primary-button,
  .buyer-secondary-button { transition: none; }
}

/* ============================================================
   Vendor landing page
   ============================================================ */

.vendor-hero {
  background: transparent;
}

.vendor-hero-screenshot {
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
}

.vendor-hero-screenshot img {
  display: block;
  width: 100%;
  height: auto;
}

.vendor-hero-screenshot:focus-visible {
  outline: 2px solid var(--l-primary);
  outline-offset: 4px;
}

.vendor-review-canvas {
  position: relative;
  min-width: 0;
  min-height: 570px;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.vendor-review-canvas__stack {
  position: absolute;
  inset: 0;
}

.vendor-review-canvas__stack > img {
  position: absolute;
  height: auto;
  display: block;
}

.vendor-review-canvas__verdict {
  z-index: 4;
  top: 0;
  left: 1%;
  width: 76%;
}

.vendor-review-canvas__executive {
  z-index: 3;
  top: 112px;
  right: 1%;
  width: 72%;
}

.vendor-review-canvas__requirements {
  z-index: 2;
  top: 200px;
  left: 2%;
  width: 96%;
}

.vendor-review-canvas__evidence {
  position: absolute;
  z-index: 5;
  right: -1%;
  bottom: 0;
  width: 57%;
  overflow: hidden;
  padding: 22px 24px 20px;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 12px;
  box-shadow: 0 18px 42px -30px rgba(15, 23, 42, 0.42);
}

.vendor-review-canvas__evidence img,
.vendor-review-shot img,
.vendor-wide-visual img {
  width: 100%;
  height: auto;
  display: block;
}

.vendor-review-canvas:focus-visible,
.vendor-review-shot:focus-visible,
.vendor-wide-visual:focus-visible {
  outline: 2px solid var(--l-primary);
  outline-offset: 4px;
}

.vendor-review-shot {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: var(--buyer-screenshot-radius);
  box-shadow: 0 28px 62px -46px rgba(15, 23, 42, 0.52);
}

.vendor-review-shot--evidence {
  padding: 20px 22px;
}

.vendor-compose-section {
  padding-top: 104px;
  padding-bottom: 104px;
  border-top: 1px solid var(--buyer-line);
}

.vendor-section-intro {
  max-width: 900px;
}

.vendor-section-intro h2 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(2.45rem, 5vw, 4.65rem);
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.vendor-section-intro p {
  max-width: 780px;
  margin: 24px 0 0;
  color: var(--buyer-copy);
  font-size: 1.02rem;
  line-height: 1.75;
}

.vendor-wide-visual {
  margin: 54px 0 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--buyer-line);
  border-radius: var(--buyer-screenshot-radius);
  box-shadow: 0 30px 72px -48px rgba(15, 23, 42, 0.5);
}

.vendor-wide-visual--composition {
  padding: 20px 22px;
}

.vendor-inline-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 38px;
  border-top: 1px solid var(--buyer-line);
}

.vendor-inline-points > div {
  min-width: 0;
  padding: 26px 32px 0 0;
}

.vendor-inline-points > div + div {
  padding-left: 32px;
  border-left: 1px solid var(--buyer-line);
}

.vendor-inline-points strong,
.vendor-opportunity-points strong {
  display: block;
  font-size: 0.94rem;
  line-height: 1.4;
}

.vendor-inline-points p,
.vendor-opportunity-points p {
  margin: 10px 0 0;
  color: var(--buyer-copy);
  font-size: 0.8rem;
  line-height: 1.65;
}

.vendor-opportunity-section {
  padding-top: 96px;
  padding-bottom: 96px;
  background: var(--buyer-warm);
}

.vendor-opportunity-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: start;
  gap: 76px;
}

.vendor-opportunity-points {
  border-top: 1px solid #dfe2e1;
}

.vendor-opportunity-points > div {
  padding: 22px 0;
  border-bottom: 1px solid #dfe2e1;
}

.vendor-wide-visual--opportunities {
  margin-top: 50px;
}

@media (max-width: 900px) {
  .vendor-opportunity-layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .vendor-inline-points {
    grid-template-columns: 1fr;
  }

  .vendor-inline-points > div,
  .vendor-inline-points > div + div {
    padding: 22px 0;
    border-left: 0;
    border-bottom: 1px solid var(--buyer-line);
  }
}

@media (max-width: 620px) {
  .vendor-hero-screenshot {
    width: 820px;
  }

  .vendor-review-canvas {
    width: 820px;
    min-height: 520px;
  }

  .vendor-review-canvas__stack {
    width: 820px;
  }

  .vendor-review-canvas__verdict {
    left: 0;
    width: 650px;
  }

  .vendor-review-canvas__executive {
    top: 88px;
    right: 0;
    width: 610px;
  }

  .vendor-review-canvas__requirements {
    top: 150px;
    left: 12px;
    width: 790px;
  }

  .vendor-review-canvas__evidence {
    right: auto;
    left: 286px;
    width: 520px;
    padding: 16px 18px 15px;
  }

  .vendor-review-panel .vendor-review-shot,
  .vendor-wide-visual {
    width: 720px;
  }

  .vendor-review-panel,
  .vendor-wide-visual {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .vendor-compose-section,
  .vendor-opportunity-section {
    padding-top: 66px;
    padding-bottom: 66px;
  }

  .vendor-section-intro h2 {
    font-size: 2.55rem;
  }

  .vendor-wide-visual {
    margin-top: 38px;
  }
}

/* ============================================================
   RFP quality check feature page
   ============================================================ */

.quality-feature-page {
  --quality-copy: #536071;
  --quality-muted: #8b96a6;
  --quality-line: #e7e9ed;
  --quality-warm: #f7f6f2;
  overflow-x: clip;
  color: var(--l-text);
  background: #fff;
}

.quality-feature-page h1,
.quality-feature-page h2,
.quality-feature-page h3 {
  font-family: "Plus Jakarta Sans", sans-serif;
  text-wrap: balance;
}

.quality-feature-container {
  width: min(var(--l-max-width), calc(100% - 64px));
  margin-inline: auto;
}

.quality-feature-hero {
  padding: 86px 0 76px;
  background: #fff;
}

.quality-feature-hero__copy {
  max-width: 1060px;
  margin-inline: auto;
  text-align: center;
}

.quality-feature-hero h1 {
  max-width: 1030px;
  margin: 0 auto;
  font-size: clamp(3rem, 6vw, 5.35rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.052em;
}

.quality-feature-hero__lead,
.quality-feature-section-heading > p {
  color: var(--quality-copy);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.72;
  text-wrap: pretty;
}

.quality-feature-hero__lead {
  max-width: 770px;
  margin: 24px auto 0;
}

.quality-feature-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.quality-feature-primary-cta,
.quality-feature-secondary-cta {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 23px;
  border: 1px solid var(--l-text);
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
  transition: transform 0.18s ease-out, background-color 0.18s ease-out, border-color 0.18s ease-out;
}

.quality-feature-primary-cta {
  color: #fff;
  background: var(--l-text);
}

.quality-feature-primary-cta:hover {
  color: #fff;
  background: #242424;
  transform: translateY(-1px);
}

.quality-feature-secondary-cta {
  color: var(--l-text);
  background: #fff;
  border-color: var(--quality-line);
}

.quality-feature-secondary-cta:hover { border-color: var(--l-text); }

.quality-feature-primary-cta:focus-visible,
.quality-feature-secondary-cta:focus-visible,
.quality-feature-product-visual:focus-visible,
.quality-feature-faq summary:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 3px;
}

.quality-feature-hero__offer {
  margin: 13px 0 0;
  color: #0f766e;
  font-size: 0.8rem;
  line-height: 1.5;
}

.quality-feature-section-heading { max-width: 800px; }
.quality-feature-section-heading--wide { max-width: 900px; }

.quality-feature-section-heading h2,
.quality-feature-faq h2,
.quality-feature-final h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.15rem);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -0.045em;
}

.quality-feature-section-heading > p {
  max-width: 760px;
  margin: 20px 0 0;
}

.quality-feature-product-visual {
  margin: 0;
  padding: clamp(10px, 1.25vw, 18px);
  overflow: hidden;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 12px;
  box-shadow: 0 28px 64px -40px rgba(15, 23, 42, 0.42);
}

.quality-feature-product-visual img {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  border: 0;
  border-radius: 5px;
}

.quality-feature-product-visual--hero { margin-top: 54px; }

.quality-feature-proof {
  padding: 96px 0;
  border-top: 1px solid var(--quality-line);
}

.quality-feature-product-visual--detail { margin-top: 42px; }

.quality-feature-coverage {
  padding: 104px 0;
  background: var(--quality-warm);
  border-top: 1px solid var(--quality-line);
  border-bottom: 1px solid var(--quality-line);
}

.quality-feature-coverage__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 52px;
  margin: 50px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: quality-coverage;
  border-bottom: 1px solid var(--quality-line);
}

.quality-feature-coverage__item {
  min-width: 0;
  padding: 27px 0 30px;
  border-top: 1px solid var(--quality-line);
  counter-increment: quality-coverage;
}

.quality-feature-coverage__item article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 14px;
}

.quality-feature-coverage__item article::before {
  content: counter(quality-coverage, decimal-leading-zero);
  color: #108a76;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  padding-top: 4px;
}

.quality-feature-coverage__item h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.quality-feature-coverage__item p {
  grid-column: 2;
  margin: 9px 0 0;
  color: var(--quality-copy);
  font-size: 0.86rem;
  line-height: 1.68;
}

.quality-feature-output {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 56px;
  margin-top: 46px;
  padding: 36px 0 0;
  border-top: 1px solid #cfd4d8;
}

.quality-feature-output h3 {
  max-width: 330px;
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.35;
}

.quality-feature-output__body { max-width: 720px; }

.quality-feature-output__description,
.quality-feature-legal-note {
  margin: 0;
  color: var(--quality-copy);
  line-height: 1.72;
}

.quality-feature-output__description { font-size: 0.96rem; }

.quality-feature-legal-note {
  margin-top: 22px;
  padding-top: 18px;
  color: var(--quality-copy);
  border-top: 1px solid var(--quality-line);
  font-size: 0.78rem;
}

.quality-feature-steps { padding: 92px 0 98px; }

.quality-feature-steps__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: quality-step;
}

.quality-feature-steps__list::before {
  content: "";
  position: absolute;
  top: 21px;
  right: 22px;
  left: 22px;
  height: 1px;
  background: #d8dddf;
}

.quality-feature-steps__list li {
  position: relative;
  min-width: 0;
  counter-increment: quality-step;
}

.quality-feature-steps__list li::before {
  content: "0" counter(quality-step);
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  color: #108a76;
  background: #fff;
  border: 1px solid #cfd6d7;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.quality-feature-steps h3 { margin: 0; font-size: 1.05rem; line-height: 1.4; }
.quality-feature-steps article p { margin: 12px 0 0; color: var(--quality-copy); font-size: 0.86rem; line-height: 1.7; }

.quality-feature-faq {
  padding: 92px 0 98px;
  background: #fafafa;
  border-top: 1px solid var(--quality-line);
}

.quality-feature-faq__layout {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 80px;
}

.quality-feature-faq__list { border-top: 1px solid var(--quality-line); }
.quality-feature-faq details { border-bottom: 1px solid var(--quality-line); }
.quality-feature-faq summary { padding: 22px 4px; cursor: pointer; font-weight: 650; list-style: none; }
.quality-feature-faq summary::-webkit-details-marker { display: none; }
.quality-feature-faq summary::after { content: "+"; float: right; color: var(--quality-muted); font-size: 1.2rem; font-weight: 400; }
.quality-feature-faq details[open] summary::after { content: "−"; }
.quality-feature-faq details > p { margin: 0; padding: 0 42px 22px 4px; color: var(--quality-copy); font-size: 0.88rem; line-height: 1.7; }

.quality-feature-final {
  padding: 94px 0;
  text-align: center;
  background: #eff9f6;
}

.quality-feature-final p {
  max-width: 720px;
  margin: 18px auto 30px;
  color: var(--quality-copy);
  line-height: 1.7;
}

@media (max-width: 900px) {
  .quality-feature-faq__layout,
  .quality-feature-output { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 720px) {
  .quality-feature-container { width: min(var(--l-max-width), calc(100% - 40px)); }
  .quality-feature-hero { padding: 66px 0 58px; }
  .quality-feature-hero h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .quality-feature-proof,
  .quality-feature-coverage,
  .quality-feature-steps,
  .quality-feature-faq,
  .quality-feature-final { padding-top: 74px; padding-bottom: 78px; }
  .quality-feature-coverage__list,
  .quality-feature-steps__list { grid-template-columns: 1fr; }
  .quality-feature-coverage__list { column-gap: 0; }
  .quality-feature-steps__list { gap: 0; }
  .quality-feature-steps__list::before {
    top: 21px;
    right: auto;
    bottom: 38px;
    left: 20px;
    width: 1px;
    height: auto;
  }
  .quality-feature-steps__list li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 18px;
    padding-bottom: 32px;
  }
  .quality-feature-steps__list li:last-child { padding-bottom: 0; }
  .quality-feature-steps__list li::before { margin-bottom: 0; }
  .quality-feature-product-visual { overflow-x: auto; }
  .quality-feature-product-visual img { width: 900px; max-width: none; }
}

@media (max-width: 420px) {
  .quality-feature-container { width: calc(100% - 32px); }
  .quality-feature-hero__actions { align-items: stretch; flex-direction: column; }
  .quality-feature-primary-cta,
  .quality-feature-secondary-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .quality-feature-primary-cta,
  .quality-feature-secondary-cta { transition: none; }

  .quality-feature-primary-cta:hover { transform: none; }
}

/* ---------- Landing button focus rings (a11y) ---------- */

.landing-btn-primary:focus-visible,
.landing-btn-outline:focus-visible,
.landing-btn-secondary:focus-visible,
.landing-btn-welcome:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 3px;
}

/* ---------- Features hub (editorial layout; landing tokens + existing primitives) ---------- */

.features-hub-hero { max-width: 660px; }

.features-hub-hero__lead {
  margin: 0;
  max-width: 560px;
  font-size: 1.0625rem;
  color: var(--l-text-secondary);
  line-height: 1.7;
}

.features-hub-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.features-hub-hero__actions .landing-welcome-greeting {
  width: 100%;
  margin: 0;
}

.features-hub-story {
  padding: 72px 32px;
  border-top: 1px solid var(--l-border-light);
}

.features-hub-story--alt { background: var(--l-bg-subtle); }

.features-hub-story__inner {
  max-width: var(--l-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 48px;
  align-items: center;
}

.features-hub-story--alt .features-hub-story__inner {
  grid-template-columns: 0.98fr 1.02fr;
}

.features-hub-story--alt .features-hub-story__visual { order: -1; }

.features-hub-story__title {
  margin: 12px 0 14px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--l-text);
}

.features-hub-story__tagline {
  margin: 0 0 18px;
  font-size: 1.0625rem;
  color: var(--l-text-secondary);
  line-height: 1.7;
  max-width: 36rem;
}

.features-hub-story__list {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.features-hub-story__list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9375rem;
  color: var(--l-text-secondary);
  line-height: 1.6;
}

.features-hub-story__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--l-primary);
}

.features-hub-story__availability {
  margin: 0 0 22px;
  font-size: 0.8125rem;
  color: var(--l-text-muted);
}

.features-hub-story__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.features-hub-story__visual { min-width: 0; }

.features-hub-story__shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--l-border);
  box-shadow: 0 18px 48px -30px rgba(15, 23, 42, 0.4);
}

.features-hub-story__placeholder {
  min-height: 260px;
  width: 100%;
}

.features-hub-more__header { margin-bottom: 36px; max-width: 640px; }

.features-hub-more__grid.subpage-feature-capabilities {
  grid-template-columns: repeat(2, 1fr);
}

.features-hub-more__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--l-primary);
}

.features-hub-more .subpage-capability-card:hover .features-hub-more__link { opacity: 0.8; }

@media (max-width: 900px) {
  .features-hub-story__inner,
  .features-hub-story--alt .features-hub-story__inner { grid-template-columns: 1fr; }
  .features-hub-story--alt .features-hub-story__visual { order: 0; }
  .features-hub-story { padding-inline: 24px; }
}

@media (max-width: 768px) {
  .features-hub-more__grid.subpage-feature-capabilities { grid-template-columns: 1fr; }
  .features-hub-story { padding: 52px 16px; }
}

/* ---------- Benchmark page (landing tokens; plain HTML column charts) ---------- */

.benchmark-lead {
  font-size: 1.0625rem;
  color: var(--l-text-secondary);
  line-height: 1.7;
  max-width: 720px;
  margin-bottom: 16px;
}

.benchmark-meta {
  font-size: 0.8125rem;
  color: var(--l-text-muted);
}

.benchmark-section-head { margin-bottom: 24px; }

.benchmark-h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--l-text);
  margin-bottom: 6px;
}

.benchmark-note {
  font-size: 0.9375rem;
  color: var(--l-text-secondary);
  line-height: 1.65;
}

.benchmark-prose {
  font-size: 0.9375rem;
  color: var(--l-text-secondary);
  line-height: 1.65;
  margin-bottom: 14px;
}

.benchmark-provider-icon {
  width: 20px;
  height: 20px;
  flex: none;
  opacity: 0.85;
}

/* Column chart: a plot with hairline gridlines and one slot per stack, labels in a matching grid below. */
.benchmark-columns {
  margin: 0;
  border: 1px solid var(--l-border);
  padding: 32px 32px 28px;
  overflow-x: auto;
}

.benchmark-columns__plot {
  position: relative;
  height: 300px;
  padding-left: 36px;
  /* Same formula as the labels below, so both rows share one width when the
     figure scrolls sideways; --benchmark-slots is set on the figure. */
  min-width: calc(var(--benchmark-slots, 1) * 140px + 36px);
}

.benchmark-columns__grid {
  position: absolute;
  inset: 0 0 0 36px;
}

.benchmark-columns__gridline {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--l-border-light);
}

.benchmark-columns__gridline span {
  position: absolute;
  right: 100%;
  top: -0.6em;
  padding-right: 10px;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--l-text-muted);
}

.benchmark-columns__gridline[style*="bottom: 0%"] { border-top-color: var(--l-border); }

.benchmark-columns__slots,
.benchmark-columns__labels {
  display: grid;
  grid-template-columns: repeat(var(--benchmark-slots, 1), minmax(0, 1fr));
}

.benchmark-columns__slots {
  position: relative;
  height: 100%;
}

.benchmark-columns__slot {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 3px;
  height: 100%;
  padding: 0 8px;
}

.benchmark-columns__track {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  width: min(64px, 100%);
}

.benchmark-columns--pair .benchmark-columns__track { width: min(40px, 45%); }

.benchmark-columns--pair .benchmark-columns__plot,
.benchmark-columns--pair .benchmark-columns__labels {
  min-width: calc(var(--benchmark-slots, 1) * 180px + 36px);
}

.benchmark-columns__value {
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--l-text);
  margin-bottom: 8px;
  line-height: 1;
}

.benchmark-columns--pair .benchmark-columns__value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--l-text-secondary);
}

.benchmark-columns__bar {
  width: 100%;
  background: color-mix(in srgb, var(--l-primary) 35%, #fff);
  border-radius: 4px 4px 0 0;
  transition: height 0.6s ease;
}

.benchmark-columns__bar.is-lead { background: var(--l-primary); }
.benchmark-columns__bar--en { background: var(--l-primary); }
.benchmark-columns__bar--lv { background: var(--l-secondary); }

.benchmark-columns__labels {
  padding-left: 36px;
  margin-top: 16px;
  min-width: calc(var(--benchmark-slots, 1) * 140px + 36px);
}

.benchmark-columns__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 0 8px;
}

.benchmark-columns__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--l-text);
}

.benchmark-columns__detail {
  max-width: 220px;
  color: var(--l-text-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.benchmark-columns__tooltip-trigger {
  position: relative;
  display: inline-flex;
  justify-content: center;
  padding: 3px 5px;
  outline: none;
  cursor: help;
}

.benchmark-columns--hero .benchmark-columns__name {
  flex-direction: column;
  gap: 5px;
  font-size: 0.875rem;
  white-space: nowrap;
}

.benchmark-columns--pair .benchmark-columns__name {
  gap: 7px;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.benchmark-columns__tooltip-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--l-primary) 55%, transparent);
  outline-offset: 3px;
}

.benchmark-columns__tooltip {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: 260px;
  padding: 9px 11px;
  color: #fff;
  background: color-mix(in srgb, var(--l-text) 94%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity var(--l-transition), transform var(--l-transition);
}

.benchmark-columns__tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: color-mix(in srgb, var(--l-text) 94%, transparent);
}

.benchmark-columns__tooltip-trigger:hover .benchmark-columns__tooltip,
.benchmark-columns__tooltip-trigger:focus .benchmark-columns__tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.benchmark-columns__tooltip-detail,
.benchmark-columns__tooltip-scores {
  display: block;
}

.benchmark-columns__tooltip-scores {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
}

.benchmark-columns__sub {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--l-text-secondary);
}

.benchmark-legend {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
  font-size: 0.8125rem;
  color: var(--l-text-secondary);
}

.benchmark-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.benchmark-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.benchmark-legend__swatch--en { background: var(--l-primary); }
.benchmark-legend__swatch--lv { background: var(--l-secondary); }

/* Tables */
.benchmark-scroll { overflow-x: auto; }

.benchmark-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--l-border);
  font-size: 0.875rem;
  color: var(--l-text);
}

.benchmark-table th {
  background: var(--l-bg-subtle);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--l-text-muted);
  text-align: right;
  padding: 12px 14px;
  border-bottom: 1px solid var(--l-border);
  white-space: nowrap;
}

.benchmark-table th.is-group {
  text-align: center;
  border-left: 1px solid var(--l-border-light);
}

.benchmark-table td {
  padding: 13px 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--l-border-light);
}

.benchmark-table--activities td:nth-child(2n) { border-left: 1px solid var(--l-border-light); }

.benchmark-table .is-left { text-align: left; }
.benchmark-table th.is-row-head {
  background: none;
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: normal;
  color: var(--l-text);
  border-bottom: 0;
  border-top: 1px solid var(--l-border-light);
  padding: 13px 14px;
  white-space: normal;
}
.benchmark-table .is-strong { font-weight: 700; }
.benchmark-table .is-muted { color: var(--l-text-muted); }
.benchmark-table .is-nowrap { white-space: nowrap; }
.benchmark-table .is-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  color: var(--l-text-secondary);
}

.benchmark-stack {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
}

.benchmark-stack__name { font-weight: 600; }

.benchmark-stack__detail {
  font-size: 0.75rem;
  color: var(--l-text-muted);
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .benchmark-columns__bar,
  .benchmark-columns__tooltip { transition: none; }
}

@media (max-width: 768px) {
  .benchmark-columns { padding: 24px 16px 20px; }
  .benchmark-columns__plot { height: 240px; }
}

/* ---------- Feature page: spotlight (deep-dive / country-specific sub-feature) ---------- */

.quality-feature-spotlight {
  padding: 96px 0;
  border-top: 1px solid var(--quality-line);
}

.quality-feature-spotlight--warm {
  background: var(--quality-warm);
  border-bottom: 1px solid var(--quality-line);
}

.quality-feature-spotlight__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
}

.quality-feature-spotlight--flip .quality-feature-spotlight__visual { order: -1; }

.quality-feature-spotlight__label {
  margin: 0 0 14px;
  color: #108a76;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.quality-feature-spotlight h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 750;
  line-height: 1.16;
  letter-spacing: -0.04em;
}

.quality-feature-availability {
  margin: 16px 0 0;
  font-size: 0.82rem;
  color: var(--quality-muted);
}

.quality-feature-spotlight__body {
  margin: 20px 0 0;
  color: var(--quality-copy);
  font-size: 0.98rem;
  line-height: 1.72;
}

.quality-feature-spotlight__list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.quality-feature-spotlight__list li {
  position: relative;
  padding-left: 26px;
  color: var(--quality-copy);
  font-size: 0.9rem;
  line-height: 1.6;
}

.quality-feature-spotlight__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 9px;
  height: 9px;
  border: 1.5px solid #108a76;
  border-radius: 50%;
}

.quality-feature-spotlight__list li strong {
  color: var(--l-text);
  font-weight: 650;
}

@media (max-width: 900px) {
  .quality-feature-spotlight__inner { grid-template-columns: 1fr; gap: 36px; }
  .quality-feature-spotlight--flip .quality-feature-spotlight__visual { order: 0; }
}

@media (max-width: 720px) {
  .quality-feature-spotlight { padding: 72px 0; }
  .quality-feature-spotlight__visual .quality-feature-product-visual { overflow-x: auto; }
}

/* --- Scatter chart + reference table (blog post 23) ---
   Marks use the validated series hues; every country is direct-labelled,
   which is the relief for mark-vs-surface contrast at small radii. */

.blog-post-scatter {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -8px;
  padding: 0 8px;
}

.blog-post-scatter svg {
  display: block;
  min-width: 660px;
  width: 100%;
  height: auto;
}

.blog-post-scatter .bps-grid { stroke: #E5E7EB; stroke-width: 1; }
.blog-post-scatter .bps-split { stroke: #CBD5E1; stroke-width: 1; stroke-dasharray: 4 4; }
.blog-post-scatter .bps-axis { stroke: #9CA3AF; stroke-width: 1; }
.blog-post-scatter .bps-tick {
  font-size: 11px;
  fill: var(--l-text-muted);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.blog-post-scatter .bps-axis-label {
  font-size: 11.5px;
  font-weight: 700;
  fill: var(--l-text-secondary);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.blog-post-scatter .bps-quad {
  font-size: 11px;
  font-weight: 700;
  fill: #B6BDC8;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.02em;
}
.blog-post-scatter .bps-dot { fill: #4338CA; fill-opacity: 0.78; }
.blog-post-scatter .bps-dot--novalue { fill: #FFFFFF; stroke: #EF6438; stroke-width: 2; }
.blog-post-scatter .bps-dot--nofloor { fill: #FFFFFF; stroke: #4338CA; stroke-width: 1.6; stroke-dasharray: 3 2; }
.blog-post-scatter .bps-label {
  font-size: 11px;
  font-weight: 700;
  fill: var(--l-text);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.blog-post-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--l-border-light);
}
.blog-post-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--l-text-secondary);
  line-height: 1.4;
}
.blog-post-legend-swatch {
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #4338CA;
  opacity: 0.78;
}
.blog-post-legend-swatch--novalue { background: #FFFFFF; border: 2px solid #EF6438; opacity: 1; }
.blog-post-legend-swatch--nofloor { background: #FFFFFF; border: 1.6px dashed #4338CA; opacity: 1; }

.blog-post-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 32px 0;
  border: 1px solid var(--l-border-light);
  border-radius: 12px;
}

.blog-post-body .blog-post-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.78125rem;
  margin: 0;
}

.blog-post-body .blog-post-table th {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  text-align: left;
  color: var(--l-text);
  background: var(--l-bg-subtle);
  padding: 11px 9px;
  border-bottom: 1px solid #E5E7EB;
  line-height: 1.3;
}

.blog-post-body .blog-post-table td {
  padding: 10px 9px;
  border-bottom: 1px solid var(--l-border-light);
  color: var(--l-text-secondary);
  line-height: 1.45;
  vertical-align: top;
}

.blog-post-body .blog-post-table tr:last-child td { border-bottom: 0; }
.blog-post-body .blog-post-table td:first-child {
  font-weight: 700;
  color: var(--l-text);
  white-space: nowrap;
}
.blog-post-body .blog-post-table .bpt-num { text-align: right; white-space: nowrap; }
.blog-post-body .blog-post-table .bpt-flag { display: inline-block; vertical-align: -2px; margin-right: 7px; border-radius: 2px; box-shadow: 0 0 0 1px #E5E7EB; }
.blog-post-body .blog-post-table .bpt-none { color: #EF6438; font-weight: 700; }

/* Unit hint under a column header, so every figure in the column reads in one unit. */
.blog-post-body .blog-post-table .bpt-unit {
  display: block;
  margin-top: 2px;
  font-weight: 600;
  font-size: 0.6875rem;
  color: var(--l-text-muted);
}

/* Source-strength marker on the market column. */
.blog-post-body .blog-post-table .bpt-q { margin-left: 6px; letter-spacing: 1px; font-size: 0.875rem; }
.blog-post-body .blog-post-table .bpt-q3 { color: var(--l-primary); }
.blog-post-body .blog-post-table .bpt-q2 { color: var(--l-text-secondary); }
.blog-post-body .blog-post-table .bpt-q1 { color: var(--l-text-muted); }

/* Divider ahead of the countries with no verifiable market figure. */
.blog-post-body .blog-post-table .bpt-split td {
  background: var(--l-bg-subtle);
  color: var(--l-text-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 7px 9px;
}

.blog-post-body .blog-post-tablekey {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: var(--l-text-muted);
}
.blog-post-body .blog-post-tablekey .bpt-key { white-space: nowrap; }
.blog-post-body .blog-post-tablekey .bpt-q { margin-left: 0; margin-right: 4px; letter-spacing: 1px; font-size: 0.875rem; }
.blog-post-body .blog-post-tablekey .bpt-q3 { color: var(--l-primary); }
.blog-post-body .blog-post-tablekey .bpt-q2 { color: var(--l-text-secondary); }
.blog-post-body .blog-post-tablekey .bpt-q1 { color: var(--l-text-muted); }

/* Wide variant for many-column comparison matrices (blog post 25). The article
   column is 720px of prose; a 26x11 grid needs more, so the wrapper breaks out
   to the standard section container width (--l-max-width) and re-centres on the
   viewport. margin-left:50% puts its left edge at the viewport centre; the
   translate pulls it back by half its own width. The wrapper keeps its own
   overflow-x, so narrow screens still scroll rather than overflow the page. */
.blog-post-body .blog-post-tablewrap--wide,
.blog-post-body .blog-post-tablekey--wide {
  width: min(var(--l-max-width), calc(100vw - 32px));
  margin-left: 50%;
  transform: translateX(-50%);
}
.blog-post-body .blog-post-tablewrap--wide .blog-post-table { min-width: 1040px; }
/* Symbol columns read better centred than right-aligned under the header. */
.blog-post-body .blog-post-table .bpt-c { text-align: center; white-space: nowrap; }
/* Keep the capability label visible while the grid scrolls sideways. */
.blog-post-body .blog-post-tablewrap--wide th:first-child,
.blog-post-body .blog-post-tablewrap--wide td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #FFFFFF;
}
.blog-post-body .blog-post-tablewrap--wide th:first-child { background: var(--l-bg-subtle); }

/* --- Threshold + restriction chart (blog post 23) --- */
.blog-post-chart { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -8px; padding:0 8px; }
.blog-post-chart svg { display:block; min-width:640px; width:100%; height:auto; }
.blog-post-chart .bpc-title { font-size:26px; font-weight:800; fill:var(--l-text); font-family:'Plus Jakarta Sans',sans-serif; }
.blog-post-chart .bpc-sub { font-size:17px; font-weight:500; fill:var(--l-text-muted); font-family:'Plus Jakarta Sans',sans-serif; }
.blog-post-chart .bpc-eu { font-size:16px; font-weight:700; fill:#EF6438; font-family:'Plus Jakarta Sans',sans-serif; }
.blog-post-chart .bpc-code { font-size:14px; font-weight:700; fill:#6B7280; font-family:'Plus Jakarta Sans',sans-serif; }
.blog-post-legend-swatch--sq { border-radius:3px; opacity:1; }
.blog-post-legend-swatch--r0 { background:#E5E7EB; }
.blog-post-legend-swatch--r1 { background:#C7D2FE; }
.blog-post-legend-swatch--r2 { background:#818CF8; }
.blog-post-legend-swatch--r3 { background:#4338CA; }
.blog-post-legend-swatch--nothr { background:#EF6438; }
.blog-post-legend-swatch--rng { background:#9CA3AF; }
.blog-post-legend-swatch--band { background:#111827; }
.blog-post-legend-swatch--nofloor.blog-post-legend-swatch--sq { background:#FFFFFF; border:1.6px dashed #4338CA; opacity:1; }

/* ==========================================================================
   PROCUREMENT RADAR — public evidence pages on the landing design system
   ========================================================================== */

.radar-page {
  color: var(--l-text);
}

.radar-shell {
  width: min(var(--l-max-width), calc(100% - 64px));
  margin-inline: auto;
}

.radar-hero {
  padding: 36px 0 32px;
  background: var(--l-bg);
  border-bottom: 1px solid var(--l-border);
}

/* The main page's hero is transparent so the landing grid shows through, with a denser
   grid and a teal glow behind the headline number. */
.radar-hero--live {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 56px 0 48px;
  background: transparent;
}

.radar-hero--live::before,
.radar-hero--live::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.radar-hero--live::before {
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 60% 110% at 80% 30%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 110% at 80% 30%, #000, transparent 75%);
}

.radar-hero--live::after {
  background: radial-gradient(ellipse 38% 70% at 80% 45%, rgba(26, 180, 153, 0.13), transparent 70%);
}

.radar-hero--live h1.landing-section-title { font-size: clamp(2.25rem, 5vw, 3.25rem); }

.radar-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
}

.radar-hero__panel {
  background: var(--l-bg);
  border: 1px solid var(--l-border);
}

.radar-hero h1.landing-section-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
}

.radar-hero--sub { padding: 32px 0 36px; }
.radar-hero__copy { max-width: 720px; }
.radar-hero__lead { max-width: 640px; margin: 12px 0 0; }

.radar-breadcrumb {
  margin: 0 0 16px;
  font-size: 0.875rem;
}

.radar-text-link {
  color: var(--l-primary);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.radar-text-link:hover { text-decoration: underline; }

/* ---------- Source strip ---------- */

.radar-source-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 0;
  margin: 28px 0 0;
  padding: 0;
}

.radar-source-strip > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  padding: 0 20px 0 0;
  margin-right: 20px;
  border-right: 1px solid var(--l-border);
}

.radar-source-strip > div:last-of-type,
.radar-source-strip > .radar-source-strip__basis { border-right: 0; margin-right: 0; }

.radar-source-strip > .radar-source-strip__basis {
  align-items: baseline;
}

/* The hero column is narrow, so its strip wraps as plain spaced items without dividers. */
.radar-hero--live .radar-source-strip { gap: 12px 28px; }

.radar-hero--live .radar-source-strip > div {
  padding: 0;
  margin: 0;
  border-right: 0;
}

.radar-source-strip > .radar-source-strip__live { flex-basis: 100%; }

.radar-source-strip > .radar-source-strip__live dd {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.radar-live-dot {
  position: relative;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--l-primary);
}

.radar-live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--l-primary);
  animation: radar-live-pulse 2s ease-out infinite;
}

@keyframes radar-live-pulse {
  from { transform: scale(1); opacity: 0.6; }
  to { transform: scale(3); opacity: 0; }
}

.radar-source-strip__value {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--l-text);
}

.radar-source-strip dt {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--l-text-muted);
}

.radar-source-strip dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--l-text);
}

.radar-source-strip__basis dd {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--l-text);
}

.radar-source-strip__basis p { margin: 0; }
.radar-source-strip__basis details { margin-top: 4px; }
.radar-source-strip__basis details > div p { margin: 8px 0 0; line-height: 1.6; }
.radar-source-strip__basis details > div strong { color: var(--l-text); }

.radar-source-strip__basis summary,
.radar-methods__disclosure > summary {
  cursor: pointer;
  list-style: none;
  color: var(--l-primary);
  font-size: 0.8125rem;
  font-weight: 600;
}

.radar-source-strip__basis summary::-webkit-details-marker,
.radar-metric__details > summary::-webkit-details-marker,
.radar-methods__disclosure > summary::-webkit-details-marker { display: none; }

.radar-source-strip__basis summary:hover,
.radar-methods__disclosure > summary:hover { text-decoration: underline; }

/* ---------- Filters ---------- */

.radar-filter-band {
  padding: 8px 0;
  background: var(--l-bg-subtle);
  border-bottom: 1px solid var(--l-border);
}

.radar-filter-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  cursor: pointer;
  list-style: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--l-text-secondary);
}

.radar-filter-disclosure > summary::-webkit-details-marker { display: none; }

.radar-filter-disclosure > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.radar-filter-disclosure[open] > summary::after {
  margin-top: 2px;
  transform: rotate(-135deg);
}

.radar-filter-disclosure > summary:hover { color: var(--l-text); }

.radar-filter-disclosure__count {
  font-weight: 500;
  color: var(--l-text-muted);
}

.radar-filter-disclosure__body { margin-top: 12px; }

.radar-filter-disclosure__toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 8px;
}

.radar-filter-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}

.radar-filter-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--l-text-secondary);
}

.radar-filter-field select {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 0.875rem;
  color: var(--l-text);
  background: var(--l-bg);
  border: 1px solid var(--l-border);
  border-radius: 0;
}

.radar-filter-field select:focus {
  outline: 2px solid var(--l-primary);
  outline-offset: 1px;
}

.radar-notice {
  margin-top: 16px;
  padding: 12px 16px;
  font-size: 0.875rem;
  color: var(--l-text-secondary);
  background: var(--l-bg);
  border: 1px solid var(--l-border);
}

.radar-notice ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- Buttons and links ---------- */

.radar-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--l-text);
  background: var(--l-bg);
  border: 1px solid var(--l-text);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--l-transition);
}

.radar-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.radar-action--primary {
  color: #fff;
  background: var(--l-text);
}

.radar-action--primary:hover { background: #1a1a1a; }

.radar-source-link {
  color: var(--l-primary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.radar-source-link:hover { text-decoration: underline; }

.radar-copy-button {
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--l-text);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}

.radar-copy-status {
  font-size: 0.75rem;
  color: var(--l-text-muted);
}

/* ---------- Sections ---------- */

.radar-section { padding: 48px 0; scroll-margin-top: 88px; background: var(--l-bg); }
.radar-section + .radar-section { border-top: 1px solid var(--l-border-light); }

.radar-section-heading {
  display: grid;
  gap: 6px;
  margin-bottom: 24px;
}

.radar-section-heading h2 {
  margin: 0;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
}

.radar-section-heading p {
  margin: 0;
  max-width: 40rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--l-text-muted);
}

.radar-section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 16px 0 0;
  font-size: 0.875rem;
  color: var(--l-text-secondary);
}

.radar-method-note,
.radar-empty-inline {
  margin: 16px 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--l-text-secondary);
}

.radar-empty-inline {
  padding: 20px;
  border: 1px dashed var(--l-border);
}

/* ---------- Top winners ---------- */

.radar-winners-tabs {
  width: 100%;
  display: flex;
  border-bottom: 1px solid var(--l-border);
}

.radar-winners-tab {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 0 12px;
  white-space: nowrap;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--l-text-secondary);
  background: transparent;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  transition: color var(--l-transition);
}

.radar-winners-tab:hover { color: var(--l-text); }

.radar-winners-tab[aria-selected="true"] {
  color: var(--l-text);
  border-bottom-color: var(--l-primary);
}

.radar-winners-tab:focus-visible {
  outline: 2px solid var(--l-primary);
  outline-offset: 2px;
}

.radar-winners { padding-top: 20px; }
.radar-winners[hidden] { display: none; }

.radar-winners__period {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  color: var(--l-text-muted);
}

.radar-winners .radar-empty-inline { margin-top: 0; }

.radar-winners__name {
  display: block;
  font-weight: 600;
  color: var(--l-text);
}

.radar-winners__meta {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--l-text-muted);
}

.radar-rank {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.radar-rank__row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
}

.radar-rank__position {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--l-text-muted);
  font-variant-numeric: tabular-nums;
}

.radar-rank__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.radar-rank__line .radar-winners__name {
  min-width: 0;
  overflow: hidden;
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radar-rank__value {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.radar-rank__bar {
  display: block;
  height: 6px;
  margin: 6px 0 4px;
  overflow: hidden;
  background: var(--l-border-light);
  border-radius: 3px;
}

.radar-rank__bar > span {
  display: block;
  height: 100%;
  background: var(--l-primary);
  border-radius: 3px;
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 40ms);
}

/* ---------- Lead observation ---------- */

.radar-lead-observation {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding: 16px 0 0;
  margin: 20px 0 0;
  border-top: 1px solid var(--l-border);
}

.radar-lead-observation h3 {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--l-text-muted);
}

.radar-lead-observation > p {
  margin: 0;
  flex: 1 1 16rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--l-text);
}

/* ---------- Metric tiles ---------- */

.radar-pulse-grid,
.radar-kpi-grid,
.radar-bento,
.radar-methods__grid,
.radar-coverage__grid {
  display: grid;
  gap: 2px;
  background: var(--l-border);
  border: 1px solid var(--l-border);
  overflow: visible;
}

.radar-pulse-grid > div,
.radar-kpi-grid > div,
.radar-bento > div,
.radar-methods__grid > article,
.radar-coverage__grid > article { background: var(--l-bg); }

.radar-pulse-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.radar-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.radar-kpi-grid--secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }

.radar-metric {
  position: relative;
  height: 100%;
  padding: 20px 44px 20px 20px;
}

/* ---------- Dashboard bento ---------- */

.radar-dashboard {
  padding: 56px 0;
  background: var(--l-bg-subtle);
  border-top: 1px solid var(--l-border-light);
  border-bottom: 1px solid var(--l-border-light);
}

.radar-dashboard__panels { display: grid; gap: 48px; }
.radar-panel { scroll-margin-top: 88px; }

.radar-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.radar-bento__chart { grid-column: span 2; grid-row: span 2; }
.radar-bento--windows .radar-bento__chart { grid-column: span 3; grid-row: auto; }

.radar-bento__chart .radar-metric {
  display: flex;
  flex-direction: column;
  padding: 24px 48px 24px 24px;
}

.radar-bento__chart .radar-histogram {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.radar-bento__chart .radar-histogram__plot { flex: 1 1 auto; height: auto; min-height: 140px; }

/* ---------- Pulse tiles and trends ---------- */

.radar-pulse-tile--hero { padding: 24px 48px 20px 24px; }

.radar-pulse-tile--hero .radar-metric__value {
  margin-top: 12px;
  font-size: clamp(3.25rem, 7vw, 4.5rem);
}

.radar-change {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 8px 0 0;
  font-size: 0.8125rem;
  color: var(--l-text-muted);
  font-variant-numeric: tabular-nums;
}

.radar-change strong { font-weight: 600; color: var(--l-text); }

.radar-change__icon {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  color: var(--l-text-secondary);
}

.radar-sparkline {
  position: relative;
  height: 36px;
  margin-top: 16px;
}

.radar-sparkline svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: clip-path 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.radar-sparkline__line {
  fill: none;
  stroke: var(--l-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.radar-sparkline__area { fill: rgba(26, 180, 153, 0.1); }

.radar-sparkline__dot {
  position: absolute;
  right: -4px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--l-primary);
  box-shadow: 0 0 0 2px var(--l-bg);
  transition: opacity 0.3s ease 0.8s, transform 0.3s ease 0.8s;
}

.radar-sparkline__hits {
  position: absolute;
  inset: -4px 0;
  display: flex;
}

.radar-sparkline__hits span { flex: 1 1 0; }
.radar-sparkline__hits span:hover { background: rgba(10, 10, 10, 0.04); }

.radar-trend { margin-top: 20px; }

.radar-trend__plot {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 96px;
}

.radar-trend__col {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.radar-trend__fill {
  display: block;
  width: 100%;
  min-height: 2px;
  background: #A7E3D6;
  border-radius: 3px 3px 0 0;
  transform-origin: bottom;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), background-color var(--l-transition);
  transition-delay: calc(var(--i, 0) * 30ms), 0s;
}

.radar-trend__col.is-current .radar-trend__fill { background: var(--l-primary); }
.radar-trend__col:hover .radar-trend__fill { background: #0D8B73; }

.radar-trend__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--l-text-muted);
}

/* Growth animations run only after the dashboard controller marks the page animated, so
   the page renders complete without JS or with reduced motion. */
.radar-page--animated .radar-metric:not(.is-revealed) .radar-histogram__fill,
.radar-page--animated .radar-metric:not(.is-revealed) .radar-trend__fill { transform: scaleY(0); }
.radar-page--animated .radar-metric:not(.is-revealed) .radar-sparkline svg { clip-path: inset(0 100% 0 0); }
.radar-page--animated .radar-metric:not(.is-revealed) .radar-sparkline__dot { opacity: 0; transform: scale(0.4); }
.radar-page--animated .radar-rank:not(.is-revealed) .radar-rank__bar > span { transform: scaleX(0); }

/* ---------- Awards preview and top winners ---------- */

.radar-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: start;
}

.radar-split > :only-child { grid-column: 1 / -1; }
.radar-split__panel { min-width: 0; scroll-margin-top: 88px; }

.radar-feed {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--l-border);
}

.radar-feed__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--l-border-light);
}

.radar-feed__meta {
  display: grid;
  gap: 2px;
  margin: 6px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--l-text-secondary);
}

.radar-feed__meta div { display: flex; gap: 6px; }
.radar-feed__meta dt { flex: 0 0 auto; color: var(--l-text-muted); }
.radar-feed__meta dt::after { content: ":"; }
.radar-feed__meta dd { min-width: 0; margin: 0; }

.radar-feed__value {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.radar-metric__heading h3 {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--l-text-secondary);
}

.radar-metric__value {
  margin: 8px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--l-text);
  font-variant-numeric: tabular-nums;
}

.radar-metric--unavailable .radar-metric__value {
  font-size: 1.125rem;
  color: var(--l-text-muted);
}

.radar-metric__details {
  position: absolute;
  top: 14px;
  right: 12px;
  margin: 0;
  z-index: 2;
}

.radar-metric__details[open] { z-index: 20; }

.radar-metric__details > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  cursor: pointer;
  list-style: none;
  color: var(--l-text-muted);
}

.radar-metric__details > summary:hover,
.radar-metric__details[open] > summary { color: var(--l-primary); }

.radar-metric__info-icon { width: 16px; height: 16px; display: block; }

.radar-metric__details-body {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 21;
  width: min(340px, calc(100vw - 24px));
  max-height: min(70vh, 480px);
  overflow: auto;
  padding: 16px;
  font-size: 0.8125rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  color: var(--l-text-secondary);
  background: var(--l-bg);
  border: 1px solid var(--l-border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.radar-metric__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 12px;
}

.radar-metric__meta dt {
  font-size: 0.75rem;
  color: var(--l-text-muted);
}

.radar-metric__meta dd {
  margin: 2px 0 0;
  font-weight: 600;
  color: var(--l-text);
}

.radar-metric__definition,
.radar-metric__exclusions { margin: 6px 0 0; }

.radar-metric__definition strong,
.radar-metric__exclusions strong { color: var(--l-text); }

/* ---------- Distributions ---------- */

.radar-histogram { margin-top: 16px; }

.radar-histogram__plot {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
}

.radar-histogram__col {
  flex: 1 1 0;
  min-width: 3px;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.radar-histogram__fill {
  display: block;
  width: 100%;
  min-height: 2px;
  background: var(--l-primary);
  border-radius: 2px 2px 0 0;
  transform-origin: bottom;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 14ms);
}

.radar-histogram__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--l-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Period comparison ---------- */

.radar-comparison {
  margin-top: 16px;
  padding: 16px;
  background: var(--l-bg-subtle);
  border: 1px solid var(--l-border);
}

.radar-comparison h4 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--l-text);
}

.radar-comparison p { margin: 6px 0 0; font-size: 0.875rem; }

.radar-comparison__value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--l-text);
}

.radar-comparison dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 12px 0;
}

.radar-comparison dt { font-size: 0.75rem; color: var(--l-text-muted); }
.radar-comparison dd { margin: 2px 0 0; font-weight: 600; color: var(--l-text); }

/* ---------- Tables ---------- */

.radar-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--l-border);
}

.radar-table-wrap--compact { margin-top: 12px; }

.radar-table-wrap table,
.radar-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.radar-table-wrap th,
.radar-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--l-text-secondary);
  background: var(--l-bg-subtle);
  border-bottom: 1px solid var(--l-border);
  white-space: nowrap;
}

.radar-table__sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.radar-table__num .radar-table__sort {
  width: 100%;
  justify-content: flex-end;
}

.radar-table__sort:hover,
.radar-table__sort.is-active { color: var(--l-text); }

.radar-table__sort-icon {
  display: inline-flex;
  width: 8px;
  height: 12px;
  color: var(--l-text-muted);
}

.radar-table__sort-icon svg { display: block; width: 8px; height: 12px; }

.radar-table__sort-icon path { fill: currentColor; opacity: 0.35; }

.radar-table__sort.is-active .radar-table__sort-icon path.is-on { opacity: 1; color: var(--l-text); }

.radar-table-wrap td,
.radar-table td {
  padding: 10px 14px;
  vertical-align: top;
  line-height: 1.5;
  border-bottom: 1px solid var(--l-border-light);
}

.radar-table-wrap tbody tr:last-child td { border-bottom: 0; }

.radar-title-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--l-text);
  font-weight: 600;
  text-decoration: none;
}

.radar-title-link:hover { color: var(--l-primary); }

.radar-title-link span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.radar-external-icon {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  color: var(--l-text-muted);
}

.radar-title-link:hover .radar-external-icon { color: var(--l-primary); }

.radar-table__num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.radar-table__nowrap { white-space: nowrap; }

.radar-table__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--l-text-secondary);
  word-break: break-all;
}

.radar-table__actions { white-space: nowrap; }
.radar-table__actions > * + * { margin-left: 12px; }

/* ---------- Pagination ---------- */

.radar-pagination {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  font-size: 0.875rem;
  color: var(--l-text-secondary);
}

.radar-pagination a {
  color: var(--l-text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.radar-pagination a:hover { color: var(--l-primary); }

/* ---------- Methods, coverage, cross-link ---------- */

.radar-evidence-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding-bottom: 28px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--l-border);
}

.radar-evidence-band h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.radar-evidence-band p {
  margin: 4px 0 0;
  font-size: 0.875rem;
  color: var(--l-text-secondary);
}

.radar-methods__layout { display: grid; gap: 24px; }
.radar-methods__content { margin-top: 24px; }
.radar-methods__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.radar-methods__grid > article { padding: 28px 24px; }

.radar-methods__grid h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
}

.radar-methods__grid p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--l-text-secondary);
}

.radar-coverage { margin-top: 32px; }

.radar-coverage__heading h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.radar-coverage__heading p {
  margin: 6px 0 20px;
  font-size: 0.875rem;
  color: var(--l-text-secondary);
}

.radar-coverage__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.radar-coverage__grid > article {
  padding: 20px;
  font-size: 0.8125rem;
}

.radar-coverage__grid h4 {
  margin: 0 0 4px;
  font-size: 0.9375rem;
  font-weight: 700;
}

.radar-coverage__grid article > p {
  margin: 0 0 10px;
  color: var(--l-text-secondary);
}

.radar-coverage__grid dl { display: grid; gap: 6px; margin: 0; }
.radar-coverage__grid dl > div { display: flex; justify-content: space-between; gap: 12px; }
.radar-coverage__grid dt { color: var(--l-text-secondary); }
.radar-coverage__grid dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.radar-xray {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  padding: 20px 0 0;
  border-top: 1px solid var(--l-border);
}

.radar-xray h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.radar-xray p {
  max-width: 560px;
  margin: 8px 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--l-text-secondary);
}

.radar-unavailable {
  margin-top: 40px;
  padding: 28px 32px;
  background: var(--l-bg-subtle);
  border: 1px solid var(--l-border);
}

.radar-unavailable h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
}

.radar-unavailable p {
  margin: 6px 0 0;
  font-size: 0.9375rem;
  color: var(--l-text-secondary);
}

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
  .radar-hero__layout,
  .radar-split { grid-template-columns: minmax(0, 1fr); }
  .radar-hero__layout { gap: 32px; }
  .radar-split { gap: 48px; }
  .radar-pulse-grid,
  .radar-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .radar-bento__chart,
  .radar-bento--windows .radar-bento__chart { grid-column: 1 / -1; grid-row: auto; }
  .radar-bento--windows { grid-template-columns: minmax(0, 1fr); }
  .radar-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .radar-coverage__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .radar-shell { width: calc(100% - 40px); }
  .radar-section { padding: 40px 0; }
  .radar-hero--live { padding: 40px 0 36px; }
  .radar-dashboard { padding: 40px 0; }
  .radar-methods__grid { grid-template-columns: 1fr; }
  .radar-source-strip > div { border-right: 0; margin-right: 0; padding-right: 24px; }
  .radar-table__actions { white-space: normal; }
  .radar-histogram__plot { height: 88px; }
  .radar-feed__item { grid-template-columns: minmax(0, 1fr); }
  .radar-feed__value { text-align: left; }
}

@media (max-width: 639px) {
  .radar-pulse-grid,
  .radar-kpi-grid,
  .radar-kpi-grid--secondary,
  .radar-coverage__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .radar-metric { padding: 16px 40px 16px 16px; }
  .radar-metric__value { font-size: 1.75rem; }
  .radar-metric__meta,
  .radar-comparison dl { grid-template-columns: 1fr; }
  .radar-section-actions .radar-action { width: 100%; }
  .radar-metric__details-body { right: -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-body > .landing-skip-link,
  .landing-nav,
  .landing-nav-link,
  .landing-nav-more-trigger svg,
  .landing-nav-more-link,
  .landing-locale-switcher a,
  .landing-btn-primary,
  .landing-btn-nav,
  .landing-mobile-menu,
  .landing-mobile-menu-link,
  .radar-action,
  .radar-live-dot::after,
  .radar-histogram__fill,
  .radar-trend__fill,
  .radar-sparkline svg,
  .radar-sparkline__dot,
  .radar-rank__bar > span { transition: none; animation: none; }
  .landing-btn-primary:hover,
  .landing-btn-nav:hover,
  .radar-action:hover { transform: none; }
}