/* Hebra marketing visual system — surfaces, product window, ambient canvas.
   Color and surface only. Do not change type metrics here. */

:root {
  --mk-canvas: #F3EFE6;
  --mk-canvas-card: #FAF7F1;
  --mk-ink: #0F172A;
  --mk-ink-muted: #334155;
  --mk-navy: #0B1220;
  --mk-navy-mid: #0F172A;
  --mk-accent: #f17522;
  --mk-accent-light: #f17522;
  --mk-peach: rgba(241, 117, 34, 0.16);
  --mk-teal: rgba(77, 195, 203, 0.14);
  --mk-lavender: rgba(191, 122, 180, 0.14);
  --mk-powder: rgba(147, 174, 214, 0.18);
  --mk-border-light: rgba(15, 23, 42, 0.08);
  --mk-shadow-card: 0 8px 28px rgba(15, 23, 42, 0.06);
  --mk-shadow-float: 0 18px 48px rgba(15, 23, 42, 0.1), 0 4px 14px rgba(15, 23, 42, 0.05);
}

body.marketing-page {
  background: var(--mk-canvas);
}

.hero-eyebrow,
.section-eyebrow,
p.hero-eyebrow,
p.section-eyebrow,
span.section-eyebrow,
.hebra-final-cta__eyebrow,
.tth-eyebrow,
.tech-foundation-category,
.about-card-label,
.stage-kicker,
.hebra-om-kicker {
  color: var(--mk-accent) !important;
}

/* Dark page intros keep navy even when body canvas is light */
body.marketing-page .plat-hero,
body.marketing-page .deploy-hero {
  background-color: var(--mk-navy);
}

/* —— Surfaces —— */
.marketing-surface-light,
.marketing-surface-light-ambient {
  position: relative;
  isolation: auto;
  background: var(--mk-canvas);
  color: var(--mk-ink-muted);
  overflow: hidden;
}

.marketing-surface-light-ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 48% at 12% 28%, var(--mk-peach), transparent 70%),
    radial-gradient(ellipse 48% 46% at 88% 24%, var(--mk-teal), transparent 72%),
    radial-gradient(ellipse 46% 50% at 18% 88%, var(--mk-lavender), transparent 70%),
    radial-gradient(ellipse 50% 48% at 86% 86%, var(--mk-powder), transparent 72%);
}

.marketing-surface-light > *,
.marketing-surface-light-ambient > * {
  position: relative;
  z-index: 3;
}

.marketing-surface-dark {
  background: var(--mk-navy-mid);
  color: #F9FAFB;
}

.marketing-panel-dark {
  background: var(--mk-navy);
  color: #F9FAFB;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}

.hebra-om.marketing-panel-dark {
  padding: 1.5rem 1.25rem 1.35rem;
  overflow: hidden;
}
@media (max-width: 1100px) {
  .hebra-om.marketing-panel-dark {
    padding: 1.15rem 0.95rem 1.2rem;
    overflow: visible;
    border-radius: 16px;
  }
}

.platform-value-section.marketing-surface-light {
  background: var(--mk-canvas);
  border-top: 1px solid var(--mk-border-light);
  overflow: visible;
}
.platform-value-section.marketing-surface-light .section-body {
  color: var(--mk-ink-muted) !important;
}
.marketing-surface-light .hebra-om-protect .hebra-om-strategy {
  color: #7dd3d8 !important;
}
.marketing-surface-light .hebra-om-recover .hebra-om-strategy {
  color: #c4b0e0 !important;
}
.marketing-surface-light .hebra-om-di-layers strong {
  color: #c5d4ea !important;
}
.marketing-surface-light .hebra-om-di-layers span {
  color: #9CA3AF !important;
}

.marketing-card-light {
  background: var(--mk-canvas-card) !important;
  border: 1px solid var(--mk-border-light) !important;
  box-shadow: var(--mk-shadow-card) !important;
}

.marketing-surface-light,
.marketing-surface-light-ambient {
  --mk-on-light: 1;
}

/* Light-surface contrast (color only) */
.marketing-surface-light h1,
.marketing-surface-light h2,
.marketing-surface-light h3,
.marketing-surface-light-ambient h1,
.marketing-surface-light-ambient h2,
.marketing-surface-light-ambient h3,
.marketing-surface-light .section-header h2,
.marketing-surface-light-ambient .section-header h2,
.marketing-surface-light .product-shot-intro h2,
.marketing-surface-light-ambient .product-shot-intro h2,
.marketing-surface-light .tech-foundation-intro h2,
.marketing-surface-light .tech-foundation-name,
.marketing-surface-light .outcome-card-title,
.marketing-surface-light .about-card h3,
.marketing-surface-light .approach-card h3,
.marketing-surface-light .section-title,
.marketing-surface-light .stage h3,
.marketing-surface-light .os-card h4,
.marketing-surface-light .validate-card h3,
.marketing-surface-light .ready-card h3,
.marketing-surface-light .value-card h3,
.marketing-surface-light .callout h2,
.marketing-surface-light .scope-live strong,
.marketing-surface-light .scope-ahead strong {
  color: var(--mk-ink) !important;
}

.marketing-surface-light p,
.marketing-surface-light-ambient p,
.marketing-surface-light .section-body,
.marketing-surface-light-ambient .section-body,
.marketing-surface-light .section-header p,
.marketing-surface-light .product-shot-intro .section-body,
.marketing-surface-light-ambient .product-shot-intro .section-body,
.marketing-surface-light .tech-foundation-body,
.marketing-surface-light .tech-foundation-desc,
.marketing-surface-light .outcome-card-desc,
.marketing-surface-light .hero-support,
.marketing-surface-light .approach-intro,
.marketing-surface-light .adopt-step p,
.marketing-surface-light .stage p,
.marketing-surface-light .stage li,
.marketing-surface-light .stage-note,
.marketing-surface-light .scope ul,
.marketing-surface-light .scope-ahead p,
.marketing-surface-light .about-card p,
.marketing-surface-light .approach-card p,
.marketing-surface-light .hebra-block p,
.marketing-surface-light .principle .section-body,
.marketing-surface-light .os-card p,
.marketing-surface-light .os-card .micro,
.marketing-surface-light .validate-card p,
.marketing-surface-light .ready-card p,
.marketing-surface-light .value-card p,
.marketing-surface-light .callout p,
.marketing-surface-light .cont-note,
.marketing-surface-light .truths li {
  color: var(--mk-ink-muted) !important;
}

.marketing-surface-light .section-eyebrow,
.marketing-surface-light-ambient .section-eyebrow,
.marketing-surface-light p.section-eyebrow,
.marketing-surface-light p.hero-eyebrow,
.marketing-surface-light .tech-foundation-category,
.marketing-surface-light .outcome-motif,
.marketing-surface-light .about-card-label,
.marketing-surface-light .about-card-icon,
.marketing-surface-light .stage-kicker,
.marketing-surface-light .hebra-om-kicker,
.marketing-surface-light .os-card h3,
.marketing-surface-light .adopt-step strong,
.marketing-surface-light .validate-card .k,
.marketing-surface-light .ready-card .k {
  color: var(--mk-accent) !important;
}

.marketing-surface-light span {
  color: inherit;
}

.marketing-surface-light a:not(.cta-primary):not(.cta-demo):not(.hebra-final-cta__btn):not(.stage-cta) {
  color: inherit;
}

/* Keep dark nested panels readable */
.marketing-surface-light .marketing-panel-dark,
.marketing-surface-light .atelier-sim-panel,
.marketing-surface-light .atelier-chat,
.marketing-surface-light .stack-layer,
.marketing-surface-light .sys,
.marketing-surface-light .sys-hebra,
.marketing-surface-light .arch,
.marketing-surface-light .hebra-om {
  color: #F9FAFB;
}
.marketing-surface-light .atelier-sim-panel,
.marketing-surface-light .atelier-sim-panel p,
.marketing-surface-light .atelier-sim-bot,
.marketing-surface-light .atelier-sim-context,
.marketing-surface-light .atelier-chat,
.marketing-surface-light .atelier-a,
.marketing-surface-light .stack-hebra-title,
.marketing-surface-light .stack-verbs span,
.marketing-surface-light .stack-flow,
.marketing-surface-light .stack-diagram-label,
.marketing-surface-light .stack-pill,
.marketing-surface-light .sys-hebra,
.marketing-surface-light .sys-flow,
.marketing-surface-light .hebra-om-name,
.marketing-surface-light .hebra-om-desc,
.marketing-surface-light .hebra-om-signal-list li,
.marketing-surface-light .arch-node,
.marketing-surface-light .arch-node strong,
.marketing-surface-light .arch-node span,
.marketing-surface-light .arch-path p,
.marketing-surface-light .arch-di,
.marketing-surface-light .arch-out {
  color: #E5E7EB !important;
}

/* —— Product window —— */
.marketing-product-window {
  display: block;
  width: min(82%, 1024px);
  max-width: 1024px;
  margin: 0 auto;
  background: #F7F4EE;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  box-shadow: var(--mk-shadow-float);
  overflow: hidden;
  box-sizing: border-box;
}

.marketing-product-window__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  background: #EEEAE2;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  pointer-events: none;
}

.marketing-product-window__chrome i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D1D5DB;
}

.marketing-product-window__chrome i:nth-child(1) { background: #E2554A; }
.marketing-product-window__chrome i:nth-child(2) { background: #E6C04A; }
.marketing-product-window__chrome i:nth-child(3) { background: #5FBF6A; }

.marketing-product-window img,
.marketing-product-window__stage img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1024px;
  aspect-ratio: 1024 / 576;
  object-fit: contain;
  background: #F3EFE6;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.marketing-product-window--native .marketing-product-window__chrome {
  display: none;
}

/* Full compositions that already include chrome, ambient, and a floating window. */
.marketing-product-window--composed {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.marketing-product-window--composed img,
.marketing-product-window--composed .marketing-product-window__stage img {
  background: transparent;
  border-radius: 0;
}

/* Platform product shots: round the composition and lift it off the canvas. */
.marketing-product-window--float {
  overflow: visible;
}
.marketing-product-window--float img,
.marketing-product-window--float .marketing-product-window__stage img,
.product-shot.marketing-surface-light .marketing-product-window--float img,
.product-shot.marketing-surface-light-ambient .marketing-product-window--float img,
.hero-product-proof.marketing-surface-light-ambient .marketing-product-window--float img {
  border-radius: 18px;
  box-shadow:
    0 24px 56px rgba(15, 23, 42, 0.16),
    0 8px 20px rgba(15, 23, 42, 0.08);
}

/* Crop baked navy surround on Platform screenshots; keep baked browser chrome.
   Cap inner crop so the 1024px source is never displayed larger than itself. */
.marketing-product-window--baked .marketing-product-window__stage {
  position: relative;
  overflow: hidden;
  background: #F7F4EE;
}
.marketing-product-window--baked-di {
  width: min(82%, 912px);
  max-width: 912px;
}
.marketing-product-window--baked-di .marketing-product-window__stage {
  aspect-ratio: 912 / 539;
}
.marketing-product-window--baked-di img {
  position: absolute;
  left: calc(-56 / 912 * 100%);
  top: calc(-18 / 539 * 100%);
  width: calc(1024 / 912 * 100%);
  max-width: none;
  height: auto;
  aspect-ratio: 1024 / 576;
  object-fit: contain;
}
.marketing-product-window--baked-atelier {
  width: min(82%, 890px);
  max-width: 890px;
}
.marketing-product-window--baked-atelier .marketing-product-window__stage {
  aspect-ratio: 890 / 521;
}
.marketing-product-window--baked-atelier img {
  position: absolute;
  left: calc(-67 / 890 * 100%);
  top: calc(-20 / 521 * 100%);
  width: calc(1024 / 890 * 100%);
  max-width: none;
  height: auto;
  aspect-ratio: 1024 / 576;
  object-fit: contain;
}

/* WovenSignalOverlay host stacking is in woven-signal-overlay.css */

@media (max-width: 768px) {
  .marketing-product-window {
    width: min(calc(100% - 8px), 1024px);
    border-radius: 12px;
  }
  .marketing-product-window--baked-di {
    width: min(calc(100% - 8px), 912px);
  }
  .marketing-product-window--baked-atelier {
    width: min(calc(100% - 8px), 890px);
  }
  .marketing-product-window__chrome { height: 22px; }
}

/* Homepage product showcase on light canvas.
   Overlap the composite into the hero; do not pull the section fill up,
   or a full-width bar appears between the video and the image. */
.hero-product-proof.marketing-surface-light-ambient {
  display: flow-root;
  background: var(--mk-canvas);
  padding: 0 32px 88px;
  margin-top: 0;
  overflow: visible;
}
.hero-product-proof.marketing-surface-light-ambient .hero-product-proof-inner {
  width: min(82%, 1024px);
  max-width: 1024px;
  margin: -48px auto 0;
  border-radius: 0;
  box-shadow: none;
  isolation: auto;
  overflow: visible;
}
.hero-product-proof.marketing-surface-light-ambient .hero-product-proof-inner::after {
  display: none;
}
.hero-product-proof.marketing-surface-light-ambient .hero-product-proof-frame {
  border-radius: 0;
  overflow: visible;
}
.hero-product-proof.marketing-surface-light-ambient .marketing-product-window--float img {
  aspect-ratio: 1024 / 682;
  border-radius: 18px;
  box-shadow:
    0 24px 56px rgba(15, 23, 42, 0.16),
    0 8px 20px rgba(15, 23, 42, 0.08);
}

@media (max-width: 768px) {
  .hero-product-proof.marketing-surface-light-ambient {
    margin-top: 0;
    padding: 0 16px 56px;
  }
  .hero-product-proof.marketing-surface-light-ambient .hero-product-proof-inner {
    margin-top: -36px;
  }
}

/* Tech foundation light cards */
.tech-foundation-section.marketing-surface-light {
  background: var(--mk-canvas);
  border-top: 1px solid var(--mk-border-light);
}
.tech-foundation-section.marketing-surface-light .tech-foundation-surface {
  background: var(--mk-canvas-card);
  border: 1px solid var(--mk-border-light);
  box-shadow: var(--mk-shadow-card);
}
.tech-foundation-section.marketing-surface-light .tech-foundation-icon {
  color: #64748B;
}

/* Atelier light */
.ai-reasoning-section.marketing-surface-light {
  background: var(--mk-canvas);
  border-top: 1px solid var(--mk-border-light);
}

/* Interactive Atelier pills: product-like beige outline, ink type */
.atelier-sim-pill,
.atelier-mini-q button {
  background: var(--mk-canvas-card) !important;
  border: 1px solid rgba(15, 23, 42, 0.16) !important;
  color: var(--mk-ink) !important;
  font-weight: 500;
  box-shadow: none;
}
.atelier-sim-pill:hover,
.atelier-mini-q button:hover {
  background: #F7F4EE !important;
  border-color: rgba(15, 23, 42, 0.28) !important;
}
.atelier-sim-pill.is-active,
.atelier-mini-q button.is-on {
  background: var(--mk-canvas-card) !important;
  border-color: rgba(15, 23, 42, 0.32) !important;
  color: var(--mk-ink) !important;
  box-shadow: 0 0 0 2px var(--mk-canvas), 0 0 0 3px rgba(15, 23, 42, 0.18);
}
.atelier-sim-user,
.atelier-q {
  background: var(--mk-canvas-card) !important;
  border: 1px solid rgba(15, 23, 42, 0.16) !important;
  color: var(--mk-ink) !important;
}
.atelier-chat .atelier-q {
  display: inline-block;
  max-width: 92%;
  margin-left: auto;
  margin-bottom: 0.7rem;
  padding: 0.65rem 0.9rem;
  border-radius: 16px;
  font-weight: 600;
}
.atelier-chat {
  display: flex;
  flex-direction: column;
}

/* Operational impact light cards */
.stats.marketing-surface-light {
  background: var(--mk-canvas);
  border-top: 1px solid var(--mk-border-light);
}
.stats.marketing-surface-light .outcome-card {
  background: var(--mk-canvas-card);
  border: 1px solid var(--mk-border-light);
  box-shadow: var(--mk-shadow-card);
}

/* Home architecture: light canvas, dark diagram */
.architecture-section.marketing-surface-light {
  background: var(--mk-canvas);
  border-top: 1px solid var(--mk-border-light);
}
.architecture-section.marketing-surface-light .stack-layer {
  padding: 1.5rem 1.25rem 1.75rem;
}

.principle.marketing-surface-light .weave .w-d {
  stroke: #0F172A;
}

.marketing-surface-light .arch,
.marketing-surface-light .sys {
  background: var(--mk-navy);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  padding: 1.5rem 1.25rem;
}

/* Platform */
.product-shot.marketing-surface-light-ambient,
.product-shot.marketing-surface-light {
  background: var(--mk-canvas);
  border-top: 1px solid var(--mk-border-light);
}
.product-shot.marketing-surface-light img,
.product-shot.marketing-surface-light-ambient img {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

body.marketing-page .section.marketing-surface-light {
  border-top: 1px solid var(--mk-border-light);
}

.marketing-surface-light .os-card .chips span,
.marketing-surface-light .sys-sources .pills span,
.marketing-surface-light .thread-stages span {
  background: var(--mk-canvas);
  border: 1px solid var(--mk-border-light);
  color: var(--mk-ink-muted) !important;
}

.marketing-surface-light .atelier-mini-q button {
  color: var(--mk-ink);
  background: var(--mk-canvas-card);
  border-color: rgba(15, 23, 42, 0.16);
}
.marketing-surface-light .atelier-mini-q button.is-on {
  color: var(--mk-ink);
}

.marketing-surface-light .atelier-ctx {
  color: var(--mk-ink-muted) !important;
}

.marketing-surface-light .atelier-chat {
  background: var(--mk-navy);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

/* Deployment / About light cards */
.marketing-surface-light .about-card,
.marketing-surface-light .approach-card,
.marketing-surface-light .adopt-step,
.marketing-surface-light .stage,
.marketing-surface-light .scope-live,
.marketing-surface-light .scope-ahead,
.marketing-surface-light .os-card,
.marketing-surface-light .validate-card,
.marketing-surface-light .value-card,
.marketing-surface-light .ready-card,
.marketing-surface-light .callout {
  background: var(--mk-canvas-card);
  border: 1px solid var(--mk-border-light);
  box-shadow: var(--mk-shadow-card);
}

.marketing-surface-light .callout {
  border-color: rgba(154, 52, 18, 0.28);
  background: linear-gradient(180deg, rgba(241, 117, 34, 0.08), var(--mk-canvas-card));
}

.why-hebra.marketing-surface-light,
.about-content.marketing-surface-light,
.approach-section.marketing-surface-light,
.principle.marketing-surface-light {
  background: var(--mk-canvas);
  border-top: 1px solid var(--mk-border-light);
}