/* The landing page (/). Shared tokens, buttons, nav and footer are in base.css. */
.sprite { position: absolute; }
.sizes-foot { padding-bottom: 1.5rem; }
.launch-cta { margin-top: 1.5rem; }
.install-note code { color: var(--accent-deep); }
.setup-step p code { color: var(--accent-deep); }
.hero { display: grid; grid-template-columns: 1fr 1.13fr; gap: 2rem; align-items: center; padding-top: clamp(3.5rem, 6vw, 6rem); padding-bottom: 3.5rem; }
h1 { font-size: clamp(2.9rem, 5.3vw, 4.8rem); line-height: 1.13; font-weight: 600; }
h1 .plus-one { color: var(--accent); display: inline-block; position: relative; white-space: nowrap; }
h1 .plus-one::after { content: ''; position: absolute; bottom: -.07em; left: .04em; right: 0; height: 2px; background: var(--accent); }
.hero-description { max-width: 35ch; font-size: 1.18rem; line-height: 1.65; margin-top: 1.75rem; }
.hero-actions { margin-top: 1.9rem; display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.install-line { display: flex; align-items: center; gap: .5rem; margin-top: 2rem; max-width: 470px; border-bottom: 1px solid var(--control); padding-bottom: .55rem; }
.install-line code { flex: 1; overflow-wrap: anywhere; font-size: .75rem; }
.copy { min-height: 44px; min-width: 44px; background: transparent; border: 0; display: inline-flex; gap: .5rem; align-items: center; justify-content: center; font: 500 .75rem var(--mono); }
.copy:hover { color: var(--accent); background: var(--lavender); border-radius: 4px; }
.install-note { margin-top: .5rem; max-width: 48ch; color: var(--muted); font-size: .75rem; }
/* The hero's install command: the first thing to do, so it is the strongest element after the headline. */
.install-hero { display: flex; align-items: center; gap: .85rem; max-width: 540px; margin-top: 2rem; padding: .45rem .45rem .45rem 1.15rem; background: var(--ink); color: var(--white); border-radius: 8px; box-shadow: 0 14px 34px -16px rgb(32 33 44 / .55); }
.install-hero .prompt { color: var(--lime); font: 600 .95rem var(--mono); }
.install-hero code { flex: 1; min-width: 0; font-size: .92rem; font-weight: 500; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.install-hero code::-webkit-scrollbar { display: none; }
.install-hero .copy { min-height: 44px; padding-inline: .9rem; border-radius: 5px; background: var(--lime); color: var(--ink); font-weight: 600; transition: background .18s; }
.install-hero .copy:hover { background: var(--white); color: var(--ink); }
.install-hero .copy .icon { width: 16px; height: 16px; }
.install-hero ~ .install-note { margin-top: .75rem; font-size: .83rem; }
.install-hero ~ .install-note strong { color: var(--ink); font-weight: 650; }
.install-hero ~ .hero-actions { margin-top: 1.6rem; }
.install-hero :focus-visible { outline-color: var(--lime); outline-offset: 3px; }
.twin-demo { min-width: 0; }
/* The hero animation: the lid closes (site.js `lid`). The step rail is also the navigation. */
.lid-stage { position: relative; aspect-ratio: 16 / 10.5; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.lid-scene { position: absolute; inset: 0; display: grid; grid-template-columns: 1.05fr .62fr 1.15fr; align-items: center; padding: 6% 4%; gap: 2%; }
.lid-laptop { display: grid; justify-items: center; }
.lid-lid { width: 100%; aspect-ratio: 16 / 10.5; background: var(--ink); border-radius: 10px 10px 3px 3px; padding: 6px; transform-origin: 50% 100%; transition: transform .9s var(--ease); }
.lid-screen { height: 100%; background: var(--white); border-radius: 5px; padding: 9%; display: grid; align-content: start; gap: 7%; transition: opacity .4s; }
.lid-base { width: 116%; height: 9px; background: #3a3b4a; border-radius: 0 0 9px 9px; }
.lid-who { margin-top: 12px; font: 600 .78rem var(--mono); display: flex; gap: 8px; align-items: center; }
.lid-pill { font: 500 .66rem var(--mono); padding: 2px 7px; border-radius: 99px; background: var(--lavender); color: var(--accent-deep); transition: background .3s, color .3s; }
.lid-proj { font: 600 .8rem var(--mono); }
.lid-file { font: .68rem var(--mono); color: var(--muted); display: flex; gap: 6px; align-items: center; }
.lid-file::before { content: ''; width: 7px; height: 9px; border: 1.3px solid currentColor; border-radius: 1.5px; flex: none; }
.lid-changed { color: var(--accent-deep); font-weight: 600; }
.lid-changed::after { content: 'updated'; margin-left: auto; font-size: .6rem; color: var(--white); background: var(--accent); border-radius: 3px; padding: 0 4px; opacity: 0; transition: opacity .4s; }
.lid-scene[data-step="back"] .lid-changed::after { opacity: 1; }
.lid-scene[data-step="sleep"] .lid-lid { transform: perspective(500px) rotateX(-78deg); }
.lid-scene[data-step="sleep"] .lid-screen { opacity: 0; }
.lid-scene[data-step="sleep"] .lid-pill { background: var(--ink); color: var(--lime); }
.lid-link { position: relative; height: 70px; }
.lid-link::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--lavender-line); transition: border-color .4s; }
.lid-chip { position: absolute; top: 50%; left: 0; translate: 0 -50%; font: 600 .62rem var(--mono); color: var(--accent-deep); background: var(--lavender); border: 1px solid var(--lavender-line); border-radius: 4px; padding: 2px 6px; opacity: 0; white-space: nowrap; }
.lid-scene[data-step="sync"] .lid-chip:not(.lid-ret) { animation: lid-right 2.4s var(--ease) infinite; }
.lid-scene[data-step="sync"] .lid-chip:nth-child(2) { animation-delay: .8s; }
.lid-scene[data-step="sync"] .lid-chip:nth-child(3) { animation-delay: 1.6s; }
.lid-scene[data-step="back"] .lid-ret { animation: lid-left 2.4s var(--ease) infinite; }
.lid-scene.paused .lid-chip { animation-play-state: paused; }
.lid-scene[data-step="sleep"] .lid-link::before { border-color: var(--line); }
.lid-gap { position: absolute; inset: 0; display: grid; place-items: center; font: 500 .62rem var(--mono); color: var(--muted); opacity: 0; transition: opacity .4s; }
.lid-gap span { background: var(--white); padding: 0 6px; }
.lid-scene[data-step="sleep"] .lid-gap { opacity: 1; }
@keyframes lid-right { 0% { left: 0; opacity: 0; } 15%, 80% { opacity: 1; } 100% { left: calc(100% - 60px); opacity: 0; } }
@keyframes lid-left { 0% { left: calc(100% - 60px); opacity: 0; } 15%, 80% { opacity: 1; } 100% { left: 0; opacity: 0; } }
.lid-twin { background: var(--lavender); border: 2px solid var(--accent); border-radius: 12px; overflow: hidden; display: grid; grid-template-rows: auto auto 1fr auto; height: 78%; }
.lid-twin-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: 8px 11px; border-bottom: 1px solid var(--lavender-line); font: 600 .72rem var(--mono); color: var(--accent); }
.lid-twin-head small { font: 500 .62rem var(--mono); color: var(--accent-deep); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.lid-twin-head small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #2f9e44; box-shadow: 0 0 0 3px rgb(47 158 68 / .18); }
.lid-twin-files { padding: 10px 11px 4px; display: grid; gap: 4px; border-bottom: 1px dashed var(--lavender-line); }
.lid-twin-files .lid-file { color: var(--accent-deep); }
.lid-term { padding: 9px 11px; font: .64rem/1.65 var(--mono); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; }
.lid-term div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: lid-line .35s var(--ease); }
.lid-term .cmd { color: var(--accent-deep); font-weight: 600; }
.lid-term .ok { color: #2f7a24; }
.lid-term .dim { color: var(--muted); }
@keyframes lid-line { from { opacity: 0; translate: 0 4px; } }
.lid-progress { height: 5px; margin: 0 11px 11px; background: var(--lavender-line); border-radius: 3px; overflow: hidden; }
.lid-progress i { display: block; height: 100%; width: 0; background: var(--accent); }
.lid-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-top: 14px; }
.lid-rail button { all: unset; cursor: pointer; display: grid; gap: 6px; padding: 4px 0 2px; font: 500 .74rem/1.35 var(--mono); color: var(--muted); }
.lid-rail button::before { content: ''; height: 3px; border-radius: 2px; background: var(--line) linear-gradient(var(--accent), var(--accent)) no-repeat; background-size: var(--fill, 0%) 100%; }
.lid-rail button[aria-current="step"] { color: var(--ink); }
.lid-rail button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.lid-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.lid-caption { font-size: .92rem; }
.lid-pause { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--control); border-radius: 5px; background: var(--white); font: 500 .75rem var(--mono); white-space: nowrap; }
.lid-pause:hover { border-color: var(--accent); color: var(--accent); background: var(--lavender); }
.lid-pause .icon { width: 14px; height: 14px; }
.three-surface canvas { display: block; width: 100%; height: 100%; }
.motion-control { min-height: 44px; padding: .5rem; border: 0; background: transparent; color: var(--muted); font: .75rem var(--mono); text-decoration: underline; text-underline-offset: 4px; }
.motion-control:hover { color: var(--accent); }
.agent-visual { margin-top: 1rem; }
.three-agent-host { height: 216px; }
.agent-visual figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .75rem; color: var(--dark-muted); }
.agent-visual .motion-control { color: var(--lime); font-size: .75rem; white-space: nowrap; }
.feature-rail { display: flex; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; padding: 1.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: .75rem var(--mono); }
.feature-rail span { display: flex; align-items: center; gap: .6rem; }
.feature-rail .icon { width: 17px; height: 17px; color: var(--accent); }
.selling-points { list-style: none; margin: 0; padding: 1.75rem 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .86rem; line-height: 1.55; color: var(--muted); }
.selling-points strong { display: block; color: var(--ink); font: 600 .84rem/1.4 var(--mono); margin: .7rem 0 .35rem; }
.selling-points .icon { width: 20px; height: 20px; color: var(--accent); }
/* Each selling point's icon acts out its point, on a slow loop (the reduced-motion rule in base.css stops them). */
.sp-icon { width: 30px; height: 30px; color: var(--accent); overflow: visible; }
.sp-meter { transform-box: fill-box; transform-origin: left center; animation: sp-cool 4.5s var(--ease) infinite; }
@keyframes sp-cool { 0%, 20% { transform: scaleX(1); } 55%, 100% { transform: scaleX(.18); } }
.sp-turn { transform-box: view-box; transform-origin: 16px 16px; animation: sp-turn 4.5s var(--ease) infinite; }
@keyframes sp-turn { 0%, 30% { rotate: 0deg; } 70%, 100% { rotate: 180deg; } }
.sp-z { opacity: 0; animation: sp-z 3.6s ease-out infinite; }
.sp-z2 { animation-delay: 1.2s; }
@keyframes sp-z { 0% { opacity: 0; translate: 0 3px; } 25% { opacity: 1; } 70% { opacity: 0; translate: 2px -4px; } 100% { opacity: 0; } }
.sp-caret { animation: sp-caret 1.1s steps(1) infinite; }
@keyframes sp-caret { 50% { opacity: 0; } }
.sp-pins { stroke-dasharray: 4 6; animation: sp-pins 1.6s linear infinite; }
.sp-core { fill: rgb(72 52 212 / .12); animation: sp-core 1.6s ease-in-out infinite; }
@keyframes sp-pins { to { stroke-dashoffset: -10; } }
@keyframes sp-core { 50% { fill: rgb(72 52 212 / .45); } }
.section-intro { display: flex; justify-content: space-between; align-items: end; gap: 3rem; margin-bottom: 3rem; }
.section-intro > p { max-width: 38ch; color: var(--muted); }
.how h2 { max-width: 18ch; }
.setup-flow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2.5rem; }
.setup-step { border-top: 2px solid var(--ink); padding-top: 1.4rem; }
.setup-step:nth-child(2) { border-color: var(--accent); }
.setup-step h3 { font-family: var(--mono); font-weight: 600; font-size: 1.1rem; margin-bottom: 1rem; }
.setup-step p { color: var(--muted); font-size: .94rem; max-width: 36ch; }
.setup-proof { min-height: 54px; margin-bottom: 1.3rem; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.command { display: inline-flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 4px; background: var(--white); font: .83rem var(--mono); }
.command::before { content: '›'; color: var(--accent); font-weight: 700; }
.approval { font: .75rem var(--mono); display: flex; align-items: center; gap: .3rem; }
.approval .icon { width: 15px; height: 15px; color: var(--accent); }
.setup-footnote { margin-top: 2rem; color: var(--muted); font-size: .8rem; }
.belongings { background: var(--white); border-block: 1px solid var(--line); }
.belongings-grid { display: grid; grid-template-columns: .9fr 1.25fr; gap: clamp(2rem, 7vw, 7rem); }
.belongings-intro h2 { max-width: 12ch; }
.belongings-intro > p { max-width: 31ch; margin-top: 1.5rem; color: var(--muted); }
/* What comes along: the setup on this computer, then the same items arriving checked on the twin, one by one. */
.carry { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; margin-top: 2.5rem; max-width: 30rem; }
.carry-col { border: 1.5px solid var(--ink); border-radius: 10px; background: var(--white); padding: .8rem .85rem .9rem; }
.carry-twin { border-color: var(--accent); background: var(--lavender); }
.carry-head { display: flex; align-items: center; gap: .45rem; font: 600 .72rem var(--mono); padding-bottom: .55rem; margin-bottom: .55rem; border-bottom: 1px solid var(--line); }
.carry-twin .carry-head { color: var(--accent); border-color: var(--lavender-line); }
.carry-head .icon { width: 15px; height: 15px; }
.carry ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .32rem; font: .72rem/1.4 var(--mono); }
.carry-col:not(.carry-twin) li { color: var(--muted); padding-left: 1.2rem; position: relative; }
.carry-col:not(.carry-twin) li::before { content: ''; position: absolute; left: .2rem; top: .45em; width: 7px; height: 7px; border-radius: 2px; border: 1.3px solid currentColor; }
.carry-twin li { display: flex; align-items: center; gap: .35rem; color: var(--accent-deep); animation: carry-in 7s var(--ease) infinite; animation-delay: calc(var(--i) * .45s); }
.carry-twin li .icon { width: 13px; height: 13px; stroke-width: 2.4; }
.carry-arrow { color: var(--accent); }
.carry-arrow .icon { width: 24px; height: 24px; animation: carry-spin 7s var(--ease) infinite; }
@keyframes carry-in { 0%, 4% { opacity: .15; translate: -6px 0; } 12%, 88% { opacity: 1; translate: 0 0; } 100% { opacity: .15; } }
@keyframes carry-spin { 0% { rotate: 0deg; } 30%, 100% { rotate: 180deg; } }
.manifest-row { display: grid; grid-template-columns: 40px 1fr; gap: 1rem; padding: 1.6rem 0; border-top: 1px solid var(--line); }
.manifest-row:first-child { padding-top: 0; border: 0; }
.manifest-row:last-child { padding-bottom: 0; }
.manifest-icon { width: 30px; height: 30px; color: var(--accent); }
.manifest-row h3 { margin-bottom: .6rem; }
.manifest-row p { color: var(--muted); font-size: .95rem; }
.file-tags { display: flex; flex-wrap: wrap; gap: .35rem .75rem; margin-top: .85rem; font: .75rem/1.8 var(--mono); color: var(--accent-deep); }
.file-tags span { background: var(--lavender); padding: .1rem .4rem; border-radius: 3px; }
.carryover { margin-top: 4rem; padding-top: 1.7rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.carryover p { margin: 0; font-size: .92rem; color: var(--muted); }
.carryover strong { color: var(--ink); display: block; font-family: var(--mono); font-size: .77rem; margin-bottom: .5rem; }
.dark { background: var(--dark); color: var(--white); }
.agents-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.agents-copy h2 { max-width: 14ch; }
.agents-copy > p { margin-top: 1.5rem; color: var(--dark-muted); max-width: 42ch; }
.agents-copy code { color: var(--lime); }
.agents-copy .text-link { color: var(--lime); margin-top: 1.2rem; }
.mcp-path { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; padding-bottom: 1.25rem; border-bottom: 1px solid #626174; font: .75rem/1.7 var(--mono); }
.mcp-path .icon { color: var(--lime); }
.mcp-path strong { color: var(--lime); font-weight: 500; }
.tool-controls { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 1.4rem; gap: .4rem; }
.tool-choice { min-height: 45px; background: transparent; border: 1px solid #8c8a9e; border-radius: 4px; color: var(--white); font: .75rem var(--mono); }
.tool-choice:hover, .tool-choice[aria-pressed="true"] { background: var(--lime); color: var(--dark); border-color: var(--lime); }
.tool-detail { min-height: 216px; padding-block: 1.5rem 1rem; }
.tool-detail h3 { font: 500 .95rem var(--mono); color: var(--lime); margin-bottom: .9rem; }
.tool-detail pre { font: .75rem/1.9 var(--mono); color: var(--white); }
.tool-detail p { margin-top: 1rem; color: var(--dark-muted); font-size: .87rem; }
.tool-example-note { color: var(--dark-muted); font-size: .75rem; border-top: 1px solid #626174; padding-top: 1rem; }
.agents-bottom { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid #626174; display: flex; justify-content: space-between; gap: 1.5rem; font: .75rem/1.8 var(--mono); color: var(--dark-muted); }
.agents-bottom span { max-width: 35ch; }
.agents-bottom strong { color: var(--white); font-weight: 500; }
.privacy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.privacy-copy h2 { max-width: 15ch; }
.privacy-copy > p { margin-top: 1.5rem; color: var(--muted); max-width: 40ch; }
.private-network { border: 1px dashed var(--control); padding: 1.75rem; border-radius: 12px; background: var(--white); }
.network-heading { display: flex; align-items: center; justify-content: center; gap: .5rem; font: .75rem var(--mono); color: var(--accent); }
.network-pair { display: flex; gap: .75rem; align-items: center; justify-content: center; margin: 1.8rem 0; }
.network-node { width: 112px; min-height: 96px; display: grid; place-content: center; justify-items: center; gap: .7rem; border: 2px solid var(--ink); border-radius: 7px; background: var(--paper); font: .75rem var(--mono); }
.network-node:last-child { border-color: var(--accent); background: var(--lavender); }
.network-node .icon { width: 26px; height: 26px; }
.network-route { min-width: 36px; flex: 1; height: 1px; background: var(--accent); position: relative; }
.network-route span { position: absolute; left: 50%; bottom: .5rem; transform: translateX(-50%); font: .75rem var(--mono); color: var(--accent); white-space: nowrap; }
.private-network > p { font: .75rem/1.8 var(--mono); color: var(--muted); text-align: center; }
.privacy-facts { display: flex; gap: 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.privacy-facts p { flex: 1; margin: 0; font-size: .85rem; color: var(--muted); }
.privacy-facts strong { display: block; color: var(--ink); margin-bottom: .25rem; }
.pricing { background: var(--white); border-block: 1px solid var(--line); }
.pricing h2 { max-width: 16ch; }
.pricing-intro { max-width: 39ch; }
/* Omarchy: the twin's desktop, drawn in its own Tokyo Night colours, so the section reads as the real thing. */
.omarchy-badge { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.1rem; padding: .35rem .75rem; border: 1px solid var(--line); border-radius: 99px; background: var(--white); font: 500 .75rem var(--mono); color: var(--ink); text-decoration: none; }
.omarchy-badge:hover { border-color: var(--accent); color: var(--accent); }
.om-dot { width: 8px; height: 8px; border-radius: 50%; background: #7aa2f7; box-shadow: 0 0 0 3px rgb(122 162 247 / .25); }
.omarchy { background: #16161e; color: #c0caf5; }
.omarchy-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.omarchy h2 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); color: #e0e6ff; }
.omarchy-lede { margin-top: 1.4rem; font-size: 1.08rem; line-height: 1.7; color: #a9b1d6; max-width: 46ch; }
.omarchy-points { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.1rem; font-size: .92rem; line-height: 1.55; color: #9aa5ce; }
.omarchy-points li { padding-left: 1.1rem; border-left: 1px solid #2a2e45; }
.omarchy-points strong { display: block; font: 600 .86rem var(--mono); color: #7aa2f7; margin-bottom: .15rem; }
.om-desk { margin: 0; border-radius: 12px; overflow: hidden; background: #1a1b26; border: 1px solid #2a2e45; box-shadow: 0 40px 80px -40px rgb(0 0 0 / .7); font: .72rem/1.65 var(--mono); }
.om-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem .8rem; background: #16161e; color: #565f89; font-size: .66rem; }
.om-ws { display: flex; gap: .35rem; }
.om-ws b, .om-ws i { display: grid; place-items: center; width: 1.3rem; height: 1.15rem; border-radius: 3px; font-style: normal; font-weight: 600; }
.om-ws b { background: #7aa2f7; color: #16161e; }
.om-clock { color: #a9b1d6; }
.om-tiles { display: grid; grid-template-columns: 1.15fr 1fr; gap: 6px; padding: 6px; aspect-ratio: 16 / 9.4; }
.om-stack { display: grid; grid-template-rows: 1.2fr 1fr; gap: 6px; min-height: 0; }
.om-win { display: flex; flex-direction: column; min-height: 0; border: 2px solid #2a2e45; border-radius: 7px; background: #1a1b26; overflow: hidden; }
.om-win.om-main { border-color: #7aa2f7; }
.om-title { padding: .25rem .6rem; color: #565f89; font-size: .62rem; border-bottom: 1px solid #222436; }
.om-body { padding: .55rem .7rem; color: #c0caf5; overflow: hidden; white-space: nowrap; }
.om-p { color: #7dcfff; } .om-c { color: #bb9af7; } .om-d { color: #565f89; } .om-r { color: #f7768e; } .om-g { color: #9ece6a; }
.om-k { color: #bb9af7; } .om-f { color: #7aa2f7; } .om-t { color: #ff9e64; } .om-n { color: #3b4261; display: inline-block; width: 1.4rem; } .om-b { color: #e0af68; }
.om-line { display: inline-block; margin-top: .3rem; padding: 0 .4rem; background: #7aa2f7; color: #16161e; font-weight: 600; }
.om-cur { display: inline-block; width: .55em; height: 1.05em; margin-left: .25rem; vertical-align: -.15em; background: #c0caf5; animation: om-blink 1.1s steps(1) infinite; }
@keyframes om-blink { 50% { opacity: 0; } }

/* Buy or rent: a purchase price against the twin of a similar class, in months. */
.rent-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; }
.rent-card { display: flex; flex-direction: column; padding: 1.3rem 1.15rem; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.rent-card h3 { font: 600 .85rem/1.35 var(--mono); min-height: 2.7em; }
.rent-buy { margin-top: .8rem; font: 600 1.7rem/1.1 var(--mono); letter-spacing: -.03em; color: var(--ink); }
.rent-buy small, .rent-twin small { font: 400 .75rem var(--mono); letter-spacing: 0; color: var(--muted); }
.rent-vs { margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--line); font-size: .8rem; color: var(--muted); line-height: 1.45; flex: 1; }
.rent-twin { margin-top: .4rem; font: 600 1.25rem/1.2 var(--mono); color: var(--accent); }
.rent-bar { height: 6px; margin-top: 1rem; border-radius: 3px; background: var(--lavender); overflow: hidden; }
.rent-bar i { display: block; width: var(--w); height: 100%; background: var(--accent); border-radius: 3px; }
.rent-months { margin-top: .55rem; font-size: .8rem; color: var(--muted); line-height: 1.4; }
.rent-months b { font: 700 1rem var(--mono); color: var(--ink); }
.rent-points { list-style: none; margin: 2.25rem 0 0; padding: 1.75rem 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; font-size: .88rem; line-height: 1.55; color: var(--muted); }
.rent-points .icon { width: 20px; height: 20px; color: var(--accent); margin-bottom: .7rem; }
.rent-points strong { display: block; color: var(--ink); font: 600 .85rem/1.4 var(--mono); margin-bottom: .3rem; }
.rent-note { margin-top: 1.5rem; max-width: 110ch; }
.draft { display: inline-block; padding: .15rem .5rem; border: 1px solid currentColor; border-radius: 3px; font: 500 .75rem/1.6 var(--mono); vertical-align: middle; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1rem; }
.plan { border: 1px solid var(--line); border-radius: 10px; padding: 1.4rem 1.25rem; background: var(--paper); display: flex; flex-direction: column; }
.plan.featured { border: 2px solid var(--accent); background: var(--lavender); }
.plan h3 { font: 600 .9rem var(--mono); display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.plan h3 small { font: 500 .7rem var(--mono); color: var(--accent-deep); }
.plan-price { font: 600 2.1rem/1.1 var(--mono); letter-spacing: -.03em; margin-top: 1rem; }
.plan-price small { font: 400 .8rem var(--mono); letter-spacing: 0; color: var(--muted); }
.plan-credits { font: 500 .85rem var(--mono); color: var(--accent); margin-top: .6rem; }
.plan-rate { font: .75rem var(--mono); color: var(--muted); margin-top: .2rem; }
.plan-buys { font-size: .8rem; color: var(--muted); margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.topups { border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem 1.25rem; margin-bottom: 2rem; display: grid; grid-template-columns: auto 1fr; gap: .5rem 2rem; align-items: center; }
.topups h3 { font: 600 .9rem var(--mono); }
.topups p { font-size: .76rem; color: var(--muted); grid-column: 1 / -1; margin: 0; }
.topup-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.topup-list li { border: 1px solid var(--line); border-radius: 5px; padding: .4rem .65rem; font: .75rem var(--mono); white-space: nowrap; }
.topup-list b { color: var(--accent-deep); font-weight: 600; margin-left: .35rem; }
.estimate-money { font: 600 1.15rem var(--mono); margin-top: 1rem; }
.estimate-plan { font: .75rem/1.7 var(--mono); color: #eeebff; margin-top: .2rem; }
.calculator { display: grid; grid-template-columns: 1.2fr 1fr; border: 1px solid var(--ink); border-radius: 12px; overflow: hidden; }
.config-controls { padding: clamp(1.5rem, 3vw, 2.75rem); background: var(--paper); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .field-label { display: block; font: 500 .77rem var(--mono); margin-bottom: .75rem; }
.type-switch { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.type-option { position: relative; }
.type-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.type-option label { display: flex; gap: .8rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--control); border-radius: 5px; font: .8rem var(--mono); cursor: pointer; }
.type-option label .icon { width: 20px; height: 20px; }
.type-option input:checked + label { color: var(--white); background: var(--accent); border-color: var(--accent); }
.type-option input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 4px; }
.type-option input:checked + label::after { content: '✓'; margin-left: auto; }
.config-field { margin-top: 1.5rem; }
select { width: 100%; max-width: 100%; min-width: 0; min-height: 48px; border: 1px solid var(--control); padding: .65rem 2rem .65rem .8rem; border-radius: 5px; color: var(--ink); background: var(--white); font: .75rem var(--mono); text-overflow: ellipsis; }
.field-help { margin-top: .5rem; font-size: .75rem; color: var(--muted); }
.hours-label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.hours-label output { color: var(--accent); font: 600 .94rem var(--mono); white-space: nowrap; }
input[type="range"] { width: 100%; appearance: none; -webkit-appearance: none; background: transparent; min-height: 44px; margin: 0; accent-color: var(--accent); }
input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: var(--lavender-line); }
input[type="range"]::-moz-range-track { height: 5px; border-radius: 3px; background: var(--lavender-line); }
input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; height: 22px; width: 22px; margin-top: -8.5px; background: var(--accent); border: 3px solid var(--white); border-radius: 50%; outline: 1px solid var(--accent); }
input[type="range"]::-moz-range-thumb { height: 16px; width: 16px; background: var(--accent); border: 3px solid var(--white); border-radius: 50%; outline: 1px solid var(--accent); }
.range-scale { display: flex; justify-content: space-between; font: .75rem var(--mono); color: var(--muted); margin-top: -.2rem; }
.days-field { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.days-field legend { padding: 0; margin-bottom: .55rem; }
.days-picker { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--control); border-radius: 5px; overflow: hidden; background: var(--white); }
.days-picker label { position: relative; display: block; }
.days-picker label + label { border-left: 1px solid var(--line); }
.days-picker input { position: absolute; inset: 0; opacity: 0; margin: 0; }
.days-picker span { display: grid; place-items: center; min-height: 44px; font: 600 .82rem var(--mono); color: var(--muted); transition: background .15s, color .15s; }
.days-picker label:hover span { background: var(--lavender); color: var(--accent-deep); }
.days-picker input:checked + span { background: var(--accent); color: var(--white); }
.days-picker input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: -3px; }
.disk-row { display: grid; grid-template-columns: 1fr 125px; gap: 1rem; align-items: center; margin-top: 1.5rem; }
.disk-row .field-label { margin-bottom: .15rem; }
.disk-row .field-help { margin: 0; }
.region-feedback { font-size: .75rem; margin-top: .6rem; color: var(--accent-deep); }
.estimate { color: var(--white); background: var(--accent); padding: clamp(1.5rem, 3vw, 2.75rem); display: flex; flex-direction: column; }
.estimate-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; font: .76rem var(--mono); }
.machine-spec { margin-top: 1.9rem; font: 500 .78rem/1.9 var(--mono); }
.estimate-total { font: 600 clamp(2.7rem, 5.6vw, 5rem)/1.1 var(--mono); letter-spacing: -.04em; margin-top: 1rem; font-variant-numeric: tabular-nums; }
.estimate-unit { font: .9rem var(--mono); margin-top: .45rem; }
.usage-bar { display: flex; height: 10px; gap: 3px; margin-top: 2rem; }

.usage-running { background: var(--lime); width: 18.333%; }
.usage-parked { background: #bab0ff; flex: 1; }
.cost-lines { margin: 1.15rem 0 0; display: grid; gap: 1rem; }
.cost-line { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.cost-line dt { font-size: .86rem; }
.cost-line dt small { display: block; font: .75rem/1.8 var(--mono); color: #eeebff; }
.cost-line dd { margin: 0; font: .79rem/1.8 var(--mono); white-space: nowrap; }
.estimate-assumptions { border-top: 1px solid #a79cf2; padding-top: 1.3rem; margin-top: 1.5rem; font-size: .78rem; color: #eeebff; }
.estimate-footer { margin-top: auto; padding-top: 1.5rem; }
.estimate-footer .button { width: 100%; background: var(--lime); border-color: var(--lime); color: var(--ink); }
.estimate-footer .button:hover { background: var(--white); border-color: var(--white); }
.rates-note { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; margin-top: 1.2rem; color: var(--muted); font-size: .76rem; }
.rates-note p { margin: 0; }
.sizes-details { margin-top: 2rem; border-block: 1px solid var(--line); }
summary { min-height: 55px; padding: 1rem 2rem 1rem 0; position: relative; list-style: none; font-size: .96rem; font-weight: 550; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: .2rem; top: .85rem; font: 400 1.35rem var(--mono); color: var(--accent); }
details[open] > summary::after { content: '−'; }
.sizes-table { width: 100%; border-collapse: collapse; font: .76rem/1.6 var(--mono); margin-bottom: 1.5rem; }
.sizes-table th, .sizes-table td { text-align: left; padding: .75rem .5rem; border-top: 1px solid var(--line); }
.sizes-table th { font-weight: 500; color: var(--muted); }
.sizes-table td:last-child { color: var(--accent); }
.cli-heading { margin-bottom: 2.5rem; }
.cli-heading p { color: var(--muted); max-width: 50ch; margin-top: 1rem; }
.cli-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.5rem; }
.cli-row { display: flex; gap: 1rem; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding: .8rem 0; min-width: 0; }
.cli-row code { color: var(--accent-deep); font-size: .76rem; overflow-wrap: anywhere; }
.cli-row p { color: var(--muted); font-size: .82rem; margin-top: .15rem; }
.cli-row .copy { flex-shrink: 0; }
.cli-note { margin-top: 1.8rem; font-size: .8rem; color: var(--muted); max-width: 70ch; }
.faq { background: var(--white); border-block: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: .75fr 1.3fr; gap: 4rem; }
.faq-title p { margin-top: 1rem; color: var(--muted); max-width: 23ch; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:first-child { border-top: 0; }
.faq-list summary { padding-block: 1.25rem; padding-right: 2.5rem; font-size: 1rem; }
.faq-list summary::after { top: 1.1rem; }
.faq-list details p { color: var(--muted); font-size: .93rem; padding-bottom: 1.4rem; max-width: 65ch; }
.faq-list details code { color: var(--accent-deep); }
.final { background: var(--lavender); position: relative; overflow: hidden; }
.final-grid { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 4rem; }
.final h2 { font-size: clamp(2.2rem, 4.6vw, 4.1rem); max-width: 15ch; }
.final h2 span { color: var(--accent); }
.final p { color: var(--muted); margin-top: 1.25rem; }
.launch-panel { border-top: 2px solid var(--accent); padding-top: 1.3rem; }
.launch-panel h3 { font: 600 1rem var(--mono); }
.launch-panel .install-line { margin-top: 1rem; max-width: none; }
.launch-panel .install-line code { font-size: .75rem; }
.launch-panel p { font-size: .8rem; }
.launch-values { margin: 1.25rem 0 0; display: grid; gap: .55rem; font-size: .76rem; }
.launch-values div { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.launch-values dd { font-family: var(--mono); color: var(--accent-deep); margin: 0; overflow-wrap: anywhere; }
@media (min-width: 1450px) { .hero { gap: 3.75rem; } }
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr 1.08fr; gap: 1.5rem; }
  h1 { font-size: clamp(2.8rem, 5.4vw, 3.8rem); }
  .nav-links { gap: 1.3rem; }
  .nav-cta { margin-left: 0; }
  .setup-flow { gap: 1.75rem; }
}
@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr; gap: 3rem; padding-top: 3rem; }
  .hero-copy { max-width: 610px; }
  h1 { font-size: clamp(3rem, 8.5vw, 4.8rem); max-width: 14ch; }
  .hero-description { max-width: 44ch; }
  .twin-demo { width: min(100%, 610px); margin-inline: auto; }
  .lid-stage { aspect-ratio: auto; }
  .lid-scene { position: relative; grid-template-columns: 1fr; grid-template-rows: auto 48px auto; padding: 20px; gap: 4px; }
  .lid-laptop { width: 62%; justify-self: center; }
  .lid-link { height: 48px; width: 2px; justify-self: center; }
  .lid-link::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px dashed var(--lavender-line); }
  .lid-chip { display: none; }
  .lid-twin { height: 220px; }
  .nav-links .optional-nav { display: none; }
  .feature-rail { display: grid; grid-template-columns: 1fr 1fr; row-gap: 1rem; }
  .selling-points { grid-template-columns: 1fr 1fr; }
  .section-intro { align-items: start; gap: 1.5rem; flex-direction: column; }
  .section-intro > p { max-width: 55ch; }
  .belongings-grid { grid-template-columns: .8fr 1.2fr; gap: 2rem; }
  .agents-grid { gap: 2rem; }
  .tool-controls { grid-template-columns: 1fr 1fr; }
  .mcp-path { min-height: 73px; }
  .agents-bottom { flex-wrap: wrap; }
  .calculator { grid-template-columns: 1.05fr 1fr; }
  .plans { grid-template-columns: 1fr 1fr; }
  .rent-grid, .rent-points { grid-template-columns: 1fr 1fr; }
  .omarchy-grid { grid-template-columns: 1fr; }
  .topups { grid-template-columns: 1fr; }
  .estimate-total { font-size: 2.8rem; }
  .config-controls, .estimate { padding: 1.5rem; }
  .cost-line { flex-direction: column; gap: .25rem; }
  .faq-grid { grid-template-columns: .6fr 1.4fr; gap: 2rem; }
  .final-grid { gap: 2rem; }
}
@media (max-width: 620px) {
  .site-nav { min-height: 76px; gap: 1rem; }
  .brand { font-size: 1.3rem; gap: .35rem; }
  .brand svg { width: 30px; height: 30px; }
  .nav-links { gap: .75rem; font-size: .75rem; }
  .nav-links .mobile-hide { display: none; }
  .nav-cta { font-size: .75rem; padding: .55rem .7rem; min-height: 42px; gap: .4rem; }
  .nav-cta .icon { width: 15px; height: 15px; }
  .hero { padding-bottom: 2rem; gap: 2.5rem; }
  h1 { font-size: clamp(2.8rem, 10.9vw, 4rem); line-height: 1.15; }
  .hero-description { font-size: 1.06rem; margin-top: 1.35rem; }
  .hero-actions { margin-top: 1.5rem; gap: 1rem; }
  .hero-actions .button { font-size: .75rem; }
  .hero-actions .text-link { font-size: .83rem; }
  .install-line { margin-top: 1.3rem; }
  .install-line code { font-size: .75rem; }
  .install-hero { margin-top: 1.5rem; gap: .6rem; padding-left: .85rem; }
  .install-hero code { font-size: .78rem; }
  .install-hero .copy span { display: none; }
  .feature-rail { font-size: .75rem; gap: 1rem .8rem; }
  .selling-points { grid-template-columns: 1fr; gap: 1.1rem; }
  .feature-rail span { gap: .4rem; }
  .feature-rail .icon { width: 15px; }
  .setup-flow { grid-template-columns: 1fr; gap: 2rem; }
  .setup-step { padding-top: 1.2rem; }
  .setup-proof { min-height: 40px; margin-bottom: .9rem; }
  .setup-step p { max-width: 46ch; }
  .belongings-grid, .agents-grid, .privacy-grid, .calculator, .faq-grid, .final-grid { grid-template-columns: 1fr; }
  .belongings-intro { position: relative; }
  .belongings-intro h2 { max-width: 13ch; }
  .carry { max-width: none; margin-top: 1.75rem; }
  .belongings-intro > p { max-width: 38ch; }
  .manifest-row { grid-template-columns: 28px 1fr; gap: .85rem; }
  .manifest-icon { width: 24px; height: 24px; }
  .carryover { grid-template-columns: 1fr; margin-top: 2.5rem; gap: 1.5rem; }
  .agents-copy h2 { max-width: 15ch; }
  .tool-controls { grid-template-columns: repeat(4, 1fr); }
  .tool-detail { min-height: 210px; }
  .agents-bottom { margin-top: 2rem; gap: 1rem; }
  .agents-bottom span { max-width: none; width: 100%; }
  .privacy-facts { flex-direction: column; gap: 1.2rem; }
  .private-network { padding: 1.4rem; }
  .network-node { width: 100px; }
  .estimate { min-height: 530px; }
  .estimate-total { font-size: clamp(3rem, 13vw, 4.6rem); }
  .cost-line { flex-direction: row; gap: .7rem; }
  .machine-spec { margin-top: 1.5rem; }
  .rates-note { grid-template-columns: 1fr; gap: .8rem; }
  .plans { grid-template-columns: 1fr; }
  .rent-grid, .rent-points { grid-template-columns: 1fr; }
  .rent-card h3 { min-height: 0; }
  .om-tiles { grid-template-columns: 1fr; aspect-ratio: auto; }
  .om-desk { font-size: .66rem; }
  .sizes-table { font-size: .75rem; }
  .sizes-table th, .sizes-table td { padding-inline: .2rem; }
  .cli-list { grid-template-columns: 1fr; }
  .faq-title p { max-width: 38ch; }
  .faq-list summary { font-size: .95rem; }
  .final h2 { max-width: 14ch; }
  .final .install-line code { font-size: .75rem; }
  .footer { align-items: start; }
  .footer p { width: 100%; order: 3; }
  .footer-links { font-size: .75rem; gap: .8rem; }
}