/* The developer page (/agents): setup steps and "every agent, wherever it runs".
   Built from the same pieces as lantern-cards.css and ask-cards.css. */
.ln-dev-pill { position: absolute; left: 0; right: 0; bottom: 16px; width: max-content; margin-inline: auto; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #9fae8f; border-radius: 99px; background: #fffef9; box-shadow: 0 3px 0 #cfd8c580; color: #4f5d43; font-size: 10px; white-space: nowrap; }
.ln-dev-pill svg { width: 13px; height: 13px; color: #5f8f55; }

/* 1 · Download: the lantern and the agents it found */
.ln-dev-hub { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 74px; height: 74px; border: 1px solid #a99c82; border-radius: 18px; background: #fffdf7; box-shadow: 0 4px 0 #dccfb680; }
.ln-scene .ln-dev-hub .ln-mascot { width: 52px; height: 52px; }
.ln-dev-lines { position: absolute; top: 108px; left: 14%; right: 14%; height: 26px; border: 1px solid #b9ad94; border-bottom: 0; border-radius: 12px 12px 0 0; }
.ln-dev-lines::before { content: ""; position: absolute; left: 50%; top: -10px; height: 10px; border-left: 1px solid #b9ad94; }
.ln-dev-agents { position: absolute; top: 134px; left: 7%; right: 7%; display: flex; justify-content: space-between; }
.ln-dev-agents span { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #b2a68b; border-radius: 11px; background: #fffdf7; }
.ln-dev-agents i { position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border: 1.5px solid #fffdf7; border-radius: 50%; background: #6d9be0; }
.ln-dev-agents i.is-waiting { background: #e2a640; }
.ln-dev-agents i.is-done { background: #5fae6a; }

/* 2 · Connect: iPhone, Mac and server */
.ln-dev-machines { position: absolute; top: 46px; left: 6%; right: 6%; display: flex; align-items: center; justify-content: space-between; }
.ln-dev-machine { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; color: #4d5145; font-size: 10px; }
.ln-dev-machine > span:first-child { display: grid; place-items: center; width: 52px; height: 58px; border: 1px solid #8f988a; border-radius: 12px; background: #fffefa; box-shadow: 0 4px 0 #c9cfc480; }
.ln-dev-machine--mac > span:first-child { width: 66px; height: 66px; }
.ln-dev-machine svg { width: 24px; height: 24px; color: #4a5246; }
.ln-dev-machine b { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #5fae6a; color: #fff; }
.ln-dev-machine b svg { width: 11px; height: 11px; color: #fff; }
.ln-dev-link { flex: 1; height: 1px; margin: 0 6px 18px; border-top: 1px dashed #8f988a; }

/* 3 · Reply: Inbox or Talk */
.ln-dev-tabs { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; padding: 3px; border: 1px solid #b6a988; border-radius: 99px; background: #fffdf7; font-size: 10px; }
.ln-dev-tabs span { display: flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 99px; color: #7d7765; }
.ln-dev-tabs span:first-child { background: #282d27; color: #fffdf7; }
.ln-dev-tabs svg { width: 12px; height: 12px; }
.ln-dev-question { position: absolute; top: 56px; left: 8%; right: 8%; padding: 11px 12px 12px; border: 1px solid #a99c82; border-radius: 9px; background: #fffdf7; box-shadow: 0 4px 0 #dccfb680; }
.ln-dev-question__head { display: flex; align-items: center; gap: 7px; color: #6f6a58; font-size: 10px; }
.ln-dev-question__head img { width: 16px; height: 16px; }
.ln-dev-question__head i, .ln-dev-question__head em { margin-left: auto; }
.ln-dev-question__head i { width: 7px; height: 7px; border-radius: 50%; background: #e2a640; }
.ln-dev-question__head em { display: flex; align-items: center; gap: 3px; color: #5f8f55; font-style: normal; }
.ln-dev-question__head em svg { width: 11px; height: 11px; }
.ln-dev-question p { margin: 7px 0 8px; font-size: 12px; font-weight: 600; color: #282d27; }
.ln-dev-option { display: flex; align-items: center; gap: 8px; margin-top: 5px; padding: 5px 8px; border: 1px solid #ded5c1; border-radius: 6px; background: #faf6ec; font-size: 10px; color: #4d5145; }
.ln-dev-option kbd { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: #ebe3d1; font: 9px ui-monospace, monospace; }
.ln-dev-option.is-picked { border-color: #8fb184; background: #e7f0df; }
.ln-dev-option.is-picked kbd { background: #5fae6a; color: #fff; }

/* Inbox */
.ln-scene--inbox .ln-dev-question { top: 34px; }

/* Toolbar: a dot per agent at the screen's edge */
.ln-dev-toolbar { position: absolute; top: 26px; right: 16%; display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 11px 9px 14px; border: 1px solid #8e8a9c; border-radius: 99px; background: #fffefa; box-shadow: 0 4px 0 #d0cdd880; }
.ln-dev-toolbar img { width: 24px; height: 24px; }
.ln-dev-toolbar i { width: 11px; height: 11px; border-radius: 50%; background: #5fae6a; }
.ln-dev-toolbar i.is-working { background: #6d9be0; box-shadow: 0 0 0 4px #6d9be033; }
.ln-dev-toolbar i.is-waiting { background: #e2a640; box-shadow: 0 0 0 4px #e2a64033; }
.ln-dev-legend { position: absolute; top: 46px; left: 9%; display: grid; gap: 9px; font-size: 10px; color: #5f5b6a; }
.ln-dev-legend span { display: flex; align-items: center; gap: 7px; }
.ln-dev-legend i { width: 8px; height: 8px; border-radius: 50%; background: #5fae6a; }
.ln-dev-legend i.is-working { background: #6d9be0; }
.ln-dev-legend i.is-waiting { background: #e2a640; }
.ln-dev-done { position: absolute; bottom: 22px; left: 9%; display: flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid #9fae8f; border-radius: 99px; background: #fffef9; color: #4f5d43; font-size: 10px; }
.ln-dev-done i { width: 7px; height: 7px; border-radius: 50%; background: #5fae6a; }

/* Router */
.ln-dev-say { position: absolute; top: 44px; left: 7%; right: 7%; display: flex; align-items: center; gap: 8px; }
.ln-dev-key { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 40px; border: 1px solid #b29b90; border-radius: 8px; background: #fffdf9; box-shadow: 0 3px 0 #dcc8bf; font-size: 9px; line-height: 1.1; text-align: center; color: #6e5e57; }
.ln-dev-key b { font-size: 13px; font-weight: 500; }
.ln-dev-say > span:last-child { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #b29b90; border-radius: 22px; background: #fffdf9; font-size: 11px; overflow: hidden; white-space: nowrap; }
.ln-dev-wave { display: flex; align-items: center; gap: 2px; }
.ln-dev-wave i { width: 2px; height: 10px; border-radius: 2px; background: #bd6b32; }
.ln-dev-wave i:nth-child(2) { height: 6px; }
.ln-dev-wave i:nth-child(3) { height: 12px; }
.ln-dev-wave i:nth-child(4) { height: 5px; }
.ln-dev-chips { position: absolute; top: 122px; left: 7%; right: 7%; display: flex; gap: 8px; }
.ln-dev-chips span { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 1px solid #cdbcb3; border-radius: 9px; background: #fffaf7; font-size: 10px; color: #6e5e57; white-space: nowrap; }
.ln-dev-chips span.is-picked { border-color: #bd6b32; background: #fff; box-shadow: 0 4px 0 #e6c9b7; color: #282d27; font-weight: 600; }

/* iPhone app */
.ln-dev-phone { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 168px; height: 250px; padding: 10px 10px 0; border: 1.5px solid #6c6058; border-bottom: 0; border-radius: 28px 28px 0 0; background: #fffdf9; }
.ln-dev-phone::before { content: ""; display: block; width: 52px; height: 13px; margin: 0 auto; border-radius: 99px; background: #2b2a28; }
.ln-dev-phone time { display: block; margin-top: 8px; text-align: center; font-size: 30px; font-weight: 600; letter-spacing: -.04em; color: #3e3a36; }
.ln-dev-push { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 9px; border: 1px solid #d8cbc0; border-radius: 11px; background: #f6efe8; }
.ln-dev-push img { width: 22px; height: 22px; }
.ln-dev-push strong, .ln-dev-push span { display: block; font-size: 9px; }
.ln-dev-push span { color: #7a6c63; }
.ln-dev-replies { display: flex; gap: 5px; margin-top: 6px; }
.ln-dev-replies span { flex: 1; padding: 5px 0; border: 1px solid #d8cbc0; border-radius: 99px; background: #fff; text-align: center; font-size: 9px; }

/* Servers and cloud */
.ln-dev-terminal { position: absolute; top: 40px; left: 7%; right: 7%; transform: rotate(-1.5deg); }
.ln-dev-terminal .ln-window__body { padding: 11px 13px; }
.ln-dev-joined { position: absolute; top: 150px; left: 9%; right: 7%; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid #98a588; border-radius: 9px; background: #fffef9; box-shadow: 0 4px 0 #ccd5c4; font-size: 10px; }
.ln-dev-joined strong { font-weight: 600; }
.ln-dev-joined svg { width: 14px; height: 14px; margin-left: auto; color: #5f8f55; }
.ln-dev-cloud { position: absolute; top: 44px; left: 7%; right: 7%; padding: 12px 13px; border: 1px solid #a4a2ab; border-radius: 9px; background: #fffefa; box-shadow: 0 4px 0 #d0cdd8; }
.ln-dev-cloud__head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; }
.ln-dev-cloud__head img { width: 18px; height: 18px; }
.ln-dev-cloud__head em { margin-left: auto; padding: 2px 7px; border-radius: 99px; background: #e4e9f5; color: #4c66a0; font-size: 9px; font-style: normal; font-weight: 500; }
.ln-dev-cloud p { margin: 8px 0 0; color: #77737e; font-size: 10px; }
.ln-dev-cloud .ln-code { margin-top: 8px; color: #57535f; }
.ln-dev-sleep { position: absolute; bottom: 20px; left: 9%; display: flex; align-items: center; gap: 7px; color: #6f6b78; font-size: 10px; }
.ln-dev-sleep svg { width: 14px; height: 14px; }

/* "Not a developer?" and "Using coding agents?" */
.icp-switch { display: inline-block; margin-top: 14px; color: inherit; font-size: 14px; opacity: .78; text-underline-offset: 3px; }
.icp-switch:hover { opacity: 1; }

[data-card-motion] .ln-dev-pill, [data-card-motion] .ln-dev-joined, [data-card-motion] .ln-dev-done { animation-delay: 700ms; }

/* Hero platform line, quick wins and pricing */
.dev-platforms { margin: 14px 0 0; font-size: 13px; opacity: .78; }
.dev-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 40px 0 0; padding: 0; list-style: none; }
.dev-quick li { padding-top: 14px; border-top: 1.5px solid #282d27; color: #606257; font-size: 13px; line-height: 1.6; }
.dev-quick strong { display: block; margin-bottom: 4px; color: #282d27; font-size: 15px; font-weight: 600; }
.pricing-section { padding-block: 40px 90px; }
@media (max-width: 1000px) {
  .dev-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .dev-quick { grid-template-columns: minmax(0, 1fr); }
}

/* Main page: the demo recording under the hero, framed like the paper cards */
.home-demo { margin-block: 56px 10px; text-align: center; }
.home-demo__frame { position: relative; margin: 0; padding: 10px; border: 1.5px solid #282d27; border-radius: 18px; background: #fffdf7; box-shadow: 8px 8px 0 #e6c79a; }
.home-demo__frame video { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 1164; border-radius: 10px; background: #1c1d22; }
.home-demo__toggle { position: absolute; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 8px 12px; border: 1px solid #ffffff40; border-radius: 7px; background: #17211dcc; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff8ed; font-size: 11px; }
.home-demo figcaption { margin-top: 18px; color: #74705f; font-size: 14px; }
.home-quick { margin-top: 44px; }
@media (max-width: 760px) {
  .home-demo { margin-top: 36px; }
  .home-demo__frame { padding: 6px; border-radius: 12px; box-shadow: 5px 5px 0 #e6c79a; }
  .home-demo__frame video { border-radius: 7px; }
  .home-demo__toggle { right: 14px; bottom: 14px; }
}

/* Main page: the hero stays a full screen tall and the demo's top (about 10% of it) overlaps
   the hero's bottom edge, so it peeks in as soon as the page opens. */
[data-icp="everyone"] { --demo-overlap: min(68px, 6vw); }
[data-icp="everyone"] .hero-garden .hero { min-height: max(760px, 100svh); padding-bottom: calc(var(--demo-overlap) + 56px); }
[data-icp="everyone"] .home-demo { position: relative; z-index: 2; margin-top: calc(-1 * var(--demo-overlap)); }
[data-icp="everyone"] .home-demo__frame { box-shadow: 8px 8px 0 #e6c79a, 0 40px 80px -40px #0b0f0b99; }
[data-icp="everyone"] .hero-video-toggle { bottom: calc(var(--demo-overlap) + 18px); }
@media (max-width: 760px) {
  [data-icp="everyone"] .hero-garden .hero { padding-bottom: calc(var(--demo-overlap) + 36px); }
}

/* Main page: three short promises under the demo, in place of the coding-agent logos */
.promise-strip { padding-block: 34px 10px; }
.promise-strip p { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; margin: 0; color: #4f4a40; font-size: 15px; }
.promise-strip span { display: inline-flex; align-items: center; gap: 9px; }
.promise-strip span::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #f1dcb9; color: #8a4b1f; font-size: 12px; font-weight: 700; }