@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&display=swap');

:root {
  --midnight: #0b1020;
  --midnight-2: #11182d;
  --midnight-3: #18213d;
  --cobalt: #2448d8;
  --cobalt-soft: #cbd8ff;
  --coral: #ff695e;
  --coral-dark: #d84b43;
  --cream: #f0e8da;
  --cream-2: #e6dccb;
  --ink: #11182d;
  --ink-soft: #596174;
  --white: #fffaf1;
  --line-dark: rgba(203, 216, 255, .16);
  --line-light: rgba(17, 24, 45, .14);
  --amber: #f4b860;
  --success: #7ca8ff;
  --shadow-dark: 0 28px 80px rgba(0, 0, 0, .34);
  --shadow-light: 0 24px 60px rgba(27, 31, 52, .13);
  --radius-lg: 28px;
  --radius-md: 18px;
  --font: "Neue Montreal", "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--cream); background: var(--midnight); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body.light-page { color: var(--ink); background: var(--cream); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

.shell { width: min(1180px, calc(100% - 44px)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 50; background: var(--midnight); }
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 78px; padding: 0 26px; }
.site-header .nav.shell { width: 100%; max-width: none; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--cream); font-size: 22px; font-weight: 800; letter-spacing: -.035em; }
.brand-mark { position: relative; width: 32px; height: 32px; border-radius: 10px; background: var(--coral); box-shadow: inset 0 0 0 1px rgba(11,16,32,.15); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; left: 9px; background: var(--midnight); }
.brand-mark::before { top: 8px; width: 15px; height: 4px; border-radius: 2px; }
.brand-mark::after { top: 8px; width: 4px; height: 16px; border-radius: 2px; }
.nav-links { display: flex; align-items: center; gap: 3px; }
.nav-link, .solutions-trigger { display: flex; align-items: center; gap: 7px; padding: 11px 13px; border: 0; border-radius: 10px; color: #c4cbe0; background: transparent; cursor: pointer; font-size: 13px; font-weight: 650; }
.nav-link:hover, .solutions-trigger:hover, .nav-link.active { color: var(--cream); background: rgba(203,216,255,.08); }
.solutions { position: relative; }
.solutions-trigger svg { transition: transform .2s ease; }
.solutions.open .solutions-trigger svg { transform: rotate(180deg); }
.solutions-menu { position: absolute; top: calc(100% + 12px); left: 50%; display: none; width: 370px; padding: 10px; border: 1px solid var(--line-dark); border-radius: 18px; background: #151d35; box-shadow: var(--shadow-dark); transform: translateX(-50%); }
.solutions.open .solutions-menu { display: grid; }
.solution-link { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 13px; border-radius: 13px; }
.solution-link:hover { background: rgba(203,216,255,.07); }
.solution-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; color: var(--midnight); background: var(--cobalt-soft); font-size: 12px; font-weight: 800; }
.solution-link:nth-child(2) .solution-icon { background: #f6b2ac; }
.solution-link:nth-child(3) .solution-icon { background: #f5d19c; }
.solution-link strong { display: block; margin: 1px 0 4px; color: var(--cream); font-size: 13px; }
.solution-link small { display: block; color: #9ca6c0; font-size: 11px; line-height: 1.45; }
.mobile-toggle { display: none; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-dark); border-radius: 11px; background: transparent; cursor: pointer; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 19px; border: 1px solid transparent; border-radius: 11px; cursor: pointer; font-size: 13px; font-weight: 750; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-coral { color: var(--midnight); background: var(--coral); box-shadow: 0 12px 28px rgba(255,105,94,.2); }
.button-coral:hover { background: #ff7c72; }
.button-ghost { border-color: var(--line-dark); color: var(--cream); background: rgba(203,216,255,.045); }
.button-ink { color: var(--cream); background: var(--midnight); box-shadow: 0 12px 28px rgba(11,16,32,.2); }
.button-outline { border-color: var(--line-light); color: var(--ink); background: transparent; }
.nav-cta { min-height: 44px; padding-inline: 16px; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--coral); font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; }
h1, h2, h3, p { text-wrap: pretty; }
h1 { margin: 20px 0 25px; font-size: clamp(52px, 6.3vw, 82px); line-height: 1.01; letter-spacing: -.043em; }
h2 { margin: 14px 0 0; font-size: clamp(39px, 4.6vw, 61px); line-height: 1.06; letter-spacing: -.038em; }
h3 { letter-spacing: -.025em; }
.lede { max-width: 680px; margin: 0; color: #b3bdd5; font-size: 18px; line-height: 1.72; }
.section-copy { color: var(--ink-soft); font-size: 17px; line-height: 1.72; }
.section-copy.dark { color: #abb5cf; }

.hero { position: relative; overflow: hidden; padding: 80px 0 112px; }
.hero::before { content: ""; position: absolute; width: 740px; height: 740px; right: -240px; top: -250px; border-radius: 50%; background: radial-gradient(circle, rgba(36,72,216,.34), rgba(36,72,216,.07) 48%, transparent 70%); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: .94fr 1.06fr; align-items: center; gap: 66px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 32px; }
.hero-note { display: flex; align-items: center; gap: 9px; margin-top: 23px; color: #8f9ab5; font-size: 12px; }
.hero-note i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(255,105,94,.1); }

.hero-machine { position: relative; min-height: 570px; }
.machine-glow { position: absolute; inset: 8% -6% 1% 7%; border-radius: 50%; background: radial-gradient(circle, rgba(36,72,216,.28), transparent 68%); filter: blur(20px); }
.machine-window { position: relative; z-index: 2; margin-top: 18px; overflow: hidden; border: 1px solid rgba(203,216,255,.22); border-radius: 24px; background: #11182d; box-shadow: 0 38px 90px rgba(0,0,0,.42); transform: perspective(1300px) rotateY(-4deg) rotateX(1.5deg); }
.window-bar { display: flex; align-items: center; justify-content: space-between; min-height: 55px; padding: 0 17px; border-bottom: 1px solid var(--line-dark); background: #151d35; }
.window-title { color: #d7def0; font-size: 11px; font-weight: 750; }
.window-live { display: flex; align-items: center; gap: 7px; color: #9ebcff; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.window-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7ca8ff; animation: pulse 1.8s infinite; }
.machine-content { display: grid; grid-template-columns: 104px 1fr; min-height: 440px; }
.machine-side { padding: 18px 10px; border-right: 1px solid var(--line-dark); background: #0e1426; }
.machine-side small { display: block; margin: 0 7px 11px; color: #68738e; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.machine-nav { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; padding: 8px 7px; border-radius: 8px; color: #7f8aa4; font-size: 8px; font-weight: 650; }
.machine-nav.active { color: var(--cream); background: #1a2340; }
.machine-nav i { width: 7px; height: 7px; border-radius: 2px; background: #53607d; }
.machine-nav.active i { background: var(--coral); }
.machine-main { padding: 22px 20px; }
.machine-heading { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 19px; }
.machine-heading small { display: block; color: #77839f; font-size: 8px; }
.machine-heading strong { display: block; margin-top: 5px; color: var(--cream); font-size: 15px; }
.health-pill { align-self: start; padding: 7px 9px; border-radius: 8px; color: #b8caff; background: rgba(36,72,216,.22); font-size: 8px; font-weight: 800; }
.mini-steps { display: grid; gap: 9px; }
.mini-step { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; min-height: 57px; padding: 10px 11px; border: 1px solid var(--line-dark); border-radius: 12px; background: #151d35; transition: border .35s ease, background .35s ease, transform .35s ease; }
.mini-step.active { border-color: rgba(255,105,94,.55); background: #211b30; transform: translateX(4px); }
.mini-step.done .mini-icon { color: var(--midnight); background: var(--cobalt-soft); }
.mini-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; color: #9eabc8; background: #222c49; font-size: 10px; font-weight: 850; }
.mini-step.active .mini-icon { color: var(--midnight); background: var(--coral); }
.mini-step strong { display: block; color: #dce2f1; font-size: 10px; }
.mini-step small { display: block; margin-top: 3px; color: #77839f; font-size: 7px; }
.mini-tag { padding: 5px 6px; border-radius: 6px; color: #8f9bb7; background: rgba(203,216,255,.06); font-size: 6px; font-weight: 900; letter-spacing: .06em; }
.mini-step.active .mini-tag { color: #ffaaa3; background: rgba(255,105,94,.11); }
.machine-float { position: absolute; z-index: 4; padding: 13px 15px; border: 1px solid var(--line-dark); border-radius: 14px; background: rgba(21,29,53,.94); box-shadow: 0 18px 40px rgba(0,0,0,.28); backdrop-filter: blur(12px); }
.machine-float strong { display: block; color: var(--cream); font-size: 10px; }
.machine-float small { display: block; margin-top: 4px; color: #8995af; font-size: 8px; }
.machine-float.one { right: -24px; top: 126px; }
.machine-float.two { left: -27px; bottom: 34px; }

/* Hero: Telic coordinating work in the target application */
.hero-runtime { position: relative; overflow: hidden; border: 1px solid rgba(203,216,255,.2); border-radius: 24px; background: rgba(17,24,45,.78); box-shadow: 0 38px 90px rgba(0,0,0,.38); }
.runtime-explainer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 4px 5px 14px; }
.runtime-explainer span { color: var(--coral); font-size: 8px; font-weight: 850; letter-spacing: .1em; }
.runtime-explainer strong { color: #cbd3e6; font-size: 10px; }
.runtime-split { position: relative; display: grid; grid-template-columns: 1.08fr 30px .92fr; min-height: 430px; overflow: hidden; background: #0c1222; }
.visual-label { display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; color: #8e99b3; background: #121a30; font-size: 7px; font-weight: 850; letter-spacing: .08em; }
.visual-label i { width: 6px; height: 6px; border-radius: 50%; background: #7ca8ff; }
.business-app { min-width: 0; background: #dde2eb; color: #263047; }
.app-chrome { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 11px; color: #687389; background: #f4f6f9; font-size: 7px; }
.app-layout { display: grid; grid-template-columns: 58px 1fr; min-height: 364px; }
.app-layout aside { display: grid; align-content: start; gap: 8px; padding: 12px 6px; color: #68748b; background: #cbd2de; font-size: 6px; text-align: center; }
.app-layout aside b { display: grid; place-items: center; width: 29px; height: 29px; margin: 0 auto 6px; border-radius: 8px; color: #fff; background: #31405f; font-size: 8px; }
.app-layout aside span { padding: 7px 2px; border-radius: 6px; }
.app-layout aside span:first-of-type { color: #fff; background: #31405f; }
.app-workspace { padding: 14px 12px; }
.app-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.app-title small, .control-head small { display: block; color: #7c879c; font-size: 6px; font-weight: 800; letter-spacing: .07em; }
.app-title strong { display: block; margin-top: 4px; font-size: 11px; }
.app-title > span { padding: 5px 7px; border-radius: 5px; color: #5f6b82; background: #cbd2dd; font-size: 6px; font-weight: 800; }
.app-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.app-fields label { position: relative; display: block; padding: 8px; border: 1px solid #c4cbd6; border-radius: 6px; color: #7a8498; background: #f6f7f9; font-size: 5px; font-weight: 850; letter-spacing: .05em; }
.app-fields label b { display: block; margin-top: 5px; color: #2c3549; font-size: 7px; letter-spacing: 0; }
.app-fields .wide { grid-column: 1 / -1; }
.app-fields label em, .app-table em { display: none; position: absolute; right: 7px; top: 6px; padding: 3px 5px; border-radius: 4px; color: #fff; background: var(--coral-dark); font-size: 5px; font-style: normal; }
.app-fields [data-hero-step].is-current, .app-table.is-current { position: relative; border: 2px solid var(--coral) !important; box-shadow: 0 0 0 4px rgba(255,105,94,.13); }
.app-fields [data-hero-step].is-current em, .app-table.is-current em { display: block; }
.app-table { position: relative; display: grid; grid-template-columns: 1fr 35px 50px; gap: 5px; margin-top: 10px; padding: 9px; border: 1px solid transparent; border-radius: 7px; background: #f6f7f9; }
.app-table span { color: #8992a5; font-size: 5px; font-weight: 850; }
.app-table b { padding-top: 6px; border-top: 1px solid #d8dce4; font-size: 6px; }
.control-link { position: relative; z-index: 2; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--coral); background: #0b1020; text-align: center; }
.control-link span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255,105,94,.45); border-radius: 50%; background: #17182b; font-size: 16px; animation: link-pulse 1.8s ease-in-out infinite; }
.control-link small { color: #7c88a3; font-size: 5px; font-weight: 850; line-height: 1.45; }
.telic-control { min-width: 0; background: #11182d; }
.telic-control .visual-label i { background: var(--coral); }
.control-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; padding: 15px 13px 12px; }
.control-head strong { display: block; margin-top: 5px; color: #e3e7f1; font-size: 9px; line-height: 1.35; }
.control-head > span { padding: 5px 6px; border-radius: 5px; color: #ffaaa3; background: rgba(255,105,94,.12); font-size: 5px; font-weight: 900; }
.control-flow { padding: 3px 13px 10px; }
.control-step { display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line-dark); border-radius: 9px; background: #171f37; opacity: .56; }
.control-step i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; color: #9da8bf; background: #222c49; font-size: 8px; font-style: normal; font-weight: 850; }
.control-step b, .control-step small { display: block; }
.control-step b { color: #d7deed; font-size: 7px; }
.control-step small { margin-top: 3px; color: #7d89a3; font-size: 5px; }
.control-step.complete { opacity: .82; }
.control-step.complete i { color: var(--midnight); background: var(--cobalt-soft); }
.control-step.current { border-color: rgba(255,105,94,.6); background: #261b2c; opacity: 1; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.control-step.current i { color: var(--midnight); background: var(--coral); }
.flow-line { width: 1px; height: 7px; margin-left: 21px; background: #303a55; }
.flow-line.done { background: #7188dd; }
.flow-line.running { background: var(--coral); box-shadow: 0 0 8px var(--coral); }
.control-status { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 9px; margin: 4px 13px 13px; padding: 9px; border: 1px solid rgba(255,105,94,.22); border-radius: 9px; background: rgba(255,105,94,.07); }
.status-eye { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--coral); background: rgba(255,105,94,.11); }
.control-status small, .control-status strong { display: block; }
.control-status small { color: #8e99b3; font-size: 5px; font-weight: 850; }
.control-status strong { margin-top: 3px; color: #e0e5f1; font-size: 7px; }
.visual-caption { margin: 13px 5px 2px; color: #9ca7be; font-size: 9px; line-height: 1.55; }

.cream-section { color: var(--ink); background: var(--cream); }
.dark-section { color: var(--cream); background: var(--midnight); }
.blue-section { color: var(--cream); background: var(--cobalt); }
.section { padding: 112px 0; }
.section-heading { display: grid; grid-template-columns: .88fr 1.12fr; align-items: end; gap: 70px; margin-bottom: 52px; }
.section-heading .eyebrow { color: var(--coral-dark); }
.dark-section .section-heading .eyebrow { color: var(--coral); }

.execution-layout { display: grid; grid-template-columns: 1.08fr .92fr; gap: 28px; }
.rpa-comparison { overflow: hidden; border: 1px solid rgba(17,24,45,.16); border-radius: var(--radius-lg); background: #dcd3c5; box-shadow: var(--shadow-light); }
.comparison-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 19px; color: var(--ink); }
.comparison-head span { color: var(--coral-dark); font-size: 7px; font-weight: 900; letter-spacing: .09em; }
.comparison-head strong { font-size: 11px; }
.comparison-lanes { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
.comparison-lane { display: flex; flex-direction: column; min-width: 0; padding: 17px; background: #f1eadf; }
.comparison-lane + .comparison-lane { border-left: 1px solid rgba(17,24,45,.15); }
.telic-lane { background: var(--midnight); color: var(--cream); }
.lane-title span { display: block; margin-bottom: 6px; color: #87808a; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.lane-title strong { display: block; color: var(--ink); font-size: 15px; }
.telic-lane .lane-title span { color: var(--coral); }
.telic-lane .lane-title strong { color: var(--cream); }
.lane-app { overflow: hidden; margin-top: 15px; border: 1px solid rgba(17,24,45,.14); border-radius: 10px; background: #dde2eb; color: #2b3448; }
.lane-appbar { display: flex; justify-content: space-between; padding: 8px; color: #707a8e; background: #f7f8fa; font-size: 6px; font-weight: 800; }
.screen-change { margin: 11px; padding: 11px; border: 2px solid #b75a55; border-radius: 8px; background: #fff5f3; }
.screen-change > span { display: inline-flex; margin-bottom: 6px; padding: 3px 4px; border-radius: 4px; color: #fff; background: #a94b47; font-size: 5px; font-weight: 900; }
.screen-change strong, .screen-change small { display: block; }
.screen-change strong { font-size: 8px; }
.screen-change small { margin-top: 4px; color: #747e91; font-size: 6px; line-height: 1.4; }
.screen-change.resolved { border-color: var(--cobalt); background: #eef2ff; }
.screen-change.resolved > span { background: var(--cobalt); }
.path-stack { flex: 1; padding: 15px 4px; }
.path-node { display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 8px; min-height: 43px; padding: 7px; border: 1px solid rgba(17,24,45,.14); border-radius: 8px; color: #31394c; background: rgba(255,255,255,.42); }
.path-node i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 6px; color: var(--midnight); background: #cbd2dd; font-size: 8px; font-style: normal; font-weight: 900; }
.path-node span { font-size: 7px; font-weight: 750; }
.path-node b { grid-column: 2; color: #9a4541; font-size: 5px; letter-spacing: .05em; }
.path-node.done i { background: var(--cobalt-soft); }
.path-node.failed { border-color: #b75a55; background: #fff0ed; }
.path-node.failed i { color: #fff; background: #a94b47; }
.path-node.muted { opacity: .42; }
.path-connector { width: 1px; height: 10px; margin-left: 19px; background: #8a93a5; }
.path-connector.muted { opacity: .3; }
.telic-lane .path-node { border-color: var(--line-dark); color: #dbe1ee; background: #171f37; }
.telic-lane .path-node.adapt { border-color: rgba(255,105,94,.6); background: #251b2c; }
.telic-lane .path-node.adapt i { background: var(--coral); }
.telic-lane .path-node.adapt b { color: #ffaaa3; }
.telic-lane .path-connector { background: #405074; }
.telic-lane .path-connector.done { background: var(--coral); }
.lane-outcome { display: grid; grid-template-columns: 31px 1fr; align-items: center; gap: 9px; padding: 10px; border-radius: 9px; }
.lane-outcome i { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 7px; font-style: normal; font-weight: 900; }
.lane-outcome b, .lane-outcome small { display: block; }
.lane-outcome b { font-size: 8px; }
.lane-outcome small { margin-top: 3px; font-size: 6px; opacity: .72; }
.lane-outcome.failed { color: #753a37; background: #f1c7c2; }
.lane-outcome.failed i { color: #fff; background: #a94b47; }
.lane-outcome.success { color: #e5eaff; background: #19336a; }
.lane-outcome.success i { color: var(--midnight); background: var(--cobalt-soft); }
.execution-stage { min-height: 690px; padding: 16px; border: 1px solid var(--line-light); border-radius: var(--radius-lg); background: #dcd3c5; box-shadow: var(--shadow-light); }
.sequence-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 4px 5px 14px; }
.sequence-kicker { display: block; margin-bottom: 4px; color: #7a7080; font-size: 7px; font-weight: 850; letter-spacing: .1em; }
.sequence-title { display: block; min-height: 20px; color: var(--ink); font-size: 13px; }
.autoplay-label { display: flex; align-items: center; gap: 7px; color: #716979; font-size: 7px; font-weight: 850; letter-spacing: .08em; }
.autoplay-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral-dark); animation: pulse-coral 1.4s infinite; }
.sequence-nav { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; margin-bottom: 11px; }
.sequence-step { position: relative; overflow: hidden; display: grid; gap: 3px; padding: 9px 7px; border: 1px solid rgba(17,24,45,.13); border-radius: 9px; color: #746d78; background: rgba(255,250,241,.42); cursor: pointer; font-size: 7px; font-weight: 800; text-align: left; transition: color .25s ease, background .25s ease, transform .25s ease; }
.sequence-step::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 3px; background: var(--coral-dark); transition: right 2s linear; }
.sequence-step span { font-size: 6px; opacity: .64; }
.sequence-step.passed { color: var(--cobalt); background: rgba(203,216,255,.55); }
.sequence-step.active { color: var(--midnight); background: var(--coral); transform: translateY(-2px); }
.sequence-step.active::after { right: 0; }
.execution-shell { overflow: hidden; min-height: 558px; border-radius: 18px; color: var(--cream); background: var(--midnight); }
.execution-bar { display: flex; align-items: center; justify-content: space-between; min-height: 55px; padding: 0 17px; border-bottom: 1px solid var(--line-dark); background: var(--midnight-2); }
.execution-bar strong { font-size: 11px; }
.execution-controls { display: flex; gap: 7px; }
.execution-controls span { padding: 6px 8px; border-radius: 7px; color: #9ba6c0; background: rgba(203,216,255,.07); font-size: 7px; font-weight: 800; }
.execution-body { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 503px; }
.task-screen { position: relative; overflow: hidden; padding: 18px; border-right: 1px solid var(--line-dark); background: #e4e7ef; color: #28314a; }
.task-appbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(40,49,74,.15); }
.task-appbar strong { font-size: 10px; }
.task-appbar small { color: #69738b; font-size: 7px; }
.order-form { display: grid; gap: 11px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field { padding: 9px 10px; border: 1px solid rgba(40,49,74,.15); border-radius: 8px; background: #f2f3f7; }
.field label { display: block; margin-bottom: 5px; color: #768096; font-size: 6px; font-weight: 800; letter-spacing: .06em; }
.field span { display: block; min-height: 10px; font-size: 8px; font-weight: 700; }
.field.focus { border: 2px solid var(--cobalt); background: #eef1ff; box-shadow: 0 0 0 4px rgba(36,72,216,.1); }
.execution-stage[data-state="model"] .field.focus { border-color: var(--coral-dark); background: #fff0ec; box-shadow: 0 0 0 5px rgba(255,105,94,.16); animation: field-pulse 1.2s ease-in-out infinite; }
.submit-row { display: flex; justify-content: flex-end; margin-top: 6px; }
.fake-submit { padding: 9px 14px; border-radius: 7px; color: white; background: #31405f; font-size: 7px; font-weight: 800; }
.exception-dialog { position: absolute; left: 50%; top: 53%; width: 220px; padding: 16px; border: 1px solid rgba(40,49,74,.17); border-radius: 13px; background: #fffaf1; box-shadow: 0 20px 55px rgba(29,37,60,.24); opacity: 0; transform: translate(-50%,-44%) scale(.96); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.execution-stage[data-state="exception"] .exception-dialog, .execution-stage[data-state="recover"] .exception-dialog { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.execution-stage[data-state="verified"] .exception-dialog { opacity: 0; }
.dialog-icon { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 11px; border-radius: 9px; color: #5b3611; background: #ffd48f; font-weight: 900; }
.exception-dialog strong { display: block; font-size: 10px; }
.exception-dialog p { margin: 7px 0 12px; color: #69738b; font-size: 8px; line-height: 1.5; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 7px; }
.dialog-actions span { padding: 7px 9px; border-radius: 6px; color: #6d768b; background: #e7e9ef; font-size: 7px; font-weight: 800; }
.dialog-actions span:last-child { color: white; background: var(--cobalt); }
.decision-card { position: absolute; left: 50%; top: 54%; width: 235px; padding: 15px; border: 1px solid rgba(255,105,94,.35); border-radius: 13px; background: #171126; box-shadow: 0 20px 55px rgba(29,20,48,.3); opacity: 0; transform: translate(-50%,-43%) scale(.96); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.execution-stage[data-state="model"] .decision-card { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.decision-card > span { display: inline-flex; margin-bottom: 9px; padding: 5px 6px; border-radius: 5px; color: #ffaaa3; background: rgba(255,105,94,.13); font-size: 6px; font-weight: 900; letter-spacing: .07em; }
.decision-card strong { display: block; color: var(--cream); font-size: 9px; }
.decision-card p { margin: 7px 0 12px; color: #959fba; font-size: 7px; line-height: 1.5; }
.decision-meter { overflow: hidden; height: 4px; border-radius: 99px; background: rgba(203,216,255,.1); }
.decision-meter i { display: block; width: 74%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--coral),#a98fff); animation: reasoning 1.3s ease-in-out infinite alternate; }
.recovery-banner, .verified-toast { position: absolute; left: 17px; right: 17px; bottom: 17px; display: grid; grid-template-columns: 31px 1fr; align-items: center; gap: 10px; padding: 11px; border-radius: 11px; opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.recovery-banner { color: #ffe4bd; background: #53391d; box-shadow: 0 12px 30px rgba(76,47,14,.25); }
.verified-toast { color: #e8efff; background: #173a7a; box-shadow: 0 12px 30px rgba(22,53,111,.25); }
.recovery-banner > span, .verified-toast > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; background: rgba(255,255,255,.12); font-weight: 900; }
.recovery-banner strong, .verified-toast strong { display: block; font-size: 8px; }
.recovery-banner small, .verified-toast small { display: block; margin-top: 3px; color: inherit; font-size: 6px; opacity: .78; }
.execution-stage[data-state="recover"] .recovery-banner, .execution-stage[data-state="verified"] .verified-toast { opacity: 1; transform: translateY(0); }
.runtime-panel { padding: 17px 14px; background: #10172a; }
.runtime-label { display: flex; justify-content: space-between; margin-bottom: 14px; color: #74809c; font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.runtime-list { display: grid; gap: 9px; }
.runtime-event { padding: 10px; border: 1px solid var(--line-dark); border-radius: 10px; opacity: .16; filter: saturate(.35); background: #151d35; transition: opacity .35s ease, border .35s ease, transform .35s ease, filter .35s ease; }
.runtime-event.show { opacity: 1; }
.runtime-event.current { border-color: rgba(255,105,94,.82); filter: saturate(1); transform: translateX(-5px) scale(1.018); box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.runtime-event .event-type { display: inline-flex; margin-bottom: 6px; padding: 4px 5px; border-radius: 5px; color: #b8caff; background: rgba(36,72,216,.2); font-size: 6px; font-weight: 900; letter-spacing: .06em; }
.runtime-event.model .event-type { color: #ffaaa3; background: rgba(255,105,94,.15); }
.runtime-event.exception .event-type { color: #ffd9a5; background: rgba(244,184,96,.15); }
.runtime-event.verify .event-type { color: #cbd8ff; background: rgba(124,168,255,.15); }
.runtime-event strong { display: block; color: #d9e0f0; font-size: 8px; line-height: 1.4; }
.runtime-event small { display: block; margin-top: 4px; color: #74809c; font-size: 6px; line-height: 1.4; }
.replay-button { width: 100%; margin-top: 12px; padding: 9px; border: 1px solid var(--line-dark); border-radius: 8px; color: #c5cde1; background: transparent; cursor: pointer; font-size: 8px; font-weight: 800; }

.benefit-list { display: grid; gap: 13px; align-content: start; }
.benefit-card { display: grid; grid-template-columns: 42px 1fr; gap: 15px; padding: 21px; border: 1px solid var(--line-light); border-radius: 17px; background: #f6eee1; }
.benefit-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; color: var(--cream); background: var(--midnight); font-size: 11px; font-weight: 850; }
.benefit-card:nth-child(2) .benefit-icon { background: var(--coral-dark); }
.benefit-card:nth-child(3) .benefit-icon { background: var(--cobalt); }
.benefit-card:nth-child(4) .benefit-icon { color: var(--ink); background: var(--amber); }
.benefit-card h3 { margin: 1px 0 7px; font-size: 17px; }
.benefit-card p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.62; }

.difference-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); background: var(--midnight-2); }
.difference-card { position: relative; min-height: 290px; padding: 26px 22px; border-right: 1px solid var(--line-dark); }
.difference-card:nth-child(3) { border-right: 0; }
.difference-card:last-child { border-right: 0; }
.difference-card.telic { margin: -1px; border: 1px solid var(--coral); border-radius: 24px; background: var(--coral); color: var(--midnight); box-shadow: 0 24px 55px rgba(255,105,94,.2); isolation: isolate; }
.difference-index { color: #697590; font-size: 10px; font-weight: 850; }
.telic .difference-index { color: rgba(11,16,32,.56); }
.difference-card h3 { margin: 25px 0 12px; font-size: 20px; }
.difference-card p { margin: 0; color: #9ea9c3; font-size: 13px; line-height: 1.65; }
.telic p { color: #3a2630; }
.difference-fit { position: absolute; left: 22px; right: 22px; bottom: 23px; padding-top: 13px; border-top: 1px solid var(--line-dark); color: #78849e; font-size: 10px; font-weight: 700; }
.telic .difference-fit { border-color: rgba(11,16,32,.18); color: #4d2e32; }

.environment-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 15px; }
.environment-card { min-height: 240px; padding: 25px; border: 1px solid var(--line-light); border-radius: 20px; background: #f7efe3; }
.environment-card.large { grid-column: span 7; }
.environment-card.medium { grid-column: span 5; }
.environment-card.third { grid-column: span 4; }
.environment-card h3 { margin: 26px 0 10px; font-size: 21px; }
.environment-card p { max-width: 420px; margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.65; }
.environment-art { position: relative; height: 72px; overflow: hidden; border-radius: 13px; background: var(--cobalt-soft); }
.environment-card:nth-child(2) .environment-art { background: #ffd1cc; }
.environment-card:nth-child(3) .environment-art { background: #f4cf97; }
.environment-card:nth-child(4) .environment-art { background: #d9dded; }
.environment-card:nth-child(5) .environment-art { background: #cbd8ff; }
.environment-art::before { content: ""; position: absolute; left: 20px; top: 18px; width: 90px; height: 8px; border-radius: 9px; background: var(--midnight); box-shadow: 0 17px 0 rgba(11,16,32,.65), 0 34px 0 rgba(11,16,32,.28); }
.environment-art::after { content: ""; position: absolute; right: 21px; top: 17px; width: 39px; height: 39px; border: 5px solid rgba(11,16,32,.45); border-radius: 50%; }

.audience-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 7px; border: 1px solid var(--line-light); border-radius: 17px; background: #ded5c7; }
.audience-tab { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 18px; border: 0; border-radius: 11px; color: #6f6b73; background: transparent; cursor: pointer; font-size: 13px; font-weight: 750; text-align: left; transition: color .2s ease, background .2s ease, transform .2s ease; }
.audience-tab span { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(17,24,45,.15); border-radius: 8px; font-size: 9px; }
.audience-tab:hover { color: var(--ink); background: rgba(255,250,241,.45); }
.audience-tab.active { color: var(--cream); background: var(--midnight); box-shadow: 0 10px 28px rgba(17,24,45,.2); transform: translateY(-1px); }
.audience-tab.active span { border-color: rgba(255,105,94,.45); color: var(--midnight); background: var(--coral); }
.audience-panels { margin-top: 15px; }
.audience-panel { display: none; grid-template-columns: 1.08fr .92fr; min-height: 510px; overflow: hidden; border: 1px solid var(--line-light); border-radius: 24px; background: #f7efe3; box-shadow: var(--shadow-light); }
.audience-panel.active { display: grid; }
.audience-copy { padding: 48px; }
.audience-kicker { color: var(--coral-dark); font-size: 10px; font-weight: 850; letter-spacing: .09em; }
.audience-copy h3 { max-width: 670px; margin: 24px 0 17px; font-size: clamp(30px,3.2vw,45px); line-height: 1.08; letter-spacing: -.035em; }
.audience-copy > p { max-width: 660px; margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.72; }
.audience-copy ul { display: grid; gap: 12px; margin: 26px 0 31px; padding: 0; list-style: none; }
.audience-copy li { position: relative; padding-left: 25px; color: #3e4658; font-size: 13px; line-height: 1.5; }
.audience-copy li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--coral-dark); font-weight: 900; }
.audience-map { display: grid; align-content: center; gap: 10px; padding: 38px; color: var(--cream); background: var(--midnight-2); }
.audience-map > div { padding: 20px; border: 1px solid var(--line-dark); border-radius: 15px; background: rgba(203,216,255,.045); }
.audience-map small { display: block; margin-bottom: 8px; color: var(--coral); font-size: 8px; font-weight: 850; letter-spacing: .09em; }
.audience-map strong { display: block; color: #dce2f0; font-size: 15px; line-height: 1.45; }
.audience-map > span { padding-left: 22px; color: #596783; font-size: 17px; transform: rotate(90deg); transform-origin: left center; }

.how-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; }
.how-intro { position: sticky; top: 120px; align-self: start; }
.how-intro p { margin: 23px 0 28px; }
.how-steps { position: relative; display: grid; gap: 14px; }
.how-steps::before { content: ""; position: absolute; left: 29px; top: 30px; bottom: 30px; width: 1px; background: var(--line-dark); }
.how-step { position: relative; z-index: 1; display: grid; grid-template-columns: 58px 1fr; gap: 19px; padding: 23px; border: 1px solid var(--line-dark); border-radius: 18px; background: var(--midnight-2); }
.how-number { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid var(--line-dark); border-radius: 15px; color: var(--coral); background: var(--midnight); font-size: 12px; font-weight: 850; }
.how-step h3 { margin: 3px 0 8px; font-size: 20px; }
.how-step p { margin: 0; color: #9faac3; font-size: 13px; line-height: 1.65; }

.cta-section { padding: 95px 0; color: var(--cream); background: var(--midnight); }
.cta-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 45px; padding: 62px; border: 1px solid var(--line-dark); border-radius: 30px; color: var(--cream); background: var(--midnight-2); }
.cta-panel::after { content: ""; position: absolute; right: -130px; bottom: -190px; width: 430px; height: 430px; border: 65px solid var(--coral); border-radius: 50%; }
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel h2 { margin-top: 0; }
.cta-panel p { max-width: 630px; margin: 20px 0 0; color: #d9e2ff; font-size: 16px; line-height: 1.7; }
.cta-actions { display: grid; justify-items: start; gap: 11px; }
.cta-actions small { color: #c9d5ff; font-size: 11px; }
.cta-panel .button-coral { color: var(--midnight); background: var(--cream); box-shadow: 0 12px 28px rgba(0,0,0,.24); }
.cta-panel .button-coral:hover { background: var(--cobalt-soft); }

.site-footer { padding: 54px 0 30px; color: var(--cream); background: #080c18; }
.footer-top { display: grid; grid-template-columns: 1fr auto; gap: 55px; padding-bottom: 45px; }
.footer-description { max-width: 390px; margin: 18px 0 0; color: #8893ad; font-size: 13px; line-height: 1.65; }
.footer-columns { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 55px; }
.footer-column strong { display: block; margin-bottom: 15px; color: #66728d; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.footer-column a { display: block; margin: 10px 0; color: #aeb8cf; font-size: 12px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid var(--line-dark); color: #65718b; font-size: 10px; }

/* Inner pages */
.inner-hero { position: relative; overflow: hidden; padding: 90px 0 105px; }
.inner-hero::after { content: ""; position: absolute; right: -180px; top: -260px; width: 680px; height: 680px; border: 90px solid rgba(36,72,216,.2); border-radius: 50%; }
.inner-hero .shell { position: relative; z-index: 1; }
.inner-hero h1 { max-width: 900px; }
.inner-hero .lede { max-width: 760px; }
.breadcrumb { margin-bottom: 25px; color: #7f8ba6; font-size: 11px; font-weight: 700; }
.breadcrumb a { color: #aeb8cf; }
.content-section { padding: 100px 0; color: var(--ink); background: var(--cream); }
.content-section.alt { background: var(--cream-2); }
.content-heading { max-width: 760px; margin-bottom: 42px; }
.content-heading p { margin: 20px 0 0; }
.three-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.info-card { padding: 26px; border: 1px solid var(--line-light); border-radius: 19px; background: #f7efe3; }
.info-card .card-number { color: var(--coral-dark); font-size: 10px; font-weight: 850; }
.info-card h3 { margin: 28px 0 10px; font-size: 20px; }
.info-card p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.68; }
.feature-band { padding: 95px 0; background: var(--midnight); }
.feature-band .section-heading { margin-bottom: 45px; }
.feature-band .section-copy { color: #d6e0ff; }
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.feature-row { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(11,16,32,.13); }
.feature-check { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--midnight); background: var(--coral); font-weight: 900; }
.feature-row h3 { margin: 1px 0 6px; font-size: 16px; }
.feature-row p { margin: 0; color: #d4ddfb; font-size: 12px; line-height: 1.58; }
.improvement-cycle { display: grid; grid-template-columns: repeat(5,1fr); overflow: hidden; border: 1px solid var(--line-dark); border-radius: 21px; background: var(--midnight-2); }
.improvement-cycle article { position: relative; min-height: 285px; padding: 25px 21px; border-right: 1px solid var(--line-dark); }
.improvement-cycle article:last-child { border-right: 0; }
.improvement-cycle span { color: var(--coral); font-size: 10px; font-weight: 850; }
.improvement-cycle h3 { margin: 52px 0 12px; font-size: 19px; }
.improvement-cycle p { margin: 0; color: #9faac3; font-size: 12px; line-height: 1.65; }
.improvement-cycle .intelligence { background: #1c294d; }
.improvement-cycle .intelligence::before { content: "AI ONLY HERE"; position: absolute; right: 15px; top: 18px; padding: 5px 6px; border-radius: 5px; color: var(--midnight); background: var(--coral); font-size: 7px; font-weight: 900; letter-spacing: .06em; }
.process-line { display: grid; grid-template-columns: repeat(5, 1fr); overflow: hidden; border: 1px solid var(--line-light); border-radius: 20px; }
.process-item { min-height: 220px; padding: 23px; border-right: 1px solid var(--line-light); background: #f7efe3; }
.process-item:last-child { border-right: 0; }
.process-item span { color: var(--coral-dark); font-size: 10px; font-weight: 850; }
.process-item h3 { margin: 45px 0 9px; font-size: 17px; }
.process-item p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.58; }

/* How it works: workflow design beside the target application */
.design-execution-visual { display: grid; grid-template-columns: 1fr 64px 1fr; overflow: hidden; min-height: 650px; border: 1px solid var(--line-light); border-radius: 24px; background: #d8cfc1; box-shadow: var(--shadow-light); }
.design-panel, .target-panel { min-width: 0; }
.design-panel { color: var(--cream); background: var(--midnight); }
.target-panel { color: #2b3448; background: #dfe4ec; }
.panel-ribbon { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 55px; padding: 0 16px; border-bottom: 1px solid var(--line-dark); }
.panel-ribbon span { color: #7d89a3; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.panel-ribbon b { color: #dbe1ed; font-size: 9px; }
.target-panel .panel-ribbon { border-color: #c8ced8; background: #f5f7fa; }
.target-panel .panel-ribbon span { color: #738097; }
.target-panel .panel-ribbon b { color: #30394d; }
.designer-body { display: grid; grid-template-columns: 72px 1fr; min-height: 595px; }
.designer-body > aside { display: grid; align-content: start; gap: 6px; padding: 14px 7px; border-right: 1px solid var(--line-dark); color: #65718b; background: #0e1426; font-size: 6px; font-weight: 850; text-align: center; }
.designer-body > aside span { padding: 9px 2px; border-radius: 6px; }
.designer-body > aside .selected { color: var(--cream); background: #1d2948; }
.workflow-canvas { position: relative; padding: 22px 18px; background-image: radial-gradient(rgba(203,216,255,.12) 1px,transparent 1px); background-size: 16px 16px; }
.canvas-note { margin-bottom: 16px; color: #6f7b96; font-size: 6px; font-weight: 900; letter-spacing: .1em; }
.design-node { display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line-dark); border-radius: 10px; background: #171f37; opacity: .7; }
.design-node i { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; color: #9ba7bf; background: #222c49; font-size: 8px; font-style: normal; font-weight: 900; }
.design-node b, .design-node small { display: block; }
.design-node b { color: #dde3f0; font-size: 8px; }
.design-node small { margin-top: 4px; color: #79859e; font-size: 6px; line-height: 1.35; }
.design-node em { padding: 5px; border-radius: 5px; color: #8793ac; background: rgba(203,216,255,.07); font-size: 5px; font-style: normal; font-weight: 900; }
.design-node.complete { opacity: .86; }
.design-node.complete i { color: var(--midnight); background: var(--cobalt-soft); }
.design-node.current { border-color: rgba(255,105,94,.7); background: #281c2f; opacity: 1; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.design-node.current i { color: var(--midnight); background: var(--coral); }
.design-node.current em { color: #ffaaa3; background: rgba(255,105,94,.12); }
.design-execution-visual[data-how-state="exception"] .design-node.current { border-color: rgba(244,184,96,.85); background: #2d251e; }
.design-execution-visual[data-how-state="exception"] .design-node.current i { background: var(--amber); }
.design-execution-visual[data-how-state="model"] .design-node.current { border-color: rgba(124,168,255,.8); background: #162445; }
.design-execution-visual[data-how-state="model"] .design-node.current i { background: var(--cobalt-soft); }
.node-link { width: 1px; height: 15px; margin-left: 25px; background: #39435e; }
.node-link.done { background: var(--coral); box-shadow: 0 0 7px rgba(255,105,94,.45); }
.execution-bridge { position: relative; z-index: 2; display: grid; place-content: center; gap: 7px; color: var(--coral); background: #cfc5b7; text-align: center; }
.execution-bridge::before, .execution-bridge::after { content: ""; position: absolute; left: 50%; width: 1px; height: 175px; background: rgba(17,24,45,.15); }
.execution-bridge::before { top: 0; }
.execution-bridge::after { bottom: 0; }
.execution-bridge span { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,105,94,.42); border-radius: 50%; background: var(--midnight); font-size: 21px; box-shadow: 0 10px 24px rgba(17,24,45,.2); }
.execution-bridge b, .execution-bridge small { position: relative; z-index: 1; }
.execution-bridge b { color: var(--ink); font-size: 7px; }
.execution-bridge small { color: #746e75; font-size: 5px; font-weight: 850; }
.target-chrome { display: flex; justify-content: space-between; min-height: 30px; padding: 9px 13px; color: #747f93; background: #cdd3dd; font-size: 6px; }
.target-body { display: grid; grid-template-columns: 72px 1fr; min-height: 565px; }
.target-body > aside { display: grid; align-content: start; gap: 6px; padding: 12px 7px; color: #68748b; background: #c4cbd6; font-size: 6px; text-align: center; }
.target-body > aside strong { display: grid; place-items: center; width: 31px; height: 31px; margin: 0 auto 8px; border-radius: 8px; color: white; background: #31405f; }
.target-body > aside span { padding: 8px 2px; border-radius: 6px; }
.target-body > aside .selected { color: white; background: #31405f; }
.target-work { position: relative; overflow: hidden; padding: 20px 17px; }
.target-heading { display: flex; justify-content: space-between; align-items: center; }
.target-heading small { display: block; color: #7e889b; font-size: 6px; font-weight: 800; }
.target-heading b { display: block; margin-top: 5px; font-size: 12px; }
.target-heading > span { padding: 5px 7px; border-radius: 5px; color: #707a8e; background: #ccd2dd; font-size: 6px; font-weight: 800; }
.target-tabs { display: flex; gap: 14px; margin-top: 18px; border-bottom: 1px solid #c4cad5; color: #7c8699; font-size: 6px; }
.target-tabs > * { padding-bottom: 8px; }
.target-tabs b { color: #344057; border-bottom: 2px solid var(--cobalt); }
.target-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 17px; }
.target-form label { position: relative; display: block; min-height: 58px; padding: 10px; border: 1px solid #c6ccd6; border-radius: 7px; color: #7d8799; background: #f7f8fa; font-size: 6px; font-weight: 800; }
.target-form label b { display: block; margin-top: 7px; color: #30394c; font-size: 8px; }
.target-form .target-product { grid-column: 1 / -1; }
.target-form [data-how-target].how-current, .target-actions.how-current { border-color: var(--coral); box-shadow: 0 0 0 5px rgba(255,105,94,.13); }
.target-product em { display: none; position: absolute; top: 8px; right: 8px; padding: 4px 6px; border-radius: 4px; color: white; background: var(--coral-dark); font-size: 7px; font-style: normal; }
.target-product.how-current em { display: block; }
.target-actions { display: flex; justify-content: flex-end; align-items: center; gap: 9px; margin-top: 20px; font-size: 7px; }
.target-actions span { color: #737e92; }
.target-actions b { padding: 9px 13px; border-radius: 6px; color: white; background: #31405f; }
.how-exception-card, .how-model-card { position: absolute; left: 50%; top: 55%; z-index: 3; width: min(275px,calc(100% - 30px)); padding: 18px; border-radius: 13px; opacity: 0; transform: translate(-50%,-44%) scale(.96); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.how-exception-card { border: 1px solid rgba(135,83,27,.26); color: #30394c; background: #fff7e8; box-shadow: 0 20px 55px rgba(56,42,25,.24); }
.how-model-card { border: 1px solid rgba(124,168,255,.4); color: var(--cream); background: #101a34; box-shadow: 0 20px 55px rgba(11,16,32,.38); }
.how-exception-card > span, .how-model-card > span { display: inline-flex; margin-bottom: 11px; padding: 5px 7px; border-radius: 5px; font-size: 8px; font-weight: 900; letter-spacing: .06em; }
.how-exception-card > span { color: #784817; background: #f4cd91; }
.how-model-card > span { color: #cbd8ff; background: rgba(124,168,255,.16); }
.how-exception-card strong, .how-model-card strong { display: block; font-size: 12px; line-height: 1.35; }
.how-exception-card p, .how-model-card p { margin: 8px 0 0; font-size: 9px; line-height: 1.55; }
.how-exception-card p { color: #69738b; }
.how-model-card p { color: #9da9c3; }
.how-model-card > div { overflow: hidden; height: 5px; margin-top: 14px; border-radius: 99px; background: rgba(203,216,255,.1); }
.how-model-card > div i { display: block; width: 58%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--coral),#7ca8ff); animation: reasoning 1.1s ease-in-out infinite alternate; }
.design-execution-visual[data-how-state="exception"] .how-exception-card, .design-execution-visual[data-how-state="model"] .how-model-card { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.how-resolved-banner, .how-verified-toast { position: absolute; left: 17px; right: 17px; bottom: 17px; z-index: 4; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 11px; padding: 12px; border-radius: 11px; opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease; }
.how-resolved-banner { color: #eaf0ff; background: #1a3977; }
.how-verified-toast { color: #241b1a; background: #f3c3bd; }
.how-resolved-banner > i, .how-verified-toast > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.2); font-style: normal; font-weight: 900; }
.how-resolved-banner strong, .how-verified-toast strong { display: block; font-size: 10px; }
.how-resolved-banner small, .how-verified-toast small { display: block; margin-top: 3px; font-size: 8px; opacity: .76; }
.design-execution-visual[data-how-state="continue"] .how-resolved-banner, .design-execution-visual[data-how-state="verified"] .how-verified-toast { opacity: 1; transform: translateY(0); }

/* Readable type inside product visuals */
.visual-label { font-size: 9px; }
.app-chrome { font-size: 9px; }
.app-layout aside { font-size: 8px; }
.app-layout aside b { font-size: 10px; }
.app-title small, .control-head small { font-size: 8px; }
.app-title strong { font-size: 14px; }
.app-title > span { font-size: 8px; }
.app-fields label { font-size: 8px; }
.app-fields label b { font-size: 10px; }
.app-fields label em, .app-table em { font-size: 7px; }
.app-table span { font-size: 7px; }
.app-table b { font-size: 8px; }
.control-link small { font-size: 7px; }
.control-head strong { font-size: 11px; }
.control-head > span { font-size: 7px; }
.control-step b { font-size: 10px; }
.control-step small { font-size: 7px; }
.control-status small { font-size: 7px; }
.control-status strong { font-size: 10px; }
.comparison-head span { font-size: 9px; }
.comparison-head strong { font-size: 13px; }
.lane-title span { font-size: 9px; }
.lane-title strong { font-size: 17px; }
.lane-appbar { font-size: 8px; }
.screen-change > span { font-size: 7px; }
.screen-change strong { font-size: 11px; }
.screen-change small { font-size: 8px; }
.path-node span { font-size: 9px; }
.path-node b { font-size: 7px; }
.lane-outcome b { font-size: 10px; }
.lane-outcome small { font-size: 8px; }
.panel-ribbon span { font-size: 9px; }
.panel-ribbon b { font-size: 11px; }
.designer-body > aside { font-size: 8px; }
.canvas-note { font-size: 8px; }
.design-node b { font-size: 10px; }
.design-node small { font-size: 8px; }
.design-node em { font-size: 7px; }
.execution-bridge b { font-size: 9px; }
.execution-bridge small { font-size: 7px; }
.target-chrome { font-size: 8px; }
.target-body > aside { font-size: 8px; }
.target-heading small { font-size: 8px; }
.target-heading b { font-size: 14px; }
.target-heading > span, .target-tabs { font-size: 8px; }
.target-form label { font-size: 8px; }
.target-form label b { font-size: 10px; }
.target-actions { font-size: 9px; }
.visual-logic article > span { font-size: 10px; }
.visual-logic b { font-size: 13px; }
.visual-logic p { font-size: 11px; }
.visual-logic { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin-top: 15px; }
.visual-logic article { display: grid; grid-template-columns: 34px 1fr; gap: 11px; padding: 17px; border: 1px solid var(--line-light); border-radius: 14px; background: #f7efe3; }
.visual-logic article > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--cream); background: var(--midnight); font-size: 8px; font-weight: 900; }
.visual-logic b { font-size: 11px; }
.visual-logic p { margin: 6px 0 0; color: var(--ink-soft); font-size: 9px; line-height: 1.5; }

.contact-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 70px; }
.contact-copy h1 { font-size: clamp(48px,5.5vw,74px); }
.contact-copy p { color: #aeb8cf; line-height: 1.7; }
.contact-points { display: grid; gap: 12px; margin-top: 32px; }
.contact-point { display: grid; grid-template-columns: 33px 1fr; gap: 12px; align-items: center; color: #b4bed4; font-size: 12px; }
.contact-point i { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 9px; color: var(--midnight); background: var(--coral); font-style: normal; font-weight: 850; }
.contact-card { padding: 31px; border: 1px solid var(--line-dark); border-radius: 24px; background: var(--midnight-2); box-shadow: var(--shadow-dark); }
.contact-card h2 { margin: 0 0 25px; font-size: 29px; }
.contact-card > p { margin: 0 0 25px; color: #8f9ab4; font-size: 12px; line-height: 1.6; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: grid; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { color: #aab4ca; font-size: 10px; font-weight: 700; }
.optional { color: #66728d; font-weight: 500; }
.form-field input, .form-field textarea, .form-field select { width: 100%; border: 1px solid var(--line-dark); border-radius: 10px; color: var(--cream); background: #0e1427; outline: none; }
.form-field input, .form-field select { height: 47px; padding: 0 13px; }
.select-control { position: relative; }
.select-control::after { content: ""; position: absolute; top: 50%; right: 18px; width: 7px; height: 7px; border-right: 1.5px solid #aab4ca; border-bottom: 1.5px solid #aab4ca; pointer-events: none; transform: translateY(-68%) rotate(45deg); }
.select-control select { appearance: none; padding-right: 50px; }
.form-field textarea { min-height: 135px; padding: 13px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,105,94,.1); }
.form-submit { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; }
.form-submit small { max-width: 270px; color: #697590; font-size: 9px; line-height: 1.5; }
.form-success { display: none; margin-top: 16px; padding: 13px; border: 1px solid rgba(124,168,255,.32); border-radius: 10px; color: #cbd8ff; background: rgba(36,72,216,.14); font-size: 11px; }
.form-success.show { display: block; }

@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(124,168,255,.45); } 50% { box-shadow: 0 0 0 5px rgba(124,168,255,0); } }
@keyframes pulse-coral { 0%,100% { box-shadow: 0 0 0 0 rgba(216,75,67,.45); } 50% { box-shadow: 0 0 0 5px rgba(216,75,67,0); } }
@keyframes reasoning { from { transform: translateX(-16%); opacity: .62; } to { transform: translateX(26%); opacity: 1; } }
@keyframes field-pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(255,105,94,.12); } 50% { box-shadow: 0 0 0 8px rgba(255,105,94,.04); } }
@keyframes link-pulse { 0%,100% { transform: translateX(-2px); box-shadow: 0 0 0 0 rgba(255,105,94,.18); } 50% { transform: translateX(2px); box-shadow: 0 0 0 6px rgba(255,105,94,0); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

@media (max-width: 980px) {
  .nav-links { position: absolute; top: 80px; left: 22px; right: 22px; display: none; align-items: stretch; padding: 11px; border: 1px solid var(--line-dark); border-radius: 17px; background: #11182d; box-shadow: var(--shadow-dark); }
  .nav-links.open { display: grid; }
  .nav-link, .solutions-trigger { width: 100%; justify-content: space-between; }
  .solutions-menu { position: static; width: 100%; margin-top: 5px; box-shadow: none; transform: none; }
  .nav > .nav-cta { display: none; }
  .mobile-toggle { display: grid; }
  .hero-grid, .section-heading, .execution-layout, .how-grid, .cta-panel, .contact-layout { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-copy .eyebrow, .hero-actions, .hero-note { justify-content: center; }
  .lede { margin-inline: auto; }
  .hero-machine { width: min(680px,100%); margin-inline: auto; }
  .hero-runtime { width: min(760px,100%); margin-inline: auto; }
  .section-heading { gap: 22px; }
  .difference-grid { grid-template-columns: repeat(2,1fr); }
  .difference-card:nth-child(2) { border-right: 0; }
  .difference-card:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
  .environment-card.large, .environment-card.medium { grid-column: span 6; }
  .environment-card.third { grid-column: span 4; }
  .how-intro { position: static; }
  .cta-panel { padding: 48px; }
  .three-grid { grid-template-columns: 1fr; }
  .design-execution-visual { grid-template-columns: 1fr; }
  .execution-bridge { min-height: 72px; grid-auto-flow: column; align-items: center; }
  .execution-bridge::before, .execution-bridge::after { display: none; }
  .execution-bridge span { transform: rotate(90deg); }
  .visual-logic { grid-template-columns: 1fr; }
  .audience-panel { grid-template-columns: 1fr; }
  .audience-map { grid-template-columns: repeat(3,1fr); }
  .audience-map > span { display: none; }
  .process-line { grid-template-columns: repeat(2,1fr); }
  .improvement-cycle { grid-template-columns: repeat(2,1fr); }
  .improvement-cycle article { border-bottom: 1px solid var(--line-dark); }
  .process-item { border-bottom: 1px solid var(--line-light); }
  .footer-top { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .shell { width: min(100% - 26px,1180px); }
  .site-header { padding: 0; }
  .nav { padding-inline: 13px; }
  .hero { padding: 50px 0 75px; }
  h1 { font-size: 48px; letter-spacing: -.034em; }
  h2 { font-size: 38px; }
  .lede { font-size: 16px; }
  .hero-actions .button { width: 100%; }
  .hero-machine { min-height: 410px; }
  .runtime-split { grid-template-columns: 1fr; }
  .control-link { min-height: 45px; grid-auto-flow: column; }
  .control-link span { transform: rotate(90deg); animation: none; }
  .app-layout { min-height: 330px; }
  .comparison-lanes { grid-template-columns: 1fr; }
  .comparison-lane + .comparison-lane { border-left: 0; border-top: 1px solid rgba(17,24,45,.15); }
  .machine-window { transform: none; }
  .machine-content { grid-template-columns: 72px 1fr; min-height: 345px; }
  .machine-side { padding-inline: 6px; }
  .machine-side small { margin-inline: 4px; }
  .machine-nav { padding-inline: 4px; font-size: 6px; }
  .machine-main { padding: 14px 10px; }
  .mini-step { grid-template-columns: 27px 1fr; min-height: 49px; padding: 7px; }
  .mini-tag { display: none; }
  .machine-float { display: none; }
  .section { padding: 78px 0; }
  .execution-stage { min-height: auto; padding: 9px; }
  .sequence-nav { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .sequence-step { padding: 8px 4px; text-align: center; }
  .execution-shell { min-height: auto; }
  .execution-body { grid-template-columns: 1fr; }
  .task-screen { min-height: 330px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .runtime-panel { min-height: 380px; }
  .difference-grid { grid-template-columns: 1fr; }
  .difference-card, .difference-card.telic { min-height: 235px; margin: 0; border: 0; border-bottom: 1px solid var(--line-dark); border-radius: 0; }
  .difference-card:last-child { border-bottom: 0; }
  .environment-card.large, .environment-card.medium, .environment-card.third { grid-column: 1 / -1; }
  .cta-panel { padding: 37px 25px 145px; }
  .footer-columns { grid-template-columns: 1fr 1fr; gap: 35px; }
  .footer-bottom { flex-direction: column; }
  .feature-list { grid-template-columns: 1fr; }
  .improvement-cycle { grid-template-columns: 1fr; }
  .improvement-cycle article { min-height: 220px; border-right: 0; }
  .audience-tabs { grid-template-columns: 1fr; }
  .audience-panel { min-height: auto; }
  .audience-copy { padding: 31px 24px; }
  .audience-map { grid-template-columns: 1fr; padding: 24px; }
  .process-line { grid-template-columns: 1fr; }
  .process-item { min-height: 180px; border-right: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
  .form-submit { align-items: flex-start; flex-direction: column; }
}