@font-face {
  font-family: "Departure Mono";
  src: url("assets/fonts/departure-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("assets/fonts/onest-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "Libre Baskerville";
  src: url("assets/fonts/libre-baskerville-500-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --font-heading: "Libre Baskerville", Georgia, serif;
  --font-body: "Onest", Arial, sans-serif;
  --text-body: clamp(16px, 1.5vw, 19px);
}

html, body {
  min-height: 100%;
  margin: 0;
  background: #fff;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.1;
}

button, input, select, textarea {
  font: inherit;
}

* {
  box-sizing: border-box;
}

.hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  max-width: 1360px;
  margin-inline: auto;
  min-height: 80svh;
  padding: clamp(48px, 7vw, 100px) clamp(24px, 3.5vw, 48px) 64px;
  text-align: left;
  color: #161816;
}

.hero-copy {
  min-width: 0;
}

.hero-title {
  margin: 0;
  font-size: clamp(32px, 4.2vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1, "clig" 1;
}

.hero-title span {
  display: block;
}

.hero-description {
  width: 92%;
  max-width: 400px;
  margin: 28px 0 0;
  color: #60645f;
  font-size: var(--text-body);
  line-height: 1.7;
  text-wrap: pretty;
}

.markets-label {
  display: inline;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: inherit;
  white-space: nowrap;
}

.markets-wordmark { white-space: nowrap; }
.markets-slash { display: inline-block; width: .424em; height: .8em; margin-right: .04em; vertical-align: -.12em; overflow: hidden; text-indent: 1em; background: currentColor; mask: url("assets/icons/markets-slash.svg") center / contain no-repeat; }
[data-phase="checking"] .markets-status .markets-slash { color: #626d5c; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero-reassurance {
  max-width: 34ch;
  margin: 14px 0 0;
  color: #656b63;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  text-wrap: pretty;
}

.button {
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 50px;
  padding: 0 21px;
  border: 1px solid #171a17;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.button-primary {
  background: #171a17;
  color: #fff;
}

.button-primary:hover {
  background: #343a32;
}

.button-secondary {
  background: #fff;
  color: #171a17;
  border-color: #d7dbd3;
}

.button-secondary:hover {
  background: #f4f5f1;
}

.button:active {
  transform: translateY(1px);
}

.button:focus-visible {
  outline: 2px solid #4a6640;
  outline-offset: 4px;
}

.button .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.connection-note {
  min-height: 2.8em;
  margin: 12px 0 0;
  color: #7a8074;
  font-size: 11px;
  line-height: 1.4;
}

.visual-container {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: clamp(18px, 2vw, 28px);
  border-radius: 12px;
  background-color: #eff1ec;
  background-image: url("assets/images/nature-market-v3.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.visual-container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: url("assets/images/nature-market-v3-dithered.webp") center / cover no-repeat;
  mask-image: linear-gradient(to bottom, transparent 15%, #00000014 40%, #00000080 70%, #000 100%);
  pointer-events: none;
  transition: opacity 180ms ease;
}

.dither-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  mask-image: linear-gradient(to bottom, transparent 15%, #00000014 40%, #00000080 70%, #000 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

[data-dither-ready="true"]::before {
  opacity: 0;
}

[data-dither-ready="true"] .dither-canvas {
  opacity: 1;
}

.hero-visual {
  position: relative;
  z-index: 1;
  --text-body: 16px;
  --chat-surface: #f7f6f2;
  --chat-border: #e5e3dc;
  --chat-ink: #34342f;
  --chat-muted: #74746c;
  --chat-bubble: #eceae3;
  --chat-accent: #bd6b4b;
  --chat-composer: #fffefa;
  width: 100%;
  max-width: 500px;
  justify-self: center;
  min-width: 0;
  padding-block: 4px;
}

.hero-visual-home {
  position: relative;
  width: 100%;
  max-width: 500px;
  min-width: 0;
}

.hero-visual[data-platform="chatgpt"] {
  --chat-surface: #fff;
  --chat-border: #e5e7e6;
  --chat-ink: #202523;
  --chat-muted: #6c7570;
  --chat-bubble: #f0f2f1;
  --chat-accent: #287e68;
  --chat-composer: #f5f6f5;
}

.harness-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 16px;
  padding: 6px 6px 6px 18px;
  border: 1px solid #e1e4db;
  border-radius: 28px;
  background: #f5f5f2;
  font-size: var(--text-body);
  color: #30372c;
}

.harness-selector > span { font-weight: 500; }

.platform-options {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: #e9ece5;
}

.platform-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  background: transparent;
  color: #646960;
  font-size: var(--text-body);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.platform-option[aria-pressed="true"] {
  color: #22271f;
  background: #fff;
  box-shadow: 0 1px 4px #20251b12;
}

.platform-option:hover {
  color: #161816;
}

.platform-option:focus-visible {
  outline: 2px solid #4a6640;
  outline-offset: 2px;
}

.platform-option:active {
  background: #e9ece5;
}

.brand-logo {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: currentColor;
  mask: var(--brand-logo) center / contain no-repeat;
}

.logo-claude {
  --brand-logo: url("assets/icons/brand-claude.svg");
  color: #bd6b4b;
}

.logo-openai {
  --brand-logo: url("assets/icons/brand-openai.svg");
  color: #202523;
}

.chat-window {
  display: flex;
  flex-direction: column;
  height: var(--chat-preview-height, auto);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--chat-border) 35%, #ffffffa6);
  border-radius: 12px;
  background: var(--chat-surface);
  background: color-mix(in srgb, var(--chat-surface) 74%, transparent);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  color: var(--chat-ink);
  box-shadow: 0 24px 64px -32px #292f2333, 0 2px 6px #292f2305;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}

.chat-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 24px;
  border-bottom: 1px solid var(--chat-border);
}

.harness-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar-icon, .header-more {
  color: var(--chat-muted);
}

.harness-name {
  font-size: var(--text-body);
  font-weight: 500;
}

[data-platform="claude"] .harness-name {
  font-family: var(--font-heading);
}

.header-more {
  margin-left: auto;
}

.chat-conversation {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 24px 24px;
  font-size: 16px;
  line-height: 1.6;
}

.user-message {
  align-self: flex-end;
  max-width: 90%;
  padding: 9px 14px;
  border-radius: 14px 14px 4px 14px;
  background: var(--chat-bubble);
  transition: background 220ms ease, border-radius 220ms ease;
}

.typed-message {
  display: grid;
}

.typed-message > span {
  grid-area: 1 / 1;
  white-space: pre-line;
}

/* Reserve the finished message's space so typing never moves the hero. */
.typing-measure {
  visibility: hidden;
}

.typed-text.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: -0.08em;
  background: currentColor;
  animation: typing-cursor 800ms step-end infinite;
}

[data-phase="waiting"] .user-message,
[data-phase="composing"] .user-message,
[data-phase="waiting"] .assistant-message,
[data-phase="composing"] .assistant-message,
[data-phase="sending"] .assistant-message {
  visibility: hidden;
}

.composer-draft {
  visibility: hidden;
  color: var(--chat-ink);
}

.composer-entry {
  font-size: var(--text-body);
  line-height: 1.5;
}

[data-phase="composing"] .composer-draft {
  visibility: visible;
}

[data-phase="composing"] .composer-placeholder {
  visibility: hidden;
}

[data-phase="composing"] .composer-send {
  transform: scale(1.06);
}

@keyframes typing-cursor {
  50% { opacity: 0; }
}

@keyframes checking-pulse {
  to { opacity: 0.3; }
}

[data-platform="chatgpt"] .user-message {
  border-radius: 22px;
}

.markets-connection {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #547052;
  font-size: var(--text-body);
}

.markets-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 6px;
  background: #f6d64d;
}

.markets-avatar img {
  display: block;
  width: 24px;
  height: auto;
}

.markets-activity {
  display: grid;
  gap: 6px;
  margin: 10px 0 14px;
  padding: 0;
  list-style: none;
  font-size: var(--text-body);
  line-height: 1.5;
}

.markets-activity li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--chat-muted);
}

.tool-call {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  text-align: left;
  font-size: 16px;
  line-height: inherit;
}

.tool-call:not(:disabled) { cursor: pointer; }
.tool-call:not(:disabled):hover { background: #5470520c; }
.tool-call:focus-visible { outline: 2px solid #547052; outline-offset: 4px; }
.markets-activity li[data-inspected="true"] .tool-call { outline: 1px solid #54705255; outline-offset: 5px; background: #5470520b; }

.activity-draw { --activity-icon: url("assets/icons/pencil.svg"); }
.activity-watch { --activity-icon: url("assets/icons/bell-ringing.svg"); }
.activity-focus { --activity-icon: url("assets/icons/focus-2.svg"); }

.markets-activity li[data-state="pending"] {
  visibility: hidden;
}

.markets-activity li[data-state="active"] {
  color: var(--chat-ink);
}

.activity-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #547052;
}

.activity-icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  mask: var(--activity-icon) center / contain no-repeat;
}

.activity-chart {
  --activity-icon: url("assets/icons/chart-candle.svg");
}

.activity-universe {
  --activity-icon: url("assets/icons/list-details.svg");
}

.activity-rsi {
  --activity-icon: url("assets/icons/calculator.svg");
}

.activity-filter {
  --activity-icon: url("assets/icons/filter.svg");
}

.activity-label {
  min-width: 0;
}

.activity-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: auto;
  color: #547052;
  opacity: 0;
  transition: opacity 180ms ease;
}

[data-state="complete"] .activity-check {
  opacity: 1;
}

[data-phase="checking"] .markets-status,
[data-state="active"] .activity-label {
  color: transparent;
  background: linear-gradient(105deg, #626d5c 35%, #c4cebb 48%, #626d5c 62%);
  background-size: 240% 100%;
  background-clip: text;
  animation: activity-shimmer 2200ms ease-in-out infinite;
}

[data-state="active"] .activity-icon {
  animation: checking-pulse 900ms ease-in-out infinite alternate;
}

@keyframes activity-shimmer {
  from { background-position: 140% 0; }
  to { background-position: -140% 0; }
}

.assistant-message p {
  max-width: 38ch;
  margin: 10px 0 0;
}

[data-platform="claude"] .assistant-message p {
  font-family: var(--font-heading);
  font-weight: 500;
}

.chat-composer {
  flex-shrink: 0;
  margin: auto 16px 16px;
  padding: 12px;
  border: 1px solid var(--chat-border);
  border-radius: 10px;
  background: var(--chat-composer);
  transition: background 220ms ease, border-radius 220ms ease;
}

[data-platform="chatgpt"] .chat-composer {
  border-radius: 12px;
}

.composer-placeholder {
  color: var(--chat-muted);
  font-size: var(--text-body);
}

.composer-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: var(--chat-muted);
}

.composer-connection {
  font-size: var(--text-body);
}

.composer-send {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border-radius: 6px;
  background: var(--chat-accent);
  color: #fff;
  transition: transform 180ms ease;
}

[data-platform="chatgpt"] .composer-send {
  border-radius: 50%;
  background: var(--chat-ink);
}

@media (max-width: 680px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 28px;
    padding: 64px 22px 40px;
  }

  .hero-title {
    font-size: clamp(32px, 6.5vw, 44px);
  }

  .hero-description {
    width: 100%;
    margin-top: 24px;
  }

  .hero-actions {
    margin-top: 26px;
    gap: 10px;
  }

  .button {
    padding-inline: 16px;
    gap: 12px;
    font-size: 16px;
  }

  .hero-visual {
    padding-block: 0;
  }

  .chat-header {
    padding-inline: 18px;
  }

  .chat-conversation {
    padding: 20px 18px 22px;
  }

  .chat-composer {
    margin: auto 14px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button, .platform-option, .chat-window, .user-message, .chat-composer, .composer-send, .activity-check,
  .visual-container::before, .dither-canvas {
    transition: none;
  }

  .typed-text.is-typing::after, .activity-icon,
  [data-phase="checking"] .markets-status, [data-state="active"] .activity-label {
    animation: none;
  }

  [data-phase="checking"] .markets-status, [data-state="active"] .activity-label {
    color: var(--chat-ink);
    background: none;
  }
}


/* Only the conversation moves. Both platform selectors stay in their sections. */
.visual-container > .harness-selector { position: relative; z-index: 1; }
.harness-selector { font-size: 16px; }
.platform-option { font-size: 16px; }
.has-handoff .hero-visual-home > .hero-visual {
  max-width: none;
  animation: chat-handoff 1s linear both;
  animation-timeline: scroll(root block);
  animation-range: var(--handoff-start) var(--handoff-end);
}
@keyframes chat-handoff {
  from { transform: translate(0, 0); width: var(--origin-width); }
  to { transform: translate(var(--handoff-x), var(--handoff-y)); width: var(--dock-width); }
}
.chat-dock > .hero-visual { padding-block: 0; width: 100%; max-width: 500px; transform: none; animation: none; }

.examples-section { position: relative; z-index: 1; max-width: 1360px; margin: 0 auto; padding: 80px clamp(24px, 3.5vw, 48px) 100px; color: #161816; }
.examples-heading { margin: 0 auto 44px; text-align: center; }
.examples-heading h2 { margin: 0; font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -.035em; line-height: 1.2; }
.examples-heading p { margin: 18px auto 0; color: #60645f; font-size: var(--text-body); text-wrap: pretty; }
.examples-stage { position: relative; isolation: isolate; padding: 32px 40px; border: 1px solid #e5eadd; border-radius: 16px; background: url("assets/images/market-flow-v2.webp") center / cover; }
.examples-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url("assets/images/market-flow-v2-dithered.webp") center / cover; pointer-events: none; }
.examples-stage .dither-canvas { z-index: -1; mask-image: none; }
.scene-harness-selector { margin-bottom: 24px; }
.example-prompts { position: relative; container: example-prompts / inline-size; margin-top: 24px; }
.example-prompts-help { margin: 0 auto 14px; color: #3f4e37; font-size: 16px; line-height: 1.5; text-align: center; white-space: nowrap; }
.example-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: 500px; margin-inline: auto; }
.example-choice { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 48px; padding: 12px 18px; border: 1px solid #bdc8b2; border-radius: 999px; background: #fffef9; color: #45513e; font-size: 16px; text-align: left; white-space: nowrap; cursor: pointer; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; }
.example-choice::after { content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-left: auto; background: currentColor; mask: url("assets/icons/plus.svg") center / contain no-repeat; opacity: .8; transition: transform 180ms ease; }
.example-choice[aria-pressed="true"] { background: #f6d64d; border-color: #d6b62f; color: #293520; }
.example-choice:hover { background: #f6f8f0; border-color: #8e9f7e; }
.example-choice[aria-pressed="true"]:hover { background: #f1cc34; border-color: #bd9e1e; }
.example-choice:focus-visible { outline: 2px solid #4a6640; outline-offset: 4px; }
.example-choice:focus-visible::after { mask-image: url("assets/icons/arrow-up.svg"); transform: translateY(-1px); }
@media (hover: hover) {
  .example-choice:hover::after { mask-image: url("assets/icons/arrow-up.svg"); transform: translateY(-1px); }
}
.example-choice:active { box-shadow: inset 0 1px 3px #28312020; }
@container example-prompts (min-width: 760px) {
  .example-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 800px; }
}
.examples-diagram { position: relative; }
.chat-dock { position: relative; width: 100%; max-width: 500px; min-height: 490px; margin-inline: auto; scroll-margin-top: clamp(100px, calc(100svh - 640px), 250px); }
.dock-sentinel, .home-sentinel { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }
.work-area { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.work-window { position: absolute; width: clamp(280px, 23vw, 320px); overflow: hidden; border: 1px solid #bdc9b6; border-radius: 0; background: #fffef8; color: #34432e; box-shadow: 0 18px 50px -16px #182e2b66; font-family: "Departure Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 16px; font-synthesis: none; pointer-events: auto; }
.work-window[hidden] { display: none; }
.work-window[data-side="left"] { right: calc(50% + 265px); top: 32px; }
.work-window[data-side="right"] { left: calc(50% + 265px); top: 32px; }
.work-chrome { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; border-bottom: 1px solid #d4dccb; background: #edf0e6; font-size: 16px; }
.work-app { flex: 1; color: #34432e; white-space: nowrap; font-family: var(--font-body); font-weight: 500; letter-spacing: -.02em; }
.backend-logo { display: block; flex-shrink: 0; width: 32px; height: auto; image-rendering: pixelated; }
.work-close { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 28px; padding: 0; border: 0; background: transparent; color: #66775a; cursor: pointer; }
.work-close svg { width: 16px; height: 16px; }
.work-close::after { content: ""; position: absolute; inset: -3px; }
.work-close:hover { color: #283a25; background: #34432e0a; }
.work-close:focus-visible { outline: 2px solid #f6d64d; outline-offset: 1px; }
.work-progress { display: flex; gap: 3px; padding: 0 12px; height: 3px; background: #edf0e6; }
.work-progress span { flex: 1; background: #d4dccb; }
.work-progress [data-state="complete"] { background: #8fa975; }
.work-progress [data-state="active"] { background: #f6d64d; }
.work-body { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 16px; }
[data-streaming="true"] .work-body::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32%; height: 2px; background: linear-gradient(90deg, transparent, #f6d64d, transparent); animation: backend-activity 1400ms ease-in-out infinite; }
@keyframes backend-activity { from { transform: translateX(-110%); } to { transform: translateX(420%); } }
.work-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.work-step { margin: 0; color: #66775a; font-size: 16px; }
.work-state { display: inline-flex; align-items: center; gap: 7px; color: #45613b; }
[data-streaming="true"] .work-state::before { content: ""; width: 10px; height: 10px; border: 1.5px solid #b7c3aa; border-top-color: #f6d64d; border-radius: 50%; animation: terminal-running 900ms linear infinite; }
@keyframes terminal-running { to { transform: rotate(360deg); } }
.work-body h3 { margin: 0; padding-bottom: 12px; border-bottom: 1px solid #d4dccb; font-family: var(--font-body); font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -.035em; color: #283a25; }
.backend-visual { min-height: 164px; }
.visual-meta { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 12px; color: #5d7050; }
.visual-meta span:last-child { color: #725c08; }
@keyframes backend-tile-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.price-feeds { display: grid; gap: 12px; padding-top: 8px; }
.price-feed { display: grid; grid-template-columns: 76px minmax(0, 1fr) 16px; grid-template-rows: minmax(0, 1fr); align-items: center; gap: 10px; height: 40px; }
.feed-check { color: #466b37; }
.market-candles { display: block; width: 100%; height: 100%; overflow: visible; }
.market-candle line { stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.market-candle rect { fill: currentColor; }
.candle-up { color: #61894d; }
.candle-down { color: #bd745f; }
[data-streaming="true"] .market-candle { transform-box: fill-box; transform-origin: center; animation: backend-candle-in 400ms ease both; animation-delay: calc(var(--candle) * 110ms); }
@keyframes backend-candle-in { from { opacity: 0; transform: scaleY(.3); } to { opacity: 1; transform: scaleY(1); } }
.match-list { display: grid; }
.match-row { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; padding: 10px 0; }
.match-row + .match-row { border-top: 1px solid #d4dccb; }
.match-row strong { font: inherit; color: #34432e; }
.match-row > span:last-child { color: #466b37; }
[data-streaming="true"] .match-row { animation: backend-tile-in 500ms ease both; animation-delay: calc(var(--tile) * 350ms); }
.signal-list { display: grid; gap: 20px; }
.signal-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 40px; align-items: center; gap: 8px; }
.signal-track { position: relative; display: block; height: 8px; background: #e2e8d8; }
.signal-track::after { content: ""; position: absolute; left: 30%; top: -4px; height: 16px; border-left: 1px solid #f6d64d; }
.signal-track i { display: block; width: var(--signal); height: 100%; background: #6c914f; transform-origin: left; }
.signal-value { text-align: right; color: #3f602e; font-variant-numeric: tabular-nums; }
[data-streaming="true"] .signal-track i { animation: backend-signal-in 900ms ease both; animation-delay: calc(var(--tile) * 180ms); }
@keyframes backend-signal-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.backend-chart { position: relative; height: 126px; background: repeating-linear-gradient(180deg, transparent 0 32px, #34432e0d 32px 33px); }
.chart-level { position: absolute; inset-inline: 0; border-top: 1px dashed #a17d10; text-align: right; }
.chart-level span { position: relative; top: -12px; padding-left: 6px; background: #fffef8; color: #725c08; }
.chart-resistance { top: 24%; }
.chart-support { top: 78%; border-color: #61894d; }
.chart-support span { color: #466b37; }
[data-streaming="true"] .chart-level { animation: backend-tile-in 500ms 900ms ease both; }
.watch-visual { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 86px; padding: 12px 16px; border: 1px solid #becbac; overflow: hidden; }
.watch-visual > div { position: relative; z-index: 1; }
.watch-visual strong { display: block; color: #725c08; font-size: 28px; font-weight: 400; line-height: 1.2; }
.watch-visual .activity-icon { width: 28px; height: 28px; color: #725c08; }
.watch-ring { position: absolute; right: 16px; width: 28px; height: 28px; border: 1px solid #78945f; border-radius: 50%; }
[data-streaming="true"] .watch-ring { animation: backend-watch-pulse 1600ms ease-out infinite; }
@keyframes backend-watch-pulse { from { transform: scale(1); opacity: .65; } to { transform: scale(3.5); opacity: 0; } }
.watch-connection { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; color: #45613b; }
.tool-connection { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity 180ms ease; }
.examples-stage[data-connected="true"][data-scene-active="true"] .tool-connection { opacity: 1; }
.connection-track, .connection-flow { fill: none; stroke: #758c66; stroke-width: 1.5; }
.connection-flow { stroke: #3e6934; stroke-dasharray: 4 12; }
.examples-stage[data-connected="true"][data-tool-state="working"] .connection-flow { animation: connection-travel 1600ms linear infinite; }
.connection-end { fill: #f6d64d; stroke: #5f784f; stroke-width: 1.5; }
@keyframes connection-travel { to { stroke-dashoffset: -32; } }

@media (min-width: 821px) and (max-width: 1180px) {
  .work-window { width: 270px; }
  .work-window[data-side="left"] { right: calc(50% + 160px); top: 100px; }
  .work-window[data-side="right"] { left: calc(50% + 160px); top: 100px; }
}
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; min-height: auto; gap: 28px; }
  .visual-container { padding-inline: 12px; padding-bottom: 12px; }
  .hero-visual, .hero-visual-home, .chat-dock, .chat-dock > .hero-visual { max-width: none; }
  .examples-section { padding-top: 56px; }
  .examples-heading { margin-bottom: 30px; }
  .examples-stage { padding: 24px 12px 16px; }
  .harness-selector { padding: 10px; border-radius: 20px; }
  .example-prompts { margin: 20px 0 0; }
  .example-prompts-help { font-size: 14px; }
  .work-area, .tool-connection { display: none; }
  .chat-conversation { position: relative; flex: 1; flex-shrink: 1; min-height: 0; gap: 16px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .markets-activity { gap: 8px; margin: 12px 0; }
  .markets-activity li { display: block; overflow: hidden; border: 1px solid var(--chat-border); border-radius: 8px; background: var(--chat-composer); }
  .markets-activity li:has(.tool-call[aria-expanded="true"]) { border-color: #bdc9b6; }
  .tool-call { min-height: 44px; gap: 8px; padding: 10px; border-radius: 0; line-height: 1.45; }
  .tool-call .activity-label { flex: 1; }
  .markets-activity li[data-inspected="true"] .tool-call { outline: none; background: #54705208; }
  .markets-activity li .tool-call:focus-visible { outline: 2px solid #547052; outline-offset: -3px; }
  .tool-call::after { content: ""; flex-shrink: 0; width: 14px; height: 14px; background: currentColor; mask: url("assets/icons/chevron-down.svg") center / contain no-repeat; transition: transform 180ms ease; }
  .tool-call[aria-expanded="true"]::after { transform: rotate(180deg); }
  .inline-tool-panel:not([hidden]) { display: block; margin-top: 0; border-top: 1px solid #d4dccb; }
  .inline-tool-panel .work-window { position: relative; left: auto; right: auto; top: auto; width: 100%; margin: 0; border: 0; box-shadow: none; }
  .inline-tool-panel .work-chrome { min-height: 38px; background: #f3f5ed; }
  .inline-tool-panel .backend-logo { width: 24px; }
  .inline-tool-panel .work-close, .inline-tool-panel .work-meta, .inline-tool-panel #work-title { display: none; }
  .inline-tool-panel .work-body { padding: 12px; }
  .inline-tool-panel .backend-visual { min-height: 0; }
  .inline-tool-panel .watch-connection { flex-wrap: wrap; gap: 4px 12px; }
  .inline-tool-panel .work-progress { height: 2px; }
}
@media (max-width: 680px) {
  .hero { padding-inline: 16px; }
  .examples-section { padding-inline: 16px; padding-bottom: 48px; }
  .examples-heading p { padding-inline: 12px; }
  .scene-harness-selector { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .work-window *, .work-window *::before, .work-window *::after { animation: none !important; }
  .has-handoff .hero-visual, .connection-flow, [data-streaming="true"] .work-state::before { animation: none; }
  [data-streaming="true"] .work-body::after { display: none; }
  .example-choice, .example-choice::after, .tool-connection { transition: none; }
}

.markets-activity li[hidden] { display: none; }

.hero-visual[data-measuring] .typed-text::after { content: none; }

.inline-tool-panel[hidden] { display: none; }

/* The section above already contributes 100px to the upper gap (48px on mobile). */
.real-data-section { max-width: 1120px; margin-inline: auto; padding: 132px clamp(24px, 3.5vw, 48px) 224px; }
.market-checks { max-width: 1360px; margin-inline: auto; padding: 0 clamp(24px, 3.5vw, 48px) 112px; color: #20251b; }
.market-checks-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); align-items: start; gap: clamp(40px, 5.5vw, 80px); }
.checks-copy { position: sticky; top: var(--checks-copy-top, 32px); padding-block: 32px; }
.checks-copy h2 { margin: 0; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.25; letter-spacing: -.035em; text-wrap: pretty; }
.checks-lede { max-width: 30ch; margin: 20px 0 0; color: #62675f; font-size: var(--text-body); line-height: 1.7; }
.checks-topics { display: grid; gap: 8px; margin-top: 28px; }
.checks-topic { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid transparent; border-radius: 12px; color: #62675f; text-decoration: none; transition: background 220ms ease, color 220ms ease, border-color 220ms ease; }
.checks-topic > img { flex-shrink: 0; margin-top: 2px; opacity: .65; }
.checks-topic strong { display: block; color: #30372a; font-size: 18px; font-weight: 500; line-height: 1.5; }
.checks-topic strong + span { display: block; margin-top: 4px; font-size: 16px; line-height: 1.5; }
.checks-topic:hover { background: #f4f6ef; color: #30372a; }
.checks-topic[aria-current="step"] { border-color: #e2c44c; background: #f6d64d; color: #38422f; }
.checks-topic[aria-current="step"] > img { opacity: 1; }
.checks-topic:focus-visible { outline: 2px solid #4a6640; outline-offset: 3px; }
.checks-scenes { display: grid; gap: 56px; min-width: 0; }
.check-scene { position: relative; isolation: isolate; min-width: 0; border-radius: 20px; background: #edf3e8 center / cover; scroll-margin-top: 36px; }
.check-scene[data-check="levels"] { background-image: url("assets/images/checks-levels-bg-v3.webp"); }
.check-scene[data-check="options"] { background-color: #edf3f5; background-image: url("assets/images/checks-options-bg-v3.webp"); }
.check-scene[data-check="indicators"] { background-color: #f4eff2; background-image: url("assets/images/checks-indicators-bg-v3.webp"); }
.check-scene .dither-canvas { mask-image: linear-gradient(to bottom, transparent 20%, #000 40%, #000 65%, transparent 85%); }
.check-conversation { position: relative; z-index: 1; width: 100%; min-width: 0; padding: 32px; }
.check-question { box-shadow: inset 0 0 0 1px #e4c443; transform-origin: bottom right; width: fit-content; max-width: 92%; margin: 0 0 24px auto; padding: 12px 16px; border-radius: 16px 16px 4px 16px; background: #f6d64d; color: #30372a; font-size: 16px; line-height: 1.6; }
.check-response { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; margin-bottom: 24px; }
.check-response-avatar { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #e3c444; border-radius: 8px; background: #f6d64d; }
.check-response-mark { display: block; width: 24px; height: 13px; }
.check-answer { margin: 0; font-family: var(--font-heading); font-size: 18px; line-height: 1.65; }
.check-answer strong { font-weight: 500; }
.check-word { display: inline-block; }
.check-result-figure { margin: 0; padding: 20px; border: 1px solid #ffffffa6; border-radius: 14px; background: rgb(255 254 249 / .74); backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1); box-shadow: inset 0 1px #ffffff80, 0 14px 28px -24px #526a4540; transform-origin: center top; }
.check-chart-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; font-size: 16px; }
.check-chart-heading strong { font-size: 18px; font-weight: 500; }
.check-chart-heading > span { padding: 3px 8px; border: 1px solid #e6e9df; border-radius: 6px; color: #68715f; font-size: 12px; }
.check-chart { min-width: 0; min-height: 300px; }
.check-chart[data-check-chart="indicators"] { min-height: 350px; }
.check-chart svg { display: block; width: 100%; overflow: visible; font-family: var(--font-body); }
.check-chart svg text { fill: #68715f; font-size: 12px; }
.check-chart svg .check-chart-label { fill: #303d28; font-size: 13px; font-weight: 500; }
.check-chart svg .check-grid-line { stroke: #e9ece2; stroke-width: 1; }
.check-chart svg .check-up { fill: #69966c; color: #69966c; }
.check-chart svg .check-down { fill: #c47e70; color: #c47e70; }
.check-chart svg .check-candle-wick { stroke: currentColor; stroke-width: 1.3; }
.check-chart svg .check-level-line { fill: none; stroke: #59784b; stroke-width: 1.5; stroke-dasharray: none; }
.check-chart svg .check-resistance { stroke: #a58835; }
.check-chart svg .check-touch, .check-chart svg .check-divergence-point { fill: #fffef9; stroke: #59784b; stroke-width: 2; }
.check-chart svg .check-point-ripple { fill: none; stroke: #7b9b61; stroke-width: 1.2; opacity: 0; }
.check-chart svg .check-retest-label, .check-chart svg .check-wall-label { fill: #4b6140; font-size: 11px; font-weight: 500; }
.check-scan { opacity: 0; pointer-events: none; }
.check-chart svg .check-price-divergence { fill: none; stroke: #b57365; stroke-width: 1.8; stroke-dasharray: 5 4; }
.check-chart svg .check-rsi-divergence { fill: none; stroke: #69966c; stroke-width: 1.8; stroke-dasharray: 5 4; }
.check-chart svg .check-rsi-line { fill: none; stroke: #5a83b9; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.check-chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; color: #68715f; font-size: 14px; }
.check-chart-legend > span:last-child { margin-left: auto; }
.legend-puts::before, .legend-calls::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 2px; background: #69966c; }
.legend-calls::before { background: #c47e70; }
.check-result-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 16px; border-top: 1px solid #e8ecdf; color: #68715f; font-size: 13px; }
.check-result-notes > span { display: block; }
.check-result-notes > span:last-child { text-align: right; }
.check-result-notes strong { display: block; margin-top: 3px; color: #34432e; font-size: 20px; font-weight: 500; letter-spacing: -.025em; }
.check-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; margin-top: 20px; }
.replay-button { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffffb3; border-radius: 50%; background: rgb(255 255 255 / .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #4e6342; box-shadow: 0 2px 8px #34432e0a; cursor: pointer; transition: background 180ms ease; }
.replay-button img { display: block; width: 20px; height: 20px; opacity: .75; transition: opacity 180ms ease; }
.replay-button:hover { background: #fff; }
.replay-button:hover img { opacity: 1; }
.replay-button:focus-visible { outline: 2px solid #4e6342; outline-offset: 4px; }
.replay-button[hidden] { display: none; }
.check-replay { margin-bottom: -8px; }
.check-scene[data-dither-ready="true"] .check-takeaway { color: #30372a; }
/* A single reading sequence: message, streamed reply, plotted data, then the finding. */
.check-scene[data-animate="true"] .check-question { animation: check-message-send 320ms cubic-bezier(.2,.85,.25,1) both; }
.check-scene[data-animate="true"] .check-response-avatar { animation: check-mark-arrive 240ms 260ms ease both; }
.check-scene[data-animate="true"] .check-word { animation: check-word-resolve 280ms cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(340ms + var(--word) * 14ms); }
.check-scene[data-animate="true"] .check-result-figure { animation: check-result-unfold 360ms 650ms cubic-bezier(.2,.75,.2,1) both; }
.check-scene[data-animate="true"] :where(.check-chart svg) text { animation: check-axis-arrive 260ms 900ms ease both; }
.check-scene[data-animate="true"] .check-grid-line[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: check-line-draw 400ms 850ms ease both; }
.check-scene[data-animate="true"] .check-series { animation: check-history-read 750ms 1000ms linear both; }
.check-scene[data-animate="true"] .check-scan { animation: check-data-sweep 750ms 1000ms linear both; }
.check-scene[data-animate="true"] .check-level-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: check-line-draw 500ms 1550ms cubic-bezier(.2,.6,.2,1) both; }
.check-scene[data-animate="true"] .check-support-band { transform-box: fill-box; transform-origin: left; animation: check-support-draw 500ms 1550ms cubic-bezier(.2,.7,.2,1) both; }
.check-scene[data-animate="true"] :is(.check-touch, .check-divergence-point) { transform-box: fill-box; transform-origin: center; animation: check-point-found 300ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(1850ms + var(--point) * 180ms); }
.check-scene[data-animate="true"] .check-point-ripple { transform-box: fill-box; transform-origin: center; animation: check-finding-ripple 600ms ease-out both; animation-delay: calc(1850ms + var(--point) * 180ms); }
.check-scene[data-animate="true"] :is(.check-retest-label, .check-retest-backdrop) { animation: check-axis-arrive 260ms ease both; animation-delay: calc(1950ms + var(--point) * 180ms); }
.check-scene[data-animate="true"] :is(.check-chart-label, .check-wall-label) { animation: check-axis-arrive 300ms 2050ms ease both; }
.check-scene[data-animate="true"] .check-oi-bar { transform-box: fill-box; transform-origin: center bottom; animation: check-position-build 550ms cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(950ms + var(--item) * 36ms); }
.check-scene[data-animate="true"] .check-wall-area { animation: check-wall-found 500ms 1700ms ease both; }
.check-scene[data-animate="true"] .check-rsi-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: check-line-draw 750ms 1100ms ease both; }
.check-scene[data-animate="true"] .check-divergence { animation: check-connect-lows 450ms 1850ms cubic-bezier(.2,.7,.2,1) both; }
.check-scene[data-animate="true"] .check-result-notes > span { animation: check-word-resolve 320ms 2350ms ease both; }
.check-scene[data-animate="true"] .check-result-notes > span:last-child { animation-delay: 2450ms; }
.check-scene[data-animate="true"] .check-takeaway { animation: check-word-resolve 320ms 2650ms ease both; }
@keyframes check-message-send { 0% { opacity: 0; transform: translate(15px, 16px) scale(.94) rotate(-1.5deg); } 65% { opacity: 1; transform: translate(0, -2px) scale(1.012) rotate(.2deg); } 100% { opacity: 1; transform: none; } }
@keyframes check-mark-arrive { from { opacity: 0; transform: scale(.65) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes check-word-resolve { from { opacity: 0; clip-path: inset(-4px 0 100% 0); transform: translateY(7px); filter: blur(2px); } to { opacity: 1; clip-path: inset(-4px 0 -4px 0); transform: none; filter: blur(0); } }
@keyframes check-result-unfold { 0% { opacity: 0; clip-path: inset(0 0 94% 0 round 14px); transform: perspective(900px) translateY(14px) rotateX(6deg) scale(.985); } 70% { opacity: 1; transform: perspective(900px) translateY(-1px) rotateX(-.4deg) scale(1); } 100% { opacity: 1; clip-path: inset(-40px round 14px); transform: none; } }
@keyframes check-history-read { from { clip-path: inset(-3px 100% -3px -3px); } to { clip-path: inset(-3px); } }
@keyframes check-data-sweep { 0% { opacity: 0; transform: translateX(5px); } 6% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--scan-width)); } }
@keyframes check-axis-arrive { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes check-support-draw { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes check-point-found { 0% { opacity: 0; transform: scale(.3); } 65% { opacity: 1; transform: scale(1.3); } 100% { opacity: 1; transform: scale(1); } }
@keyframes check-finding-ripple { 0% { opacity: 0; transform: scale(.3); } 20% { opacity: .65; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes check-position-build { 0% { opacity: 0; transform: scaleY(.015); } 75% { opacity: var(--bar-opacity); transform: scaleY(1.025); } 100% { opacity: var(--bar-opacity); transform: scaleY(1); } }
@keyframes check-wall-found { from { opacity: 0; } to { opacity: 1; } }
@keyframes check-connect-lows { from { clip-path: inset(-6px 100% -6px -6px); opacity: 0; } to { clip-path: inset(-6px); opacity: 1; } }
@keyframes check-line-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .check-scene[data-animate="pending"] :is(.check-question, .check-response, .check-result-figure, .check-takeaway) { opacity: 0; }
}
@media (max-width: 980px) {
  .market-checks-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .checks-copy { position: relative; top: auto; display: block; min-height: 0; padding-block: 0; }
  .checks-copy h2 { max-width: 24ch; font-size: clamp(30px, 4.5vw, 40px); }
  .checks-lede { max-width: none; }
  .checks-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .checks-topic { flex-direction: column; gap: 8px; padding: 12px; }
  .checks-topic strong { font-size: 16px; }
  .checks-topic strong + span { display: none; }
  .checks-scenes { gap: 32px; }
}
@media (max-width: 680px) {
  .market-checks { padding: 0 16px 64px; }
  .checks-topics { grid-template-columns: minmax(0, 1fr); }
  .checks-topic { flex-direction: row; align-items: center; min-height: 48px; padding: 10px 12px; }
  .checks-topic > img { width: 20px; height: 20px; margin-top: 0; }
  .check-scene { border-radius: 12px; scroll-margin-top: 24px; }
  .check-conversation { padding: 16px; }
  .check-question { max-width: 100%; padding: 10px 12px; margin-bottom: 20px; }
  .check-answer { font-size: 16px; }
  .check-result-figure { padding: 12px; }
  .check-chart-heading { font-size: 14px; }
  .check-chart-heading strong { font-size: 16px; }
  .check-response { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; margin-bottom: 20px; }
  .check-response-avatar { width: 28px; height: 28px; border-radius: 7px; }
  .check-response-mark { width: 22px; height: 12px; }
  .check-footer { gap: 10px; margin-top: 16px; }
  .check-chart-heading > span { font-size: 12px; }
  .check-chart-legend { font-size: 12px; gap: 10px; }
  .check-chart-legend > span:last-child { width: 100%; margin-left: 0; }
  .check-result-notes { gap: 8px; font-size: 12px; }
  .check-result-notes strong { display: block; margin-left: 0; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .checks-topic, .replay-button, .replay-button img { transition: none; }
  .check-scene *, .check-scene *::before, .check-scene *::after { animation: none !important; }
}
.site-footer { max-width: 1360px; margin-inline: auto; padding: 0 clamp(24px, 3.5vw, 48px) 40px; color: #62675f; font-size: 13px; line-height: 1.7; }
.site-footer p { margin: 0; padding-top: 24px; border-top: 1px solid #e8ecdf; }
.benchmark-section { max-width: 1360px; margin: 0 auto; padding: 0 clamp(24px, 3.5vw, 48px) 100px; color: #20251b; font-size: 16px; }
.benchmark-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; overflow: hidden; border: 1px solid #e0e5da; border-radius: 16px; background: #f3f5ee; }
.clarity-lens { position: relative; align-self: stretch; aspect-ratio: 1; overflow: hidden; isolation: isolate; background: #d7e9de; }
.clarity-lens img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.clarity-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.clarity-lens[data-video-ready="true"] .clarity-video { opacity: 1; }
.video-dither-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.clarity-lens[data-video-dither="ready"] .video-dither-canvas { opacity: 1; }
[data-lens-reveal="ready"] .clarity-lens img { transform: scale(1.045); filter: blur(6px); }
[data-lens-reveal="focused"] .clarity-lens img { animation: clarity-focus 1000ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes clarity-focus { from { transform: scale(1.045); filter: blur(6px); } to { transform: scale(1); filter: blur(0); } }
.benchmark-result { display: flex; flex-direction: column; align-self: stretch; min-width: 0; padding: clamp(24px, 3vw, 40px); text-align: center; }
.benchmark-primary { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; padding-block: 24px 48px; }
.benchmark-mark { display: block; width: 56px; height: 56px; margin-bottom: 20px; }
.benchmark-label { margin: 0 0 20px; font-size: inherit; font-weight: 400; }
.benchmark-headline { margin: 0; font-family: var(--font-heading); font-size: clamp(32px, 4vw, 56px); font-weight: 500; line-height: 1.2; letter-spacing: -.04em; }
.benchmark-count { max-width: 34ch; margin: 24px 0 0; color: #62675f; font-size: inherit; line-height: 1.7; text-wrap: pretty; }
.benchmark-baseline { margin-top: auto; padding-top: 24px; border-top: 1px solid #e0e5da; }
.benchmark-baseline p { margin: 0; color: #62675f; font-size: inherit; }
.benchmark-baseline strong { color: #30372a; font-weight: 500; }
.benchmark-comparison-end { white-space: nowrap; }
.benchmark-learn-more { position: relative; color: #45513e; white-space: nowrap; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.benchmark-learn-more::after { content: ""; position: absolute; inset: -10px -2px; }
.benchmark-learn-more:hover { color: #20251b; }
.benchmark-learn-more:focus-visible { outline: 2px solid #4a6640; outline-offset: 4px; border-radius: 2px; }
@media (max-width: 820px) {
  .benchmark-section { padding-bottom: 64px; }
  .benchmark-label { margin-bottom: 12px; }
  .benchmark-baseline { padding-top: 16px; }
}
@media (max-width: 680px) {
  .benchmark-section { padding-inline: 16px; }
  .benchmark-layout { grid-template-columns: minmax(0, 1fr); }
  .benchmark-result { padding: 28px 20px; text-align: center; }
  .benchmark-headline { font-size: clamp(28px, 7.5vw, 44px); }
  .benchmark-count { margin-top: 20px; }
  .benchmark-primary { padding-block: 0 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .benchmark-section .clarity-lens img { animation: none; transform: none; filter: none; }
  .clarity-video, .video-dither-canvas { display: none; }
}
.real-data-copy { margin: 0; color: #62675f; font-family: var(--font-heading); font-size: clamp(28px, 3.1vw, 44px); font-weight: 500; line-height: 1.5; letter-spacing: -.025em; text-align: center; text-wrap: pretty; }
.real-data-opening, .real-data-promise { color: #20251b; }
.real-data-copy .reveal-word { display: inline-block; line-height: 1.1; white-space: nowrap; }
.real-data-copy .reveal-char { display: inline-block; }
.reveal-accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.real-data-copy[data-reveal="ready"] .reveal-char, .real-data-copy[data-reveal="playing"] .reveal-char { opacity: 0; }
.real-data-copy[data-reveal="playing"] .reveal-char { animation: letter-pixel-reveal 500ms steps(1, end) var(--reveal-delay) forwards; }
.real-data-copy[data-reveal="ready"] .markets-label.reveal-word, .real-data-copy[data-reveal="playing"] .markets-label.reveal-word { opacity: 0; }
.real-data-copy[data-reveal="playing"] .markets-label.reveal-word { animation: brand-label-appear 1ms step-end var(--word-delay) forwards; }
@keyframes brand-label-appear { to { opacity: 1; } }
@keyframes letter-pixel-reveal {
  0% { opacity: 1; color: var(--reveal-color); mask-image: repeating-conic-gradient(#000 0 25%, transparent 0 50%); mask-size: 12px 12px; }
  20% { opacity: 1; color: var(--reveal-color); mask-image: repeating-conic-gradient(#000 0 25%, transparent 0 50%); mask-size: 3px 3px; }
  60% { opacity: 1; color: var(--reveal-color); mask-image: none; }
  100% { opacity: 1; color: inherit; mask-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  .real-data-copy .reveal-word, .real-data-copy .reveal-char { animation: none !important; opacity: 1 !important; }
}
@media (max-width: 680px) {
  .real-data-section { padding: 80px 24px 128px; }
}