/* Landing chrome keeps one geometry contract; theme rules below change paint only. */
.landing-page .site-footer .console-footer__trust {
  margin-top: 16px;
}

html[data-theme="dark"] .landing-page .integration-card:hover,
html[data-theme="dark"] .landing-page .integration-card:focus-visible {
  border-color: #4d83bd;
  background: #1b2d49;
  box-shadow: 0 22px 50px rgba(2, 8, 20, .28);
}

html[data-theme="dark"] .landing-page .integration-card::after {
  border-color: #38587e;
  color: #d5e8ff;
  background: #172a45;
  box-shadow: var(--shadow-surface);
  opacity: .88;
}

html[data-theme="dark"] .landing-page .integration-card:hover::after,
html[data-theme="dark"] .landing-page .integration-card:focus-visible::after {
  border-color: #75b2ff;
  color: #f5f9ff;
  background: #1f3b60;
  box-shadow: var(--shadow-surface);
}

html[data-theme="dark"] .landing-page .integration-modal::backdrop {
  background: rgba(2, 8, 20, .68);
}

html[data-theme="dark"] .landing-page .integration-modal__panel {
  scrollbar-color: #4d83bd #0d1727;
}

html[data-theme="dark"] .landing-page .integration-modal__close:hover,
html[data-theme="dark"] .landing-page .integration-modal__close:focus-visible {
  border-color: #75b2ff;
  color: #f5f9ff;
  background: #1b2d49;
  box-shadow: var(--shadow-surface);
}

html[data-theme="dark"] .landing-page .integration-modal__example {
  border-color: #38587e;
  background: #0d1727;
}

html[data-theme="dark"] .landing-page .integration-modal__example strong {
  color: #93c5fd;
}

html[data-theme="dark"] .landing-page .section-rail a::before {
  border-color: rgba(104, 170, 255, .44);
  background: rgba(17, 31, 52, .86);
  box-shadow: var(--shadow-surface);
}

html[data-theme="dark"] .landing-page .section-rail a.is-active::before {
  border-color: var(--landing-blue-strong);
  background: var(--landing-blue);
}

html[data-theme="dark"] .landing-page .floating-scrollbar {
  background: rgba(13, 23, 39, .46);
  box-shadow:
    inset 0 0 0 1px rgba(76, 99, 130, .78),
    0 18px 48px rgba(2, 8, 20, .3);
  backdrop-filter: blur(12px) saturate(.82);
}

html[data-theme="dark"] .landing-page .floating-scrollbar.is-dragging {
  background: rgba(20, 36, 58, .72);
}

html[data-theme="dark"] .landing-page .floating-scrollbar__thumb {
  box-shadow:
    0 0 0 2px rgba(20, 36, 58, .94),
    0 10px 28px rgba(2, 8, 20, .42);
}

html[data-theme="dark"] .landing-page .floating-scrollbar:hover .floating-scrollbar__thumb,
html[data-theme="dark"] .landing-page .floating-scrollbar.is-dragging .floating-scrollbar__thumb {
  box-shadow:
    0 0 0 3px rgba(38, 59, 88, .96),
    0 12px 32px rgba(2, 8, 20, .5);
}

html[data-theme="dark"] .landing-page .site-footer {
  border-color: var(--landing-line);
  background: transparent;
}

/* The dark veil used to be redefined here, and it was the visible line. Its middle stop was
   rgba(12,24,42) between two stops of rgba(9,17,31), so the fade travelled through a
   different colour and banded in the middle; and it carried a backdrop-filter, which starts
   abruptly at the element's box edge and draws a boundary no gradient can soften. Both themes
   now use the one tokenised gradient in landing.css. */

html[data-theme="dark"] .landing-page .site-footer a {
  color: var(--landing-muted);
}

html[data-theme="dark"] .landing-page .site-footer a:hover {
  color: var(--landing-blue-strong);
}

/* Landing dark theme, moved out of theme.css.
   theme.css owns the shared palette and has a 600-line surface limit it had grown past. Every
   rule below is scoped under .landing-page, so it only ever applied here: keeping it in the
   shared file made each console page parse rules it could never use, and put landing selectors
   in a file no landing change should have to open. Token blocks stayed behind - the palette
   belongs to theme.css. These load before theme.css because theme.css has to own the final
   cascade layer, which is safe: .landing-page adds a class to every selector here, so they
   outrank their unscoped counterparts in theme.css regardless of source order. */


html[data-theme="dark"] .parallax-scene {
  filter: none;
}
/* Same veil geometry as light mode — only the ink differs, which is what the theme
   contract requires. */
html[data-theme="dark"] .landing-page::after {
  background:
    radial-gradient(ellipse 62% 52% at 16% 22%, var(--atmos-veil-strong), transparent 68%),
    linear-gradient(180deg, var(--atmos-veil) 0%, transparent 44%);
}

html[data-theme="dark"] .landing-page .brand-logo {
  filter: drop-shadow(2px 2px 0 rgba(0, 114, 255, .28));
}

html[data-theme="dark"] .landing-page :is(.section-heading h2, .split-section h2,
  .hero h1, .hero-lede, .section-heading p, .proof-row, .site-footer p,
  .site-footer nav) {
  text-shadow: none;
}

/* No background here. The header's fill comes from --header-glass / --header-solid, which
   this file already redefines for dark - and an override at this specificity would beat the
   @supports rule that swaps in the frosted fill, leaving dark mode as a flat bar while light
   mode frosted. Paint that both themes share belongs in one place. */

html[data-theme="dark"] .landing-header {
  border-color: var(--glass-stroke);
  box-shadow: 0 8px 32px rgba(2, 8, 20, .32);
}

html[data-theme="dark"] .landing-header-actions .theme-toggle {
  border-color: #38506f;
  color: var(--landing-blue-strong);
  background: #14243a;
  box-shadow: var(--shadow-surface);
}

/* Dark mode keeps the glass material rather than swapping in an opaque card: the tokens
   above already carry a dark fill and a rim bright enough to read on near-black, which is
   what an ambient cast alone cannot do. Only paint changes here — no geometry. */
html[data-theme="dark"] .landing-page :is(.section-grid, .demo-panel,
  .sheet-panel, .workflow-detail, .architecture-strip, .atlas-stage,
  .integration-card, .price-card, .output-card, .route-card,
  .route-cloud, .flow-node) {
  border-color: transparent;
  background:
    linear-gradient(180deg, var(--glass-highlight), transparent 46%),
    var(--glass-fill);
  box-shadow:
    inset 0 0 0 1px var(--glass-stroke),
    var(--shadow-raised);
}

html[data-theme="dark"] .landing-page .price-card.featured {
  background:
    linear-gradient(180deg, var(--glass-highlight), transparent 46%),
    var(--glass-fill-strong);
  box-shadow:
    inset 0 0 0 1px var(--glow-route),
    0 0 0 var(--glow-spread) var(--glow-route-soft),
    var(--shadow-overlay);
}

html[data-theme="dark"] .landing-page .pricing-period-picker {
  border-color: var(--landing-line);
  background: rgba(20, 32, 52, .9);
  box-shadow: 0 18px 44px rgba(2, 8, 20, .34);
}

html[data-theme="dark"] .landing-page .pricing-period-tabs {
  background: #101c30;
}

html[data-theme="dark"] .landing-page .pricing-period-tabs button {
  color: var(--landing-muted);
}

html[data-theme="dark"] .landing-page .pricing-period-tabs button[aria-selected="true"] {
  color: var(--landing-ink);
  background: #25364e;
  box-shadow: 0 5px 16px rgba(2, 8, 20, .3), 0 0 0 1px #3a506e;
}

html[data-theme="dark"] .landing-page .pricing-period-tabs button:hover:not([aria-selected="true"]) {
  color: var(--landing-blue-strong);
  background: rgba(104, 170, 255, .08);
}


html[data-theme="dark"] .landing-page .price-card.featured h3 {
  color: var(--landing-ink);
}

html[data-theme="dark"] .landing-page .price-card.featured .price-card__eyebrow {
  color: #9dc7ff;
}

html[data-theme="dark"] .landing-page .price-card__icon {
  border-color: var(--landing-line);
  color: var(--landing-muted);
  background: rgba(37, 54, 78, .86);
  box-shadow: var(--shadow-surface);
}

html[data-theme="dark"] .landing-page .price-card__icon--pro {
  border-color: rgba(104, 170, 255, .32);
  color: var(--landing-blue-strong);
  background: rgba(104, 170, 255, .1);
  box-shadow: var(--shadow-surface);
}

html[data-theme="dark"] .landing-page .price-card__icon--scale {
  border-color: rgba(199, 248, 91, .34);
  color: #c7f85b;
  background: rgba(199, 248, 91, .09);
  box-shadow: 0 6px 18px rgba(2, 8, 20, .26);
}

html[data-theme="dark"] .landing-page .price-card__lordicon-fallback {
  filter: brightness(0) saturate(100%) invert(84%) sepia(18%) saturate(643%) hue-rotate(178deg) brightness(102%) contrast(102%);
}

html[data-theme="dark"] .landing-page .pricing-terms p {
  color: var(--subtle);
}


html[data-theme="dark"] .landing-page .price-card__offer-label {
  color: #9de3c9;
}

html[data-theme="dark"] :is(.hero-form, .workflow-card, .use-case-card,
  .integration-card, .pricing-card, .faq-item, .landing-demo-tabs, .landing-sheet-tabs) {
  border-color: var(--landing-line);
  background: var(--landing-paper);
}

html[data-theme="dark"] .landing-page .feature-card {
  border-color: transparent;
  background:
    linear-gradient(180deg, var(--glass-highlight), transparent 46%),
    var(--glass-fill);
  box-shadow:
    inset 0 0 0 1px var(--glass-stroke),
    var(--shadow-raised);
}

html[data-theme="dark"] .landing-page .integration-icon,
html[data-theme="dark"] .landing-page .integration-modal__icon {
  color: var(--landing-ink);
  background: rgba(150, 185, 235, .10);
  box-shadow: inset 0 0 0 1px rgba(150, 185, 235, .12);
}

/* Three marks are drawn in near-black and are the only ones that cannot survive a dark
   tile. Inverting is right for a single-colour glyph and wrong for a multi-colour logo,
   so Google Sites and the rest are left alone. */
html[data-theme="dark"] .landing-page :is(.integration-card--chatgpt,
  .integration-card--v0, .integration-card--github-pages) .integration-icon img {
  filter: invert(1);
}

html[data-theme="dark"] .landing-page .lift-card::before {
  background: linear-gradient(135deg, rgba(31, 54, 86, .72), rgba(18, 33, 55, .38));
}

html[data-theme="dark"] :is(.landing-demo-tab:hover, .landing-sheet-tab:hover) {
  background: rgba(104, 170, 255, .1);
}

html[data-theme="dark"] :is(.landing-demo-form input, .landing-demo-form textarea,
  .hero-form input, .hero-form select, .hero-form textarea) {
  border-color: var(--landing-line);
  color: var(--landing-ink);
  background: #111f34;
}

html[data-theme="dark"] :is(.landing-demo-form input, .landing-demo-form textarea,
  .hero-form input, .hero-form textarea)::placeholder {
  color: #8698b2;
}

html[data-theme="dark"] .landing-preview-table :is(th, td) {
  border-color: var(--landing-line);
  color: var(--landing-muted);
  background: #122038;
}

html[data-theme="dark"] .landing-preview-table th {
  color: var(--landing-ink);
  background: #1a2b45;
}

html[data-theme="dark"] .landing-preview-status {
  border-color: #286555;
  color: #93e0c4;
  background: #173a33;
}

/* `.ai-tool-card` and `.integration-item` were here too and match nothing anywhere in the
   frontend — the same silent rot as the `.integration-card__icon` tile override. */
html[data-theme="dark"] .landing-page :is(.use-case-node, .use-case-mini) {
  border-color: var(--landing-line);
  color: var(--landing-muted);
  background: rgba(20, 32, 52, .94);
  box-shadow: var(--shadow-surface);
}

html[data-theme="dark"] .landing-page :is(.use-case-node:hover,
  .use-case-node:focus-visible, .use-case-node.active) {
  border-color: #4d83bd;
  color: var(--landing-ink);
  background: #1b2d49;
  box-shadow: var(--shadow-surface);
}

/* The answer list is one surface separated by rules, not seventeen stacked cards, so
   dark mode only needs to restate the separator and the open tint. */
html[data-theme="dark"] .landing-page .faq-list details {
  border-bottom-color: var(--landing-line);
  color: var(--landing-muted);
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .landing-page .faq-list details[open] {
  color: var(--landing-ink);
  background: color-mix(in srgb, var(--landing-blue-soft) 55%, transparent);
}

html[data-theme="dark"] .landing-page :is(.use-case-node__index,
  .use-case-mini::before, .hub-port, .route-socket) {
  background: #172a45;
  box-shadow: 0 0 0 5px rgba(104, 170, 255, .12);
}

html[data-theme="dark"] .landing-page :is(.process-bus, .process-hub-link) {
  stroke: rgba(205, 226, 250, .96);
  stroke-width: 2.8;
  filter: drop-shadow(0 0 4px rgba(117, 178, 255, .36));
}

html[data-theme="dark"] .landing-page .process-spine {
  stroke: rgba(158, 202, 252, .92);
  stroke-width: 2.6;
  filter: drop-shadow(0 0 4px rgba(117, 178, 255, .3));
}

html[data-theme="dark"] .landing-page .process-spine--mini {
  stroke: rgba(105, 212, 180, .76);
}

html[data-theme="dark"] .landing-page .case-path {
  stroke: #8fc3ff;
  stroke-width: 3;
  filter: drop-shadow(0 0 5px rgba(104, 170, 255, .42));
}

html[data-theme="dark"] .landing-page .process-transfer {
  stroke: #81e3c4;
  stroke-width: 3;
  filter: drop-shadow(0 0 4px rgba(105, 212, 180, .32));
}

html[data-theme="dark"] .landing-page .process-transfer--flow {
  stroke: #a0f0d8;
}
html[data-theme="dark"] .landing-page :is(.hub-port, .route-socket,
  .use-case-node::after, .intake-mini-grid::after, .output-card::before) {
  border-color: #75b2ff;
  background: #edf4ff;
  box-shadow: 0 0 0 5px rgba(104, 170, 255, .22);
}

html[data-theme="dark"] .landing-page .output-card h3 {
  color: var(--landing-ink);
}

html[data-theme="dark"] .landing-page :is(.output-tags span, .use-case-chip-cloud span) {
  border-color: #38587e;
  color: var(--landing-blue-strong);
  background: #173250;
  box-shadow: var(--shadow-surface);
}

html[data-theme="dark"] .landing-page :is(.btn-primary, .landing-demo-submit) {
  border-color: #1a5fab;
  color: #fff;
  background: #1f6fc7;
}

html[data-theme="dark"] .landing-page :is(.btn-primary, .landing-demo-submit):hover {
  border-color: #164f90;
  color: #fff;
  background: #195ca6;
}

html[data-theme="dark"] .landing-page .faq-list summary::after {
  border: 1px solid #4d83bd;
  color: #d5e8ff;
  background-color: #173250;
  box-shadow: var(--shadow-surface);
}

html[data-theme="dark"] .landing-page .integration-modal__panel {
  border-color: var(--landing-line);
  color: var(--landing-ink);
  background: #142034;
  box-shadow: 0 30px 90px rgba(2, 8, 20, .5);
}

html[data-theme="dark"] .landing-page .integration-modal__close {
  border-color: #4d83bd;
  color: #d5e8ff;
  background: #173250;
  box-shadow: var(--shadow-surface);
}