/* The public landing has its own palette; dashboard tokens stay independent. */
.lp {
  --lp-bg: #111410;
  --lp-surface: #191e17;
  --lp-ink: #f1f1e7;
  --lp-muted: #a1aa9b;
  --lp-line: #30372c;
  --lp-green: #c4f58a;
  background: var(--lp-bg);
  color: var(--lp-ink);
  min-height: 100%;
  overflow: clip;
  font-size: 15px;
  line-height: 1.65;
  flex: none;
}
.lp-wrap { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
.lp a { color: inherit; }
.lp a:hover { text-decoration: none; }
.lp button { cursor: pointer; }
.lp :is(a, button):focus-visible { outline: 2px solid var(--lp-green); outline-offset: 6px; }
.lp-nav { display: flex; align-items: center; justify-content: space-between; min-height: 100px; border-bottom: 1px solid var(--lp-line); }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 650; letter-spacing: -.055em; line-height: 1; }
.lp-brand svg { width: 31px; height: 31px; stroke: var(--lp-green); stroke-width: 1.6; stroke-linecap: round; }
.lp-brand-dot { color: var(--lp-green); }
.lp-nav-links { display: flex; align-items: center; gap: 38px; font-size: 13px; }
.lp-nav-signin { display: flex; gap: 20px; align-items: center; padding: 9px 17px; border: 1px solid #495340; border-radius: 6px; }
.lp-nav-signin:hover { background: var(--lp-surface); border-color: var(--lp-green); }
.lp-text-link { background: none; border: 0; padding: 8px 0; color: var(--lp-ink); display: inline-flex; align-items: center; gap: 16px; font-size: 13px; }
.lp-text-link:hover { color: var(--lp-green); }
.lp-hero { display: grid; grid-template-columns: 1.06fr 1fr; gap: 55px; align-items: center; padding-block: 88px 92px; }
.lp-eyebrow { display: flex; align-items: center; gap: 9px; color: var(--lp-muted); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 27px; }
.lp-status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lp-green); flex: none; }
.lp h1 { font-size: clamp(45px, 5.3vw, 77px); font-weight: 500; line-height: 1.04; letter-spacing: -.065em; margin: 0 0 27px; }
.lp h1 em, .lp h2 em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.055em; color: var(--lp-green); }
.lp-intro { color: var(--lp-muted); font-size: 16px; line-height: 1.8; max-width: 430px; margin-bottom: 29px; }
.lp-hero-actions { display: flex; align-items: center; gap: 25px; }
.lp-button { display: inline-flex; gap: 28px; justify-content: space-between; align-items: center; border: 1px solid var(--lp-green); padding: 13px 19px; background: var(--lp-green); color: #18220f !important; border-radius: 6px; font-size: 13px; font-weight: 650; white-space: nowrap; transition: background .18s, transform .18s; }
.lp-button:hover { background: #d6ffa9; transform: translateY(-2px); }
.lp-access { color: #929c8a; font-size: 10px; margin: 15px 0 0; }
.lp-access > span { margin: 0 5px; }
.lp-demo { margin: 24px 0 0; position: relative; min-width: 0; background: #151a13; border: 1px solid #3b4633; border-radius: 12px; box-shadow: 0 22px 80px #0003; }
.lp-demo::before { content: ''; position: absolute; inset: -65px; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at center, #a7df6b0c, transparent 68%); }
.lp-demo-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 15px 17px; border-bottom: 1px solid var(--lp-line); font: 10px var(--mono); color: var(--lp-muted); position: relative; }
.lp-window-dots { font-size: 9px; letter-spacing: 1px; color: #5c6853; margin-right: 12px; }
.lp-demo-label { font: 9px var(--font); color: #a6b198; padding: 3px 6px; border: 1px solid #3d4735; border-radius: 3px; }
.lp-canvas { position: relative; height: 350px; background: radial-gradient(#3a463033 .8px, transparent .8px); background-size: 20px 20px; }
.lp-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-control-wire { stroke: #71855e; stroke-width: 1; }
.lp-message-wire { stroke: #526b3a; stroke-width: 2; }
.lp-signal { stroke: var(--lp-green); stroke-width: 2.5; stroke-dasharray: 10 160; animation: lp-transmit 3s linear infinite; }
.lp-junction { fill: var(--lp-green); }
.lp-cloud-node { display: flex; align-items: center; gap: 10px; position: absolute; top: 29px; left: 50%; transform: translateX(-50%); padding: 13px 16px; border: 1px solid #566445; border-radius: 8px; background: #20271b; box-shadow: 0 0 35px #b4e58608; white-space: nowrap; }
.lp-cloud-node svg { width: 31px; height: 31px; stroke: var(--lp-green); stroke-width: 1.5; stroke-linecap: round; }
.lp-cloud-node strong { display: block; font-size: 13px; font-weight: 500; }
.lp-cloud-node div > span { display: block; font-size: 9px; color: var(--lp-muted); }
.lp-agent-node { position: absolute; width: 37%; background: #1b2118; border: 1px solid #4a573e; border-radius: 8px; padding: 14px; box-shadow: 0 9px 22px #0003; animation: lp-breathe 6s ease-in-out infinite; }
.lp-agent-lead { left: 4%; top: 164px; }
.lp-agent-frontend { right: 4%; top: 191px; animation-delay: -3s; }
.lp-agent-heading { display: flex; align-items: center; gap: 8px; }
.lp-agent-heading strong { font: 12px var(--mono); }
.lp-runtime { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; }
.lp-runtime-claude { color: #e5b494; font-size: 21px; }
.lp-runtime-codex { color: var(--lp-green); font-size: 11px; }
.lp-node-dot { width: 5px; height: 5px; background: var(--lp-green); border-radius: 50%; margin-left: auto; box-shadow: 0 0 10px #c4f58a45; }
.lp-agent-role { display: block; color: #d1d8c8; font-size: 10px; margin: 7px 0 2px; }
.lp-agent-machine { display: block; color: #94a187; font-size: 9px; white-space: nowrap; }
.lp-agent-machine > span { padding-inline: 4px; color: #6b785f; }
.lp-transport { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; align-items: center; color: #a7b69a; white-space: nowrap; font: 9px var(--mono); }
.lp-transport .lp-status-dot { width: 4px; height: 4px; }
.lp-message { border-top: 1px solid var(--lp-line); padding: 15px 19px; background: #1d2418; }
.lp-message-route { color: var(--lp-green); display: block; font: 9px var(--mono); margin-bottom: 6px; }
.lp-message-route > span { padding-inline: 8px; }
.lp-message p { font-size: 11px; color: #d2dcc8; margin: 0; }
.lp-cursor { display: inline-block; width: 5px; height: 11px; margin-left: 5px; background: #c4f58a9c; vertical-align: -1px; animation: lp-blink 1.2s steps(2, jump-none) infinite; }
.lp-demo-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 17px; gap: 8px; font-size: 9px; color: #9aa88f; }
.lp-demo-footer button { font: inherit; background: none; border: 0; color: #b8c4ae; padding: 2px; }
.lp-demo-footer button > span { margin-left: 5px; }
.lp-demo-footer button:hover { color: var(--lp-green); }
.lp-principles { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-block: 1px solid var(--lp-line); padding-block: 25px; color: #b9c1b0; font-size: 12px; }
.lp-principles > span { display: flex; gap: 11px; align-items: center; }
.lp-principle-icon { font-size: 17px; color: #c2d3b0; }
.lp-explain { padding-block: 100px 94px; scroll-margin-top: 28px; }
.lp-section-heading { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; align-items: end; }
.lp-section-heading > .lp-eyebrow { grid-column: 1 / -1; margin-bottom: 22px; }
.lp h2 { font-size: clamp(32px, 3.2vw, 44px); line-height: 1.15; font-weight: 450; letter-spacing: -.045em; margin: 0; }
.lp-section-heading > p:last-child { max-width: 370px; margin: 0 0 2px; font-size: 14px; color: var(--lp-muted); justify-self: end; }
.lp-explain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 53px; }
.lp-explain-grid article { border-top: 1px solid #526044; padding-top: 19px; }
.lp-section-number { font: 9px var(--mono); letter-spacing: .05em; color: #9bad8d; }
.lp-explain-grid h3 { font-size: 18px; color: var(--lp-ink); text-transform: none; font-weight: 450; letter-spacing: -.025em; margin: 22px 0 10px; }
.lp-explain-grid p { font-size: 12px; line-height: 1.85; color: var(--lp-muted); margin: 0; }
.lp-workflow { border-block: 1px solid var(--lp-line); padding-block: 86px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 70px; align-items: start; scroll-margin-top: 24px; }
.lp-workflow .lp-eyebrow { margin-bottom: 23px; }
.lp-workflow-intro { color: var(--lp-muted); font-size: 13px; max-width: 370px; margin: 20px 0 29px; }
.lp-steps { display: grid; }
.lp-step { text-align: left; display: flex; align-items: flex-start; gap: 14px; border: 0; border-top: 1px solid var(--lp-line); border-left: 2px solid transparent; background: none; padding: 17px 13px; color: var(--lp-muted); width: 100%; transition: background .2s, border-color .2s; }
.lp-step[aria-pressed=true] { background: #20271a; border-left-color: var(--lp-green); }
.lp-step:hover { background: #1c2317; }
.lp-step-number { font: 10px var(--mono); margin-top: 4px; }
.lp-step strong { font-size: 13px; font-weight: 500; display: block; color: #d7dfce; }
.lp-step[aria-pressed=true] :is(strong, .lp-step-number) { color: var(--lp-green); }
.lp-step > span:nth-child(2) > span { font-size: 11px; line-height: 1.75; display: block; margin-top: 7px; }
.lp-step:not([aria-pressed=true]) > span:nth-child(2) > span { display: none; }
.lp-step-arrow { margin-left: auto; color: #7e8e70; }
.lp-terminal { min-width: 0; border: 1px solid #445038; background: #171c14; border-radius: 9px; overflow: hidden; align-self: stretch; display: flex; flex-direction: column; margin-top: 5px; }
.lp-terminal-bar { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 17px 19px; border-bottom: 1px solid var(--lp-line); color: var(--lp-muted); font: 10px var(--mono); }
.lp-terminal-bar button { background: none; border: 0; color: #bac7af; padding: 3px 0; font: 9px var(--font); white-space: nowrap; }
.lp-terminal-bar button:hover { color: var(--lp-green); }
.lp-terminal-bar button > span { margin-left: 6px; }
.lp-terminal-body { padding: 23px 23px 35px; flex: 1; }
.lp-terminal-context { color: #9cad8d; font: 9px var(--mono); display: flex; align-items: center; gap: 7px; margin-bottom: 28px; }
.lp-terminal-context .lp-status-dot { width: 4px; height: 4px; }
.lp-terminal pre { margin: 0; overflow-x: auto; padding-bottom: 12px; }
.lp-terminal code { display: block; color: #d6efc0; font: 11px/1.9 var(--mono); white-space: pre; }
.lp-code-comment { color: #8e9e80; }
.lp-terminal-note { border-top: 1px solid var(--lp-line); padding: 15px 20px; font-size: 10px; line-height: 1.75; color: #a1af94; margin: 0; }
.lp-closing { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding-block: 84px; }
.lp-closing .lp-eyebrow { margin-bottom: 20px; }
.lp-closing-action p { font-size: 10px; color: var(--lp-muted); margin: 13px 0 0; }
.lp-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--lp-line); padding-block: 25px; }
.lp-footer .lp-brand { font-size: 17px; }
.lp-footer .lp-brand svg { width: 24px; height: 24px; }
.lp-footer > p { font-size: 10px; color: var(--lp-muted); margin: 0; }
.lp-footer > span { font: 9px var(--mono); color: #8f9b85; }
.lp-enter { animation: lp-enter .8s both; }
.lp-enter-1 { animation-delay: .08s; }
.lp-enter-2 { animation-delay: .18s; }
.lp-enter-3 { animation-delay: .28s; }
.lp-paused :is(.lp-signal, .lp-agent-node, .lp-cursor) { animation-play-state: paused; }
@keyframes lp-transmit { to { stroke-dashoffset: -170; } }
@keyframes lp-breathe { 50% { transform: translateY(-4px); } }
@keyframes lp-blink { 50% { opacity: 0; } }
@keyframes lp-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (min-width: 1500px) { .lp-hero { padding-block: 110px; } }
@media (max-width: 1100px) {
  .lp-wrap { width: calc(100% - 72px); }
  .lp-hero { gap: 30px; }
  .lp h1 { font-size: clamp(44px, 5.5vw, 65px); }
  .lp-hero-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
  .lp-demo-bar { padding-inline: 12px; font-size: 9px; }
  .lp-window-dots { margin-right: 6px; }
  .lp-demo-footer { font-size: 8px; padding-inline: 12px; }
  .lp-agent-node { padding: 11px; width: 39%; }
  .lp-agent-machine { font-size: 8px; }
  .lp-workflow { gap: 38px; }
  .lp-explain-grid { gap: 30px; }
}
@media (max-width: 760px) {
  .lp-wrap { width: calc(100% - 40px); }
  .lp-nav { min-height: 78px; }
  .lp-brand { font-size: 20px; }
  .lp-brand svg { width: 28px; height: 28px; }
  .lp-nav-links { gap: 19px; }
  .lp-nav-how { display: none; }
  .lp-nav-signin { padding: 7px 11px; font-size: 12px; gap: 17px; }
  .lp-hero { grid-template-columns: 1fr; padding-block: 50px 42px; gap: 28px; }
  .lp h1 { font-size: clamp(46px, 9.5vw, 70px); }
  .lp-eyebrow { font-size: 9px; margin-bottom: 24px; letter-spacing: .055em; }
  .lp-intro { font-size: 14px; max-width: 450px; margin-bottom: 24px; }
  .lp-hero-actions { flex-direction: row; align-items: center; gap: 20px; }
  .lp-hero-actions > .lp-text-link { font-size: 11px; gap: 8px; }
  .lp-button { font-size: 12px; gap: 20px; padding: 12px 15px; }
  .lp-access { font-size: 9px; }
  .lp-demo { margin-top: 9px; }
  .lp-canvas { height: 330px; }
  .lp-agent-lead { top: 155px; }
  .lp-agent-frontend { top: 182px; }
  .lp-agent-node { width: 40%; padding: 12px; }
  .lp-agent-heading strong { font-size: 11px; }
  .lp-agent-role { font-size: 9px; }
  .lp-agent-machine { font-size: 8px; }
  .lp-demo-footer { padding-block: 13px; font-size: 9px; }
  .lp-principles { flex-wrap: wrap; justify-content: flex-start; gap: 12px 28px; font-size: 10px; padding-block: 20px; }
  .lp-principle-icon { font-size: 14px; }
  .lp-explain { padding-block: 60px; }
  .lp-section-heading { grid-template-columns: 1fr; gap: 0; }
  .lp-section-heading > p:last-child { justify-self: start; margin-top: 23px; max-width: 430px; font-size: 13px; }
  .lp h2 { font-size: 34px; }
  .lp-explain-grid { grid-template-columns: 1fr; gap: 26px; margin-top: 35px; }
  .lp-explain-grid article { padding-top: 15px; }
  .lp-explain-grid h3 { margin-top: 12px; font-size: 19px; }
  .lp-explain-grid p { max-width: 470px; font-size: 12px; }
  .lp-workflow { grid-template-columns: 1fr; padding-block: 60px; gap: 28px; }
  .lp-workflow-intro { font-size: 13px; }
  .lp-terminal { min-height: 310px; }
  .lp-terminal-body { padding: 22px 17px; }
  .lp-terminal code { font-size: 10px; }
  .lp-closing { flex-direction: column; align-items: flex-start; gap: 28px; padding-block: 60px; }
  .lp-closing-action p { font-size: 10px; }
  .lp-footer { flex-wrap: wrap; gap: 17px; }
  .lp-footer > span { width: 100%; }
}
@media (max-width: 370px) {
  .lp-hero-actions { flex-wrap: wrap; gap: 8px 20px; }
  .lp-demo-bar { gap: 5px; }
  .lp-window-dots { display: none; }
  .lp-agent-node { padding: 10px 8px; }
  .lp-agent-machine > span { padding-inline: 1px; }
  .lp-runtime { width: 16px; }
  .lp-demo-footer { font-size: 8px; }
  .lp h1 { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { animation: none !important; transition: none !important; }
  .lp [data-lp-motion] { display: none; }
}