/* Local product illustrations: wide workflow on desktop, vertical stages on phones. */
.mini-ledger { display: grid; gap: 8px; }
.mini-ledger > div { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--fg-mute); }
.mini-ledger .mini-status { color: var(--accent); }
.mini-sync { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 72px; }
.mini-system { display: flex; align-items: center; gap: 5px; font-size: 10px; }
.mini-system svg { color: var(--accent); }
.sync-link { color: var(--accent); font-size: 20px; }
.mini-chat { display: grid; gap: 8px; padding-top: 4px; font-size: 10px; }
.mini-chat > span { display: flex; align-items: center; gap: 6px; border-radius: 7px; padding: 9px; background: rgba(255,255,255,.04); }
.mini-chat .mini-chat-reply { justify-self: end; color: var(--accent); background: rgba(168,245,208,.07); }
.mini-workflow { display: flex; justify-content: space-between; align-items: center; gap: 4px; min-height: 72px; font-size: 9px; }
.mini-workflow > span { border: 1px solid var(--line); border-radius: 5px; padding: 9px 6px; }
.mini-workflow i { color: var(--fg-mute); font-style: normal; }
.mini-workflow .workflow-condition { color: var(--accent); border-color: rgba(168,245,208,.25); }
.tech-hero { position: relative; padding: 106px 0 72px; overflow: clip; }
.tech-hero-copy { text-align: center; max-width: 1000px; margin: 0 auto; }
.tech-hero .hero-heading { font-size: clamp(38px, 5.8vw, 72px); line-height: 1.07; margin-inline: auto; font-weight: 500; letter-spacing: -.045em; }
.tech-hero-copy .eyebrow { margin-top: 30px; }
.hero-scope-chip { font-size: 12px; min-height: 32px; height: auto; white-space: normal; line-height: 1.5; padding: 7px 12px; }
.tech-hero-description { max-width: 720px; margin: 24px auto 0; font-size: clamp(15px, 1.45vw, 18px); line-height: 1.65; }
.tech-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.hero-proof-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin-top: 22px; }
.hero-proof-grid > span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-dim); }
.hero-proof-grid svg { color: var(--accent); }
.hero-workflow-wrap { max-width: 1080px; margin: 44px auto 0; }
.workflow-showcase { container-type: inline-size; min-width: 0; border: 1px solid rgba(168,245,208,.18); border-radius: 16px; background: #101414; box-shadow: 0 32px 100px -55px #000, 0 0 70px -45px rgba(168,245,208,.45); overflow: clip; }
.workflow-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.015); }
.workflow-tabs { display: flex; gap: 4px; min-width: 0; }
.workflow-tabs button { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--fg-dim); cursor: pointer; font: inherit; font-size: 12px; transition: color 180ms, background 180ms, border-color 180ms; }
.workflow-tabs button[aria-pressed="true"] { color: var(--accent); background: rgba(168,245,208,.07); border-color: rgba(168,245,208,.14); }
.workflow-tabs button:hover { color: var(--fg); background: rgba(255,255,255,.04); }
.workflow-example { display: flex; align-items: center; gap: 7px; color: var(--fg-mute); font-size: 10px; }
.workflow-canvas { padding: clamp(18px, 3cqi, 32px); background-image: radial-gradient(rgba(168,245,208,.1) .65px, transparent .65px); background-size: 16px 16px; }
.workflow-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.workflow-meta > .mono { color: var(--fg-mute); font-size: 10px; letter-spacing: .06em; }
.workflow-run-status { color: var(--accent); border: 1px solid rgba(168,245,208,.16); border-radius: 99px; padding: 5px 9px; font-size: 10px; white-space: nowrap; }
.workflow-graph { display: grid; grid-template-columns: 1fr 32px 1fr 32px 1fr 32px 1fr; align-items: center; margin: 38px 0; }
.workflow-node { position: relative; display: flex; flex-direction: column; text-align: left; gap: 14px; min-width: 0; min-height: 148px; padding: 18px; background: #141a18; border: 1px solid #2b3530; border-radius: 10px; color: var(--fg-dim); font: inherit; cursor: pointer; transition: border-color 350ms, background 350ms, box-shadow 350ms, transform 500ms cubic-bezier(.22,1,.36,1); }
.workflow-node-top { display: flex; align-items: center; justify-content: space-between; color: var(--fg-mute); font-size: 9px; }
.workflow-node-icon { color: var(--fg-dim); }
.workflow-node strong { font-size: 14px; font-weight: 500; line-height: 1.4; }
.workflow-node small { color: var(--fg-mute); font-size: 10px; line-height: 1.5; margin-top: auto; }
.workflow-node.node-active { border-color: rgba(168,245,208,.55); background: #1d2c24; color: var(--fg); box-shadow: 0 0 32px rgba(168,245,208,.08); transform: translateY(-4px); }
.node-active .workflow-node-icon, .node-complete .workflow-node-top { color: var(--accent); }
.workflow-node.node-complete { border-color: rgba(168,245,208,.25); color: var(--fg); }
.workflow-node-port { position: absolute; top: 50%; width: 7px; height: 7px; background: #46584c; border: 1px solid #111; border-radius: 50%; transform: translateY(-50%); }
.port-in { left: -4px; } .port-out { right: -4px; }
.node-active .workflow-node-port, .node-complete .workflow-node-port { background: var(--accent); }
.workflow-edge { position: relative; height: 1px; width: 100%; background: #35453b; }
.edge-complete { background: rgba(168,245,208,.45); }
.workflow-edge i { position: absolute; width: 8px; height: 3px; top: -1px; left: 0; background: var(--accent); box-shadow: 0 0 8px var(--accent); opacity: 0; }
[data-playing="true"] .edge-active i { opacity: 1; animation: workflow-transfer 1.2s ease-in-out infinite; }
@keyframes workflow-transfer { from { left: 0; opacity: 0; } 35% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }
.workflow-event { display: flex; align-items: center; gap: 14px; min-height: 82px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 9px; background: rgba(15,20,17,.93); animation: workflow-event-in 400ms ease-out; }
@keyframes workflow-event-in { from { opacity: .55; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.workflow-event-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(168,245,208,.2); border-radius: 8px; flex-shrink: 0; color: var(--accent); }
.workflow-event strong { display: block; font-size: 13px; font-weight: 500; }
.workflow-event p { font-size: 11px; margin-top: 6px; color: var(--fg-mute); }
.workflow-event-count { margin-left: auto; font-size: 10px; color: var(--fg-mute); white-space: nowrap; }
.workflow-note { padding: 10px 18px 12px; font-size: 10px; color: var(--fg-mute); border-top: 1px solid var(--line); }
.demo-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 8px 18px; border-top: 1px solid var(--line); font-size: 10px; color: var(--fg-mute); }
.demo-controls > span { display: flex; gap: 6px; align-items: center; }
.demo-controls > div { display: flex; gap: 4px; }
.demo-controls button { font: inherit; color: var(--fg-dim); background: transparent; border: 1px solid transparent; border-radius: 6px; min-height: 36px; padding: 0 9px; cursor: pointer; }
.demo-controls button:hover { color: var(--fg); background: rgba(255,255,255,.05); }
.demo-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.workflow-showcase button:focus-visible, .product-scene button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* At narrow container widths the diagram becomes a vertical, fully readable process. */
@container (max-width: 700px) {
  .workflow-toolbar { flex-wrap: wrap; padding: 10px; }
  .workflow-tabs { width: 100%; }
  .workflow-tabs button { flex: 1; justify-content: center; padding: 0 8px; font-size: 11px; }
  .workflow-example { padding: 0 8px 4px; }
  .workflow-graph { display: flex; flex-direction: column; margin: 24px 0; }
  .workflow-node { width: 100%; min-height: 110px; gap: 8px; padding: 14px 18px; }
  .workflow-node.node-active { transform: translateX(3px); }
  .workflow-edge { width: 1px; height: 24px; }
  .workflow-edge i { width: 3px; height: 7px; top: 0; left: -1px; }
  [data-playing="true"] .edge-active i { animation-name: workflow-transfer-vertical; }
  .workflow-node-port { left: 50%; top: auto; transform: translateX(-50%); }
  .port-in { top: -4px; } .port-out { bottom: -4px; }
  .workflow-event-count { display: none; }
  .workflow-meta > .mono { font-size: 9px; line-height: 1.6; }
}
@keyframes workflow-transfer-vertical { from { top: 0; opacity: 0; } 35% { opacity: 1; } to { top: calc(100% - 7px); opacity: 0; } }
.audience-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; }
@media (min-width: 700px) { .audience-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
[data-motion] { backface-visibility: hidden; }
.feature-scenes { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; margin-top: 32px; }
.feature-story { min-width: 0; display: flex; flex-direction: column; }
.feature-story-copy { padding: 8px 0 24px; }
.feature-number { color: var(--accent); font-size: 10px; letter-spacing: .12em; }
.feature-story h3 { font-size: clamp(23px,2vw,28px); line-height: 1.25; font-weight: 500; margin: 14px 0 12px; }
.feature-story-copy p { max-width: 500px; font-size: 15px; line-height: 1.65; }
.product-scene { display: flex; flex-direction: column; min-width: 0; margin-top: auto; border: 1px solid var(--line); border-radius: 12px; overflow: clip; background: linear-gradient(135deg,#171d1b,#101414); }
.tech-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--fg-dim); }
.tech-card-head > span:first-child { display: flex; align-items: center; gap: 8px; }
.tech-card-head svg { color: var(--accent); }
.tech-tag { font-size: 9px; color: var(--fg-mute); border: 1px solid var(--line); border-radius: 5px; padding: 4px 6px; }
.check-file { display: flex; align-items: center; gap: 12px; padding: 20px; }
.file-icon { display: grid; place-items: center; width: 38px; height: 44px; background: rgba(168,245,208,.06); border: 1px solid rgba(168,245,208,.15); border-radius: 5px; color: var(--accent); }
.check-file strong { display: block; font-size: 13px; font-weight: 500; }
.check-file small { display: block; font-size: 10px; color: var(--fg-mute); margin-top: 6px; }
.check-file > .tech-tag { margin-left: auto; }
.check-fields { display: grid; gap: 0; padding: 0 20px 16px; }
.check-fields > div { display: flex; align-items: center; gap: 8px; min-height: 38px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--fg-mute); }
.check-fields strong { font-weight: 500; color: var(--fg-dim); margin-left: auto; }
.field-mark { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; color: #45534b; transition: color 350ms, background 350ms, transform 350ms; }
.field-passed .field-mark { color: var(--accent); background: rgba(168,245,208,.08); transform: scale(1.06); }
.tech-outcome { display: flex; align-items: center; gap: 7px; padding: 0 20px 18px; font-size: 10px; color: var(--accent); margin-top: auto; }
.decision-route { display: flex; align-items: center; gap: 10px; padding: 20px; }
.decision-system { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--accent); }
.decision-route-line { flex: 1; height: 1px; background: linear-gradient(90deg,rgba(168,245,208,.3),rgba(168,245,208,.08)); }
.decision-person { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #253c30; color: var(--accent); font-size: 10px; }
.decision-route strong { font-size: 11px; font-weight: 500; }
.decision-route small { display: block; font-size: 9px; margin-top: 4px; color: var(--fg-mute); }
.decision-task { padding: 14px; margin: 0 20px 16px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.02); }
.decision-task > .mono { font-size: 8px; color: var(--fg-mute); }
.decision-task > strong { display: block; font-size: 13px; font-weight: 500; margin: 10px 0 6px; }
.decision-task p { font-size: 10px; }
.decision-options { display: flex; gap: 8px; margin-top: 16px; font-size: 9px; }
.decision-options > span { display: flex; align-items: center; justify-content: center; gap: 5px; flex: 1; min-height: 30px; border: 1px solid var(--line); border-radius: 5px; color: var(--fg-mute); transition: background 350ms, color 350ms, border-color 350ms; }
.decision-options > .selected { background: rgba(168,245,208,.1); color: var(--accent); border-color: rgba(168,245,208,.24); }
.feature-notice { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--fg-mute); line-height: 1.6; margin: 20px 0 36px; }
.feature-notice svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.solutions-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; padding: 22px 0; border-top: 1px solid var(--line); font-size: 12px; }
.solutions-links > span { color: var(--fg-mute); }
.solutions-links a { color: var(--fg-dim); }
.solutions-links a:hover { color: var(--accent); }
@media (min-width: 800px) { .feature-scenes { grid-template-columns: repeat(2,minmax(0,1fr)); } .feature-story .product-scene { min-height: 348px; } }
@media (max-width: 699px) { .tech-hero { padding-top: 88px; } .tech-hero-copy .eyebrow { font-size: 9px; } .hero-proof-grid { gap: 10px 16px; } .hero-proof-grid > span { font-size: 10px; } .demo-controls button, .workflow-tabs button { min-height: 44px; } .hero-workflow-wrap { margin-top: 32px; } .solutions-links a { display: inline-flex; align-items: center; min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { [data-motion] { transform: none !important; opacity: 1 !important; clip-path: none !important; } .workflow-edge i { animation: none !important; } .workflow-node, .workflow-event, .field-mark, .decision-options > span { animation: none !important; transition: none !important; } }
.onec-mark { color: #eccc84; font-size: 17px; font-weight: 700; }
/* Share heading and panel rows, so both feature panels align without fixed heights. */
@media (min-width: 800px) {
  .feature-scenes { grid-template-rows: auto auto; }
  .feature-story { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
  .feature-story > .product-scene { margin-top: 0; align-self: stretch; }
}
/* Original hero composition: foreground copy overlaps a dim decorative dashboard. */
.original-hero { padding-top: 92px; padding-bottom: 72px; }
.original-hero-stage { position: relative; min-height: 500px; isolation: isolate; }
.original-hero .tech-hero-copy { position: relative; z-index: 2; text-align: left; max-width: 880px; margin: 0; }
.original-hero .hero-heading { margin-inline: 0; font-size: clamp(40px, 5.6vw, 74px); line-height: 1.06; letter-spacing: -.04em; }
.original-hero .h1-word:first-child { display: block; }
.original-hero .tech-hero-description { max-width: 620px; margin: 24px 0 0; font-size: clamp(15px, 1.4vw, 17px); }
.original-hero .tech-hero-actions { justify-content: flex-start; }
.original-hero .hero-proof-grid { justify-content: flex-start; max-width: 720px; gap: 10px; }
.original-hero .hero-proof-grid > span { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.025); }
.original-hero-art { display: none; position: absolute; right: 20px; top: 34px; width: 61%; max-width: 760px; z-index: 1; pointer-events: none; opacity: .68; mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.14) 28%, #000 72%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.14) 28%, #000 72%); }
.original-hero-art .mockup-tilt { transform: perspective(2000px) rotateY(-8deg) rotateX(2deg); }
.original-hero-art .hero-product-grid { min-width: 0; }
.original-hero-art .cockpit-panel { min-width: 0; }
.process-demo-section .hero-workflow-wrap { max-width: none; margin-top: 32px; }
@media (min-width: 900px) { .original-hero-art { display: block; } }
@media (max-width: 699px) {
  .original-hero { padding-top: 88px; padding-bottom: 48px; }
  .original-hero-stage { min-height: auto; }
  .original-hero .hero-heading { font-size: clamp(36px, 8.5vw, 52px); }
  .original-hero .hero-proof-grid > span { padding: 0 10px; }
}