/* Silan home v3. Values come from the Pen frame "Home - final (8 Nov)" (Q9XpUe).
   Drawn Silan windows use the real app's dark colours, sampled from the RC-1 and RC-3 Mac recordings. */
@font-face { font-family: "Geist"; src: url("../fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #0A0A0A; --surface: #111111; --surface-2: #141414;
  --fg: #F5F5F5; --muted: #858585; --nav: #FFFFFFA6; --tag: #FFFFFF8C;
  --line: #FFFFFF0F; --border: #FFFFFF14; --border-strong: #FFFFFF1F;
  --success: #34D399; --warning: #FE9A00; --danger: #FF6467; --agent: #8B5CF6;
  --sans: "Geist", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --app: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
.i { width: 16px; height: 16px; flex: none; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 100; background: var(--fg); color: var(--bg); padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.skip:focus { top: 12px; }
.mark { display: block; color: #fff; }
.mute { color: #FFFFFF73; }
.wrap { width: min(1152px, 100% - 48px); margin-inline: auto; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 8px; font-size: 14.5px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background-color .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn-light { background: var(--fg); color: var(--bg); }
.btn-light:hover { background: #fff; transform: translateY(-1px); }
.btn-dark { background: #FFFFFF05; color: var(--fg); border: 1px solid var(--border-strong); }
.btn-dark:hover { background: #FFFFFF0F; border-color: #FFFFFF33; transform: translateY(-1px); }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15px; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13.5px; gap: 7px; }
.btn-sm .i { width: 15px; height: 15px; }

/* Top bar */
.top { position: sticky; top: 0; z-index: 50; background: #0A0A0ACC; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1200px; height: 64px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 40px; }
.logo { display: inline-flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 600; letter-spacing: -0.36px; }
.logo .mark { width: 15px; height: 22px; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 500; color: var(--nav); transition: color .2s var(--ease); }
.nav-link:hover, .nav-link[aria-expanded="true"] { color: #fff; }
.nav-link .i { width: 13px; height: 13px; }
.menu-wrap { position: relative; }
.menu { position: absolute; top: calc(100% + 20px); left: -24px; width: 720px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 64px #000000CC; }
.menu[hidden] { display: none; }
.menu-head { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.menu-col a { display: block; padding: 5px 0; font-size: 13.5px; color: #FFFFFFCC; transition: color .2s var(--ease); }
.menu-col a:hover { color: #fff; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.icon-link { color: var(--nav); display: inline-flex; transition: color .2s var(--ease); }
.icon-link:hover { color: #fff; }
.icon-link .i { width: 18px; height: 18px; }
.menu-btn { display: none; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border-strong); position: relative; }
.menu-btn span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: #fff; border-radius: 1px; transition: transform .4s var(--ease); }
.menu-btn span:first-child { top: 15px; }
.menu-btn span:last-child { top: 22px; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.sheet { position: fixed; inset: 64px 0 0 0; z-index: 49; background: #0A0A0AF7; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); overflow-y: auto; }
.sheet[hidden] { display: none; }
.sheet-in { padding: 24px 16px 48px; display: flex; flex-direction: column; }
.sheet-btns { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.sheet .menu-head { margin: 20px 0 6px; }
.sheet-in > a { font-size: 17px; padding: 10px 0; border-bottom: 1px solid var(--line); color: #FFFFFFD9; }

/* 1 Hero */
.hero { padding: 64px 0 96px; background: radial-gradient(ellipse 55% 45% at 50% 62%, #FFFFFF0D, transparent); }
.hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; background: #FFFFFF08; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; color: #FFFFFFB3; }
.pill .mark { width: 9px; height: 14px; }
h1 { margin-top: 28px; max-width: 1024px; font-size: 72px; line-height: 72px; font-weight: 500; letter-spacing: -2.16px; text-wrap: balance; }
.lede { font-size: 21px; line-height: 30px; color: var(--muted); max-width: 672px; text-wrap: pretty; }
.hero .lede { margin-top: 24px; max-width: 760px; }
.btns { display: flex; gap: 12px; justify-content: center; margin-top: 36px; }
.small-line { margin-top: 16px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.small-line .i { width: 13px; height: 13px; }

/* Fit: a fixed-size drawing scaled to its box (JS sets --k and the height) */
.fit { position: relative; width: 100%; }
html:not(.js) .fit { overflow: hidden; }
.js .fit { height: var(--fit-h, auto); }
.js .fit > .fit-in { position: absolute; top: 0; left: var(--fit-x, 0px); transform: scale(var(--k, 1)); transform-origin: 0 0; }
/* The shared device frame and screen clip shapes. They must stay in the page (not display: none) so url(#cp-ip) works. */
.dev-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.stage-fit { margin-top: 40px; }
.stage { width: 1248px; height: 900px; position: relative; }

/* Drawn Silan window: real app look */
.app { font-family: var(--app); color: #F2F2F2; letter-spacing: 0; }
.hero-app { position: absolute; left: 40px; top: 150px; width: 792px; height: 640px; display: flex; overflow: hidden; background: #0F0F0F; border: 1px solid #FFFFFF1A; border-radius: 20px; }
.stage::before { content: ""; position: absolute; left: 40px; top: 150px; width: 792px; height: 640px; border-radius: 20px; box-shadow: 0 24px 64px #000000CC; }
.sb { width: 235.5px; flex: none; background: #000; border-right: 1px solid var(--line); padding: 12px 10px 10px; display: flex; flex-direction: column; gap: 2px; }
.sb-top { display: flex; align-items: center; gap: 7px; height: 22px; padding: 0 6px; margin-bottom: 12px; }
.tl { width: 11px; height: 11px; border-radius: 50%; }
.tl.r { background: #FF5F57; } .tl.y { background: #FEBC2E; } .tl.g { background: #28C840; }
.sb-toggle { margin-left: 14px; width: 15px; height: 15px; color: #FFFFFF80; }
.sb-item { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border-radius: 7px; font-size: 12.5px; color: #FFFFFFB3; }
.sb-item .i { width: 15px; height: 15px; color: #FFFFFF99; }
.sb-item em { margin-left: auto; font-style: normal; font-size: 11.5px; color: #FFFFFF73; }
.sb-strong { color: #fff; font-weight: 600; }
.sb-strong .i { color: #fff; }
.sb-head { display: flex; align-items: center; justify-content: space-between; margin: 12px 8px 5px; font-size: 11.5px; color: #FFFFFF80; }
.sb-head .i { width: 13px; height: 13px; }
.sb-head span { display: inline-flex; align-items: center; gap: 4px; }
.chat-card { position: relative; border-radius: 9px; padding: 8px 10px 9px; }
.chat-card.is-on { background: #1A1A1A; }
.cc-meta { display: flex; justify-content: space-between; font-size: 11px; color: #FFFFFF80; }
.cc-meta span { display: inline-flex; align-items: center; gap: 5px; }
.cc-meta .i { width: 11px; height: 11px; }
.cc-title { margin-top: 3px; padding-right: 14px; font-size: 12.5px; color: #F5F5F5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-card:not(.is-on) .cc-title { color: #FFFFFFB3; }
.cc-spin { position: absolute; right: 9px; bottom: 8px; width: 12px; height: 12px; color: #FFFFFFA6; }
.sb-fill { flex: 1; }
.sb-rack { margin-top: 0; }
.sb-item.is-sel { background: #1A1A1A; color: #fff; }
.dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #FFFFFF59; }
.dot-agent { background: var(--agent); }
.dot-off { background: #FFFFFF26; }
.sb-icons { display: flex; align-items: center; gap: 13px; margin-top: 8px; padding: 10px 6px 0; border-top: 1px solid var(--line); color: #FFFFFF80; }
.sb-icons .i { width: 14px; height: 14px; }
.sb-icons .sb-last { margin-left: auto; }
.pane { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #0F0F0F; }
.pane-head { height: 46px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.ph-dev { font-size: 13px; font-weight: 600; }
.pane-head .chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 11px; color: #FFFFFFA6; }
.pane-head .chip .i { width: 11px; height: 11px; }
.ph-icons { margin-left: auto; display: flex; gap: 14px; color: #FFFFFF80; }
.ph-icons .i { width: 15px; height: 15px; }
.pane-body { flex: 1; min-height: 0; overflow: hidden; padding: 14px 18px 0; }
.title-row { display: flex; align-items: center; gap: 10px; color: #FFFFFF80; }
.title-row > .i { width: 15px; height: 15px; }
.chat-title { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.2px; }
.ghost-btn { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: 7px; font-size: 11.5px; color: #FFFFFFB3; white-space: nowrap; }
.ghost-btn .i { width: 12px; height: 12px; }
.light-btn { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 7px; background: var(--fg); color: var(--bg); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.light-btn .i { width: 11px; height: 11px; }
.using { margin: 2px 0 14px; font-size: 11.5px; color: #FFFFFF73; }
.bubble { margin-left: auto; max-width: 400px; background: #1B1B1B; border: 1px solid #FFFFFF12; border-radius: 14px; padding: 10px 13px; font-size: 12.5px; line-height: 19px; color: #F2F2F2; }
.worked { margin: 16px 0 10px; display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: #E6E6E6; }
.worked span { color: #FFFFFF80; }
.worked .i { width: 12px; height: 12px; color: #FFFFFF80; }
.working { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: #fff; font-weight: 500; margin-bottom: 4px; }
.working .mute { font-weight: 400; }
.working .i { width: 12px; height: 12px; color: #FFFFFF80; }
.steps li { display: flex; align-items: center; gap: 9px; height: 27px; font-size: 12.5px; color: #FFFFFFB3; }
.steps .i { width: 13px; height: 13px; color: #FFFFFF80; }
.steps .st-go { margin-left: auto; width: 12px; height: 12px; color: #FFFFFF4D; }
.steps .is-now { color: #fff; background: #FFFFFF0A; border-radius: 6px; margin: 0 -6px; padding: 0 6px; }
.steps .is-now .i { color: #fff; }
/* Home hero: the real RC-1 chat. site.js section 11 redraws the run from the phone clip's time. */
.rc1-pane { display: flex; flex-direction: column; }
.rc1-pane .title-row { align-items: flex-start; }
.rc1-pane .title-row > .i { margin-top: 3px; }
.chat-title.two { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 15px; line-height: 20px; }
.rc1-chat { position: relative; flex: 1; min-height: 0; overflow: hidden; padding-bottom: 8px; }
.rc1-chat .bubble { max-width: 470px; }
.rc1-run { margin-top: 16px; }
.rc1-run .working { padding-bottom: 7px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.rc1-run .retry { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: #F59A07; }
.rc1-run .retry .i { color: #F59A07; }
.rc1-steps { max-height: 202px; overflow: hidden; }
.steps .st-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-t b { font-weight: 400; color: #fff; }
.st-t em { font-style: normal; font-size: 11.5px; color: #FFFFFF66; }
.steps .is-wait .st-t { color: #fff; }
.rc1-live { display: flex; align-items: center; gap: 9px; height: 27px; padding-left: 3px; font-size: 12.5px; color: #FFFFFFB3; }
.rc1-live .i { width: 13px; height: 13px; color: #FFFFFF80; }
.rc1-card { margin: 10px 0 2px; border: 1px solid #FFFFFF73; border-radius: 12px; padding: 12px 14px 14px; }
.rc1-card-top { display: flex; align-items: flex-start; gap: 10px; }
.rc1-card-ic { flex: none; width: 26px; height: 26px; border-radius: 7px; background: #FFFFFF14; display: grid; place-items: center; }
.rc1-card-ic .i { width: 13px; height: 13px; color: #fff; }
.rc1-card-title { flex: 1; padding-top: 4px; font-size: 12.5px; line-height: 18px; font-weight: 600; color: #fff; }
.rc1-waits { flex: none; padding-top: 5px; font-size: 11.5px; color: #FFFFFF80; }
.rc1-waits b { font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.rc1-detail { margin: 8px 0 4px; font-size: 12px; color: #FFFFFF80; }
.rc1-opt { display: flex; gap: 9px; margin-top: 7px; }
.rc1-opt .radio { flex: none; width: 13px; height: 13px; margin-top: 2px; border-radius: 50%; border: 1px solid #FFFFFF40; }
.rc1-opt.is-on .radio { border-color: #fff; background: #fff; box-shadow: inset 0 0 0 3px #0F0F0F; }
.rc1-opt p { font-size: 12px; line-height: 17px; color: #FFFFFFB3; }
.rc1-opt .sub { font-size: 11px; color: #FFFFFF73; }
.rc1-btns { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.rc1-approve { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 7px; background: #F5F5F5; color: #0A0A0A; font-size: 12px; font-weight: 500; }
.rc1-stop { font-size: 12px; color: #FFFFFFB3; }
.cc-wait { width: 6px; height: 6px; border-radius: 50%; background: #F59A07; }
.dot.dot-wait { background: #F59A07; }
.composer { flex: none; margin: 10px 14px 14px; background: #111; border: 1px solid var(--border); border-radius: 14px; padding: 12px 12px 10px; }
.cmp-ph { font-size: 12.5px; color: #FFFFFF59; margin: 0 0 12px 2px; }
.cmp-row { display: flex; align-items: center; gap: 6px; }
.pick { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 7px; background: #FFFFFF08; border: 1px solid #FFFFFF12; font-size: 11.5px; color: #FFFFFFCC; }
.pick .i { width: 11px; height: 11px; }
.pick .i:last-child { color: #FFFFFF66; }
.stop-btn { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; background: var(--fg); display: grid; place-items: center; }
.stop-btn b { width: 9px; height: 9px; border-radius: 2px; background: var(--bg); }
.spin, .cc-spin { animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Phones */
/* Phones and tablets: our own SVG frame (.fr), drawn from the geometry of Apple's Simulator files (iPhone 15 Pro Max:
   466 x 968 pt body, 430 x 932 pt screen at 18 pt; iPad Air 11-inch M3: 938 x 1298 pt body, 820 x 1180 pt screen at 59 pt).
   The screen (.scr) is clipped to Apple's exact screen mask (continuous corners). The island sits on top. */
.phone, .shot { position: relative; flex: none; aspect-ratio: 466 / 968; border-radius: 15.88% / 7.64%; box-shadow: var(--lift, none); }
.tab-dev { position: relative; flex: none; aspect-ratio: 938 / 1298; border-radius: 8.64% / 6.24%; }
.fr { position: absolute; top: 0; left: -1.073%; width: 102.146%; height: 100%; overflow: visible; pointer-events: none; }
.tab-dev .fr { left: 0; top: -0.385%; width: 100.533%; height: 100.385%; }
.scr { position: absolute; left: 3.863%; top: 1.86%; width: 92.275%; height: 96.281%; overflow: hidden; background: #F2F2F2;
  border-radius: 12.8% / 5.9%; clip-path: url(#cp-ip); -webkit-clip-path: url(#cp-ip); isolation: isolate; transform: translateZ(0); }
.scr.scr-dark { background: #000; } /* dark-mode recordings: no light edge round the clip */
.tab-dev .scr { left: 6.29%; top: 4.545%; width: 87.42%; height: 90.909%; background: #111; border-radius: 3.1% / 2.16%; clip-path: url(#cp-pad); -webkit-clip-path: url(#cp-pad); }
.scr > .screen, .scr > video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.island { position: absolute; left: 36.588%; top: 2.996%; width: 26.824%; height: 3.822%; border-radius: 999px; background: #000; pointer-events: none; }
.hero-phone { position: absolute; left: 820px; top: 54px; width: 380px; --lift: 0 32px 80px #000000E6; }
.control-card { position: absolute; left: 1036px; top: 610px; width: 200px; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px #000000B3; font-family: var(--app); }
.control-card .cc-dev { font-size: 12.5px; font-weight: 600; color: #fff; }
.control-card .cc-dev span { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 400; color: #FFFFFF80; }
.control-card .cc-label { font-size: 12px; color: var(--muted); }
.seg { display: flex; gap: 2px; padding: 2px; background: #FFFFFF0D; border-radius: 8px; font-family: var(--app); }
.seg span { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 6px; font-size: 12px; font-weight: 500; color: #FFFFFF99; }
.seg span.on { background: var(--fg); color: var(--bg); }
.seg .i { width: 12px; height: 12px; }

/* Sections */
.sec { padding: 96px 0; border-top: 1px solid var(--line); }
.sec-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }
.sec-head.row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; }
.sec-head.row > div:first-child { display: flex; flex-direction: column; gap: 16px; }
h2 { font-size: 48px; line-height: 48px; font-weight: 500; letter-spacing: -1.2px; text-wrap: balance; }
.label { font-family: var(--mono); font-size: 12px; line-height: 18px; letter-spacing: 1px; color: var(--muted); }

/* 2 Hub */
.hub { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr) 240px minmax(0, 1fr) minmax(0, 290px); align-items: center; }
.hub-col .label { margin-bottom: 14px; }
.hub-list { display: flex; flex-direction: column; gap: 8px; }
.hub-list li { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; background: #FFFFFF06; border: 1px solid #FFFFFF0D; border-radius: 10px; font-size: 14px; }
.hub-list .i { color: #FFFFFFB3; }
.hub-list .dim { color: #FFFFFF73; background: transparent; border-style: dashed; border-color: var(--border-strong); }
.hub-list .dim .i { color: #FFFFFF73; }
.hub-link { padding: 0 16px; text-align: center; }
.hub-link p { font-family: var(--mono); font-size: 12px; line-height: 18px; color: #FFFFFF99; margin-bottom: 12px; }
.wire { position: relative; height: 1px; background: #FFFFFF33; overflow: visible; }
.wire b { position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #FFFFFF66; }
.wire b:first-child { left: -3px; } .wire b:last-child { right: -3px; }
.wire::after { content: ""; position: absolute; top: -1px; left: 0; width: 24px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff); animation: pulse 2.8s var(--ease) infinite; }
@keyframes pulse { from { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateX(calc(var(--w, 120px) - 24px)); opacity: 0; } }
.station { width: 240px; padding: 36px 24px; text-align: center; background: #FFFFFF08; border: 1px solid var(--border); border-radius: 20px; }
.station .mark { width: 40px; height: 60px; margin: 0 auto 18px; }
.st-name { font-size: 22px; font-weight: 500; }
.st-sub { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--muted); }

/* 3 Tour */
.tabs { display: flex; gap: 6px; }
.tabs button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border); background: #FFFFFF05; color: #FFFFFFB3; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease); }
.tabs button:hover { color: #fff; background: #FFFFFF0D; }
.tabs button[aria-selected="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.tabs .i { width: 15px; height: 15px; }
.plan-chip { margin-left: 4px; padding: 2px 5px; border-radius: 4px; background: #FFFFFF12; font-family: var(--mono); font-size: 10px; line-height: 12px; color: #FFFFFFB3; }
.tabs [aria-selected="true"] .plan-chip { background: #0000000F; color: #0A0A0A99; }
.tp { display: grid; grid-template-columns: minmax(0, 445px) minmax(0, 667px); gap: 40px; margin-top: 40px; }
.tp[hidden] { display: none; }
.tp-text { padding-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.count { font-family: var(--mono); font-size: 12px; line-height: 16px; letter-spacing: 1.2px; color: var(--tag); }
.tp-text h3 { font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -0.56px; }
.tp-lede { font-size: 17px; line-height: 26px; color: var(--muted); text-wrap: pretty; }
.facts { display: flex; flex-direction: column; gap: 12px; }
.facts li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; line-height: 22px; color: #FFFFFFCC; }
.facts .i { color: #FFFFFFB3; }
.more { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; transition: gap .3s var(--ease); }
.more:hover { gap: 10px; }
.more .i { width: 15px; height: 15px; }
.prog { position: relative; height: 2px; background: #FFFFFF14; margin-top: 4px; }
.prog b { position: absolute; inset: 0; background: var(--fg); transform-origin: 0 0; transform: scaleX(1); }
.tour-auto .prog b { transform: scaleX(0); animation: fill 10s linear forwards; }
.tour-auto.is-paused .prog b, .tour-auto.is-held .prog b { animation-play-state: paused; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.frame { width: 667px; height: 460px; background: var(--surface); border: 1px solid #FFFFFF0D; border-radius: 37px; padding: 16px; }
.scene { position: relative; height: 100%; display: flex; overflow: hidden; background: #0B0B0B; border: 1px solid var(--line); border-radius: 20px; font-family: var(--app); color: #F2F2F2; }
.sc-chat { flex: 1; min-width: 0; padding: 18px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.sc-dev { width: 229.5px; flex: none; display: flex; flex-direction: column; background: #050505; border-left: 1px solid var(--line); }
.rp-tabs { display: flex; gap: 12px; height: 32px; flex: none; align-items: flex-end; padding: 0 12px; border-bottom: 1px solid #FFFFFF0D; font-size: 11px; color: #FFFFFF80; }
.rp-tabs span { padding-bottom: 8px; }
.rp-tabs .on { color: #fff; border-bottom: 1.5px solid #fff; padding-bottom: 6.5px; }
.rp-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 8px 10px 12px; }
.ph-sm { width: 172px; }
.tools { width: 24px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 9px 0; background: #0F0F0F; border: 1px solid var(--line); border-radius: 8px; color: #FFFFFF80; }
.tools .i { width: 13px; height: 13px; }
.bubble.sm { max-width: 340px; font-size: 12px; line-height: 18px; padding: 9px 12px; border-radius: 12px; }
.steps.sm li { height: 24px; font-size: 12px; }
.working.sm { font-size: 12px; margin: 0; }
.answer { background: #111; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.ok { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--success); }
.ok .i { width: 13px; height: 13px; }
.an-title { margin: 7px 0 4px; font-size: 15px; font-weight: 600; color: #fff; }
.an-text { font-size: 12px; line-height: 18px; color: #FFFFFF99; }
.an-btns { display: flex; gap: 6px; margin-top: 10px; }
.plan { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.plan-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.plan-head .i { width: 14px; height: 14px; }
.plan-head span { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; font-weight: 400; color: #FFFFFF66; }
.job { background: #FFFFFF05; border: 1px solid #FFFFFF0D; border-radius: 9px; padding: 8px 10px; }
.job-top { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.job-top .i { width: 13px; height: 13px; color: #FFFFFFB3; }
.st { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 1px 6px; border-radius: 5px; font-size: 11px; font-weight: 500; }
.st .i { width: 11px; height: 11px; color: inherit; }
.st-run { color: #FFFFFFB3; background: #FFFFFF0D; }
.st-wait { color: var(--warning); background: #FE9A001F; }
.job-sub { margin: 4px 0 0 20px; font-size: 11.5px; line-height: 16px; color: #FFFFFF99; }
.job-btns { display: flex; gap: 5px; margin: 7px 0 0 20px; }
.job-btns span { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 11px; color: #FFFFFFCC; }
.job-btns .i { width: 11px; height: 11px; }
/* The two-device panel (tab 2). A class, not the tab id, so the copy in the scene pop-up keeps it. */
#tp-1 .sc-dev, .sc-dev-wide { width: 286px; }
.rp-two { flex: 1; min-height: 0; display: flex; align-items: flex-start; justify-content: center; gap: 10px; padding: 14px 12px 10px; }
.dv-name { font-size: 10.5px; color: #FFFFFF80; margin-bottom: 6px; white-space: nowrap; }
.tab-dev { width: 150px; }
.ph-xs { width: 98px; }
.badge-wait { position: absolute; left: 50%; top: 46%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: #000000B3; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 10.5px; font-weight: 500; white-space: nowrap; }
.badge-wait .i { width: 10px; height: 10px; }
.badge-wait.wide { font-size: 11.5px; padding: 5px 10px; }
.value-line { margin: 0 12px 14px; display: flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-family: var(--mono); font-size: 11px; color: #FFFFFFB3; }
.value-line .i { width: 12px; height: 12px; }
.ph-label { position: absolute; top: -9px; left: -6px; z-index: 2; padding: 2px 6px; border-radius: 4px; background: var(--warning); color: #0A0A0A; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.4px; white-space: nowrap; }
.ph-label.inline { position: static; margin-left: auto; }
.ask { background: #111; border: 1px solid #FFFFFF26; border-radius: 12px; padding: 12px 14px; }
.ask-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.ask-head .i { width: 14px; height: 14px; color: var(--warning); }
.ask-text { margin: 6px 0 10px; font-size: 12px; line-height: 18px; color: #FFFFFF99; }
.ask-row { display: flex; gap: 6px; margin-top: 6px; }
.ask-row.end { justify-content: flex-end; }
.stop-all { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 12px; white-space: nowrap; overflow: hidden; }
.stop-all b { font-size: 12.5px; font-weight: 600; }
.sc-chat .stop-all { flex: none; margin-top: auto; }  /* stays at the foot of the chat when the ask card hides */
/* Tabs 2 and 3 (RC-3, RC-6): the plan's wait line, the "Needs you" chip, and the ask card inside the job that needs you,
   as Silan shows them. site.js turns labels on and off with .is-off as the clip plays (section 10). */
.plan-wait { display: flex; align-items: center; gap: 6px; font-size: 11.5px; line-height: 16px; color: #FFFFFF99; }
.plan-wait .i { flex: none; width: 12px; height: 12px; }
.st-need { color: var(--warning); background: transparent; box-shadow: inset 0 0 0 1px var(--warning); }
.is-off { display: none !important; }
.ask-in { margin: 8px 0 0 20px; padding: 10px 12px; border-radius: 10px; }
.ask-in .ask-head { align-items: flex-start; font-size: 12px; line-height: 17px; }
.ask-in .ask-head .i { flex: none; margin-top: 1px; color: #FFFFFFB3; }
.ask-in .ask-text { margin: 5px 0 7px; font-size: 11px; line-height: 15px; }
.ask-opt { display: flex; align-items: center; gap: 7px; margin-right: auto; font-size: 11.5px; color: #FFFFFFCC; }
.ask-in .ask-row { align-items: center; margin-top: 0; }
.radio { flex: none; width: 12px; height: 12px; border: 1px solid #FFFFFF66; border-radius: 50%; }
.radio.on { border: 3.5px solid #fff; }
/* A live label is one line, cut with "…" as in Silan. */
.job-sub.one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-tight { gap: 6px; }
.chat-tight { gap: 8px; }
.keys { display: inline-flex; gap: 3px; }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border: 1px solid #FFFFFF26; border-radius: 5px; background: #FFFFFF08; font-family: var(--app); font-size: 11px; color: #fff; }
.hidden-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 6px; border: 1px solid var(--border-strong); border-radius: 5px; font-family: var(--mono); font-size: 10.5px; color: #FFFFFF80; }
.steps .hidden-chip .i { width: 10px; height: 10px; }
.vault-card { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.vc-top { display: flex; align-items: center; gap: 10px; }
.vc-icon { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-strong); display: grid; place-items: center; }
.vc-icon .i { width: 14px; height: 14px; }
.vc-top b { display: block; font-size: 13px; font-weight: 600; }
.vc-top em { display: block; font-style: normal; font-size: 11.5px; color: #FFFFFF80; }
.vc-chips, .fl-chips { display: flex; gap: 6px; margin-top: 10px; }
.vc-chips span, .fl-chips span { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 7px; font-size: 11.5px; color: #FFFFFFCC; white-space: nowrap; }
.vc-chips .i, .fl-chips .i { width: 12px; height: 12px; }
.flow { display: flex; flex-direction: column; gap: 10px; }
.fl-top { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.fl-top b { font-weight: 600; }
.fl-top .light-btn { margin-left: auto; }
.fl-sub { font-size: 12px; color: #FFFFFF80; }
.fl-chips { margin-top: 0; }
.fl-steps { border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px; }
.fl-steps li { display: flex; align-items: center; gap: 10px; height: 31px; font-family: var(--mono); font-size: 11.5px; color: #FFFFFFCC; }
.fl-steps .i { width: 13px; height: 13px; color: var(--success); }
.fl-steps span { width: 10px; color: #FFFFFF66; }
.fl-steps em { margin-left: auto; font-style: normal; color: #FFFFFF59; }
/* Round-2 batch 3: the RC-5b flow has 10 steps. Rows are tighter, and the two long step names wrap at a space. */
.flow:has(.fl-ten) { gap: 8px; }
.fl-ten { padding: 4px 12px; }
.fl-ten li { height: auto; min-height: 24px; padding: 4px 0; gap: 8px; font-size: 11px; line-height: 15px; }
.fl-steps .fl-t { flex: 1; min-width: 0; font-weight: inherit; overflow-wrap: break-word; }
.fl-ten em { flex: none; }
.scene-shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.scene.team { flex-direction: column; gap: 10px; padding: 18px; }
.tm-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tm-head b { font-weight: 600; }
.tm-head .mute { font-size: 12px; }
.tm-dev { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.tm-dev > div { flex: 1; }
.tm-dev p b { font-size: 13.5px; font-weight: 600; margin-right: 8px; }
.tm-dev p .mute { font-size: 11.5px; }
.tm-icon { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border-strong); display: grid; place-items: center; }
.tm-who { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 12px; color: #FFFFFFB3; }
.av { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 600; color: #0A0A0A; flex: none; }
.a1 { background: #D4D4D4; } .a2 { background: #7DD3FC; } .a3 { background: #FDE047; }
.tm-act { margin-top: 8px; }
.tm-log li { display: flex; align-items: center; gap: 9px; height: 30px; font-size: 12.5px; color: #FFFFFFCC; }
.tm-log em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 11px; color: #FFFFFF59; }

/* 4 Five jobs */
.jobs { display: flex; flex-direction: column; }
.job-row { display: grid; grid-template-columns: 48px minmax(0, 380px) 150px minmax(0, 1fr) 20px; align-items: center; gap: 24px; min-height: 87.5px; padding: 0 16px; border-bottom: 1px solid var(--line); border-radius: 12px; transition: background-color .3s var(--ease); }
.job-row:hover { background: #FFFFFF08; }
.jn { font-family: var(--mono); font-size: 13px; color: var(--tag); }
.jt { font-size: 20px; line-height: 26px; font-weight: 500; }
.jc .chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 12px; color: #FFFFFFB3; white-space: nowrap; }
.jl { font-size: 15px; line-height: 24px; color: var(--muted); }
.job-row > .i { width: 18px; height: 18px; color: #FFFFFF80; transition: transform .3s var(--ease), color .3s var(--ease); }
.job-row:hover > .i { color: #fff; transform: translateX(3px); }

/* 5 Devices */
.dev-row { display: flex; align-items: center; gap: 48px; }
.dev-text { width: 420px; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.dev-text .lede { font-size: 19px; line-height: 28px; }
.dev-text .btn { margin-top: 8px; }
.dev-fit { flex: 1; min-width: 0; }
.dev-vis { width: 684px; height: 520px; position: relative; }
.rack { position: absolute; left: 0; top: 50px; width: 420px; height: 420px; padding: 6px; background: #FFFFFF0B; border-radius: 26px; font-family: var(--app); }
.rack-in { position: relative; height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 16px; background: #0B0B0B; border: 1px solid #FFFFFF0D; border-radius: 20px; }
.rk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.rk-head b { font-size: 15px; font-weight: 600; }
.rk-row { display: flex; align-items: center; gap: 12px; height: 64px; flex: none; padding: 0 12px; background: #FFFFFF05; border: 1px solid #FFFFFF0A; border-radius: 10px; }
.rk-icon { width: 36px; height: 36px; border-radius: 9px; background: #161616; display: grid; place-items: center; }
.rk-icon .i { width: 17px; height: 17px; color: #FFFFFFCC; }
.rk-name b { display: block; font-size: 13.5px; font-weight: 600; }
.rk-name em { display: block; font-style: normal; font-size: 12px; color: #FFFFFF80; }
.rk-st { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: #FFFFFF0D; font-size: 12px; font-weight: 500; color: #FFFFFFB3; white-space: nowrap; }
.rk-st.live { background: #34D3991F; color: var(--success); }
.rk-st.off { background: #FFFFFF08; color: #FFFFFF59; }
.rk-note { margin-top: auto; font-size: 12px; color: #FFFFFF73; }
.dev-phone { position: absolute; left: 444px; top: 12px; width: 240px; --lift: 0 24px 64px #000000CC; }

/* 6 Carousel */
.arrows { display: flex; gap: 10px; flex: none; }
.arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-strong); background: #FFFFFF0A; color: #fff; transition: background-color .3s var(--ease), opacity .3s var(--ease); }
.arrow:hover:not(:disabled) { background: #FFFFFF1A; }
.arrow:active:not(:disabled) { transform: scale(.96); }
.arrow:disabled { opacity: .35; background: transparent; cursor: default; }
.arrow .i { width: 18px; height: 18px; }
.rail { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-inline: max(24px, calc((100% - 1152px) / 2)); scroll-padding-inline: max(24px, calc((100% - 1152px) / 2)); cursor: grab; }
.rail::-webkit-scrollbar { display: none; }
.rail.is-drag { cursor: grabbing; user-select: none; }
.rail.is-drag * { pointer-events: none; }
.track { display: grid; grid-template-columns: repeat(4, 520px); grid-template-rows: repeat(2, 392px); gap: 16px; width: max-content; }
.card { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid #FFFFFF0D; border-radius: 16px; }
.cd-scene { height: 231.5px; flex: none; position: relative; overflow: hidden; display: grid; place-items: center; background: #0D0D0D; border-bottom: 1px solid var(--line); font-family: var(--app); color: #F2F2F2; }
.cd-text { padding: 22px 24px; }
/* Home "Also in Silan." (walkthrough fix H5): three cards in a row, no carousel. */
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards3 .cd-text h3 { margin-top: 0; }
.grp { font-family: var(--mono); font-size: 11px; line-height: 14px; letter-spacing: 1px; color: #FFFFFF66; }
.cd-text h3 { margin: 8px 0 6px; font-size: 20px; line-height: 26px; font-weight: 500; }
.cd-text p:last-child { font-size: 15px; line-height: 24px; color: var(--muted); }
.cs-center { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.seg.big span { height: 34px; padding: 0 18px; font-size: 13px; }
.seg.big .i { width: 14px; height: 14px; }
.cs-note { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #FFFFFF99; }
.cs-note .i { width: 13px; height: 13px; }
.turns { width: 340px; padding: 12px; background: #0B0B0B; border: 1px solid var(--border); border-radius: 12px; }
.tn-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; }
.tn-head .i { width: 13px; height: 13px; }
.tn-row { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border-radius: 8px; font-size: 13px; }
.tn-row b { font-weight: 500; }
.tn-row .i { width: 14px; height: 14px; color: #FFFFFFB3; }
.tn-row span { margin-left: auto; font-size: 12px; }
.tn-row.on { background: #FFFFFF0A; }
.ok-t { color: var(--success); }
.snd { display: flex; align-items: center; gap: 28px; }
.bars { display: flex; align-items: center; gap: 4px; height: 90px; }
.bars b { width: 4px; height: var(--h, 40%); border-radius: 2px; background: #FFFFFFB3; animation: eq 1.6s var(--ease) infinite alternate; animation-delay: var(--d, 0s); }
.bars b:nth-child(1) { --h: 22%; --d: -.2s; } .bars b:nth-child(2) { --h: 48%; --d: -.6s; } .bars b:nth-child(3) { --h: 70%; --d: -.1s; } .bars b:nth-child(4) { --h: 38%; --d: -.9s; }
.bars b:nth-child(5) { --h: 88%; --d: -.4s; } .bars b:nth-child(6) { --h: 56%; --d: -1.1s; } .bars b:nth-child(7) { --h: 100%; --d: -.3s; } .bars b:nth-child(8) { --h: 64%; --d: -.8s; }
.bars b:nth-child(9) { --h: 42%; --d: -.5s; } .bars b:nth-child(10) { --h: 76%; --d: -1.3s; } .bars b:nth-child(11) { --h: 30%; --d: -.7s; } .bars b:nth-child(12) { --h: 18%; --d: -.15s; }
@keyframes eq { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.shot { width: 84px; }
.snd { margin-top: -30px; }
.shot.tall { width: 96px; }
.saved { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #FFFFFF12; font-size: 11.5px; color: #FFFFFFCC; white-space: nowrap; }
.saved .i { width: 12px; height: 12px; }
.run-menu { width: 240px; padding: 5px; background: #161616; border: 1px solid #FFFFFF1A; border-radius: 10px; box-shadow: 0 12px 32px #00000099; }
.run-menu li { display: flex; align-items: center; gap: 9px; height: 28px; padding: 0 9px; border-radius: 6px; font-size: 12.5px; color: #FFFFFFD9; }
.run-menu .i { width: 13px; height: 13px; color: #FFFFFF99; }
.run-menu .on { background: #FFFFFF12; }
.run-menu .red { color: #F87171; margin-top: 5px; position: relative; }
.run-menu .red::before { content: ""; position: absolute; left: -5px; right: -5px; top: -3px; height: 1px; background: #FFFFFF14; }
.run-menu .red .i { color: #F87171; }
.steer { width: 360px; display: flex; flex-direction: column; gap: 6px; }
.steer p { display: flex; align-items: center; gap: 8px; min-height: 26px; font-size: 12.5px; color: #FFFFFFB3; }
.steer .i { width: 13px; height: 13px; color: #FFFFFF80; }
.steer .steer-b { align-self: flex-end; background: #1B1B1B; border: 1px solid var(--border); border-radius: 12px; padding: 6px 12px; color: #fff; }
.steer .is-now { color: #fff; }
.steer .is-now .i { color: #fff; }
.connect { width: 330px; padding: 14px; background: #0B0B0B; border: 1px solid var(--border); border-radius: 12px; }
.cn-head { font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }
.cn-seg { display: flex; padding: 2px; background: #FFFFFF0D; border-radius: 8px; margin-bottom: 12px; }
.cn-seg span { flex: 1; text-align: center; height: 26px; line-height: 26px; border-radius: 6px; font-size: 12px; color: #FFFFFF99; }
.cn-seg .on { background: var(--fg); color: var(--bg); font-weight: 500; }
.cn-ok { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 12.5px; color: #FFFFFFCC; }
.cn-ok .i { width: 14px; height: 14px; color: var(--success); }
.sched { width: 360px; display: flex; flex-direction: column; gap: 6px; }
.sched li { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid #FFFFFF0D; border-radius: 8px; font-size: 12.5px; color: #FFFFFFB3; }
.sched .i { width: 13px; height: 13px; color: var(--success); }
.sched em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 11px; color: #FFFFFF59; }
.sched .fail { color: var(--danger); border-color: #FF64674D; background: #FF646714; }
.sched .fail .i { color: var(--danger); }
.replay { display: flex; align-items: center; gap: 22px; }
.replay li { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; color: #FFFFFFB3; white-space: nowrap; }
.replay li span { width: 10px; font-family: var(--mono); font-size: 11px; color: #FFFFFF59; }
.replay .on { background: #FFFFFF0F; color: #fff; }
.rail-foot { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.rail-prog { position: relative; width: 160px; height: 2px; background: #FFFFFF1A; }
.rail-prog b { position: absolute; inset: 0; background: var(--fg); transform: scaleX(.25); transform-origin: 0 0; transition: transform .4s var(--ease); }
.rail-count { font-family: var(--mono); font-size: 12px; color: var(--tag); }

/* 7 Comparison */
.cmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 24px; }
.cmp-main { min-height: 502px; padding: 40px 40px 24px; background: #FFFFFF08; border: 1px solid var(--border); border-radius: 20px; }
.cmp .label { display: flex; align-items: center; gap: 8px; }
.cmp .label .mark { width: 10px; height: 15px; }
.cmp-title { margin: 20px 0 28px; max-width: 480px; font-size: 26px; line-height: 31px; font-weight: 500; letter-spacing: -0.5px; text-wrap: balance; }
.cmp-list li { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 22px; }
.cmp-list .i { color: #FFFFFFCC; }
.cmp-side { display: flex; flex-direction: column; gap: 24px; }
/* One box (walkthrough fix H6): the title on the left, the five points on the right. */
.cmp.cmp-solo { grid-template-columns: minmax(0, 1fr); }
.cmp-solo .cmp-main { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 0 64px; align-items: start; min-height: 0; padding: 40px; }
.cmp-solo .cmp-title { margin-bottom: 0; }
.cmp-solo .cmp-list li:last-child { border-bottom: 1px solid var(--line); }
.cmp-card { padding: 28px 32px 20px; border: 1px solid var(--border); border-radius: 20px; }
.cmp-sub { margin: 10px 0 14px; font-size: 17px; line-height: 24px; font-weight: 500; }
.cmp-list.sm li { padding: 12px 0; font-size: 15px; color: #FFFFFFCC; }

/* 8 Questions */
.faq { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 768px); gap: 24px; }
.faq-head { display: flex; flex-direction: column; gap: 16px; }
.lede.sm { font-size: 15px; line-height: 24px; }
.lede.sm a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #FFFFFF4D; }
.faq-list details { border-radius: 12px; border-bottom: 1px solid var(--line); transition: background-color .3s var(--ease); }
.faq-list details[open] { background: var(--surface); border-bottom-color: transparent; }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 21px 20px; list-style: none; cursor: pointer; font-size: 15.5px; line-height: 23px; font-weight: 500; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .i { color: #FFFFFF80; transition: transform .4s var(--ease); }
.faq-list details[open] summary .i { transform: rotate(180deg); }
.faq-list summary:hover .i { color: #fff; }
.faq-list details p { padding: 0 20px 21px; margin-top: -9px; max-width: 700px; font-size: 15px; line-height: 24px; color: var(--muted); }

/* 9 Final call */
.final { padding: 128px 0; border-top: 1px solid var(--line); background: radial-gradient(ellipse 50% 60% at 50% 50%, #FFFFFF0D, transparent); }
.final-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.final .mark { width: 36px; height: 54px; margin-bottom: 28px; }
.nw { white-space: nowrap; }
.final h2 { font-size: 72px; line-height: 72px; letter-spacing: -2.16px; }
.final .lede { margin-top: 20px; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 64px 0 40px; }
.foot-in { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.foot-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.foot-brand p { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.foot-head { margin-bottom: 14px; font-size: 13px; font-weight: 500; color: var(--fg); }
.foot-cols a:not(.logo) { display: block; margin-bottom: 10px; font-size: 13.5px; color: var(--muted); transition: color .2s var(--ease); }
.foot-cols a:not(.logo):hover { color: #fff; }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* Wider than the stage needs: nothing. Narrower: scale drawings, then restack. */
@media (max-width: 1100px) {
  .top-in { gap: 28px; }
  .nav { gap: 20px; }
  .hub { grid-template-columns: minmax(0, 250px) minmax(0, 1fr) 200px minmax(0, 1fr) minmax(0, 250px); }
  .station { width: 200px; }
  .job-row { grid-template-columns: 40px minmax(0, 300px) 140px minmax(0, 1fr) 20px; gap: 16px; }
  .dev-text { width: 360px; }
}
@media (max-width: 960px) {
  .nav, .icon-link { display: none; }
  .menu-btn { display: block; }
  .tabs { overflow-x: auto; scrollbar-width: none; margin-inline: -24px; padding-inline: 24px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tp { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tp-fit { order: -1; }
  .tp-text { padding-top: 0; }
  .hub { grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: 0; }
  .hub-link { padding: 14px 0; display: flex; align-items: center; justify-content: center; gap: 14px; }
  .hub-link p { margin: 0; order: 2; text-align: left; }
  .hub-link .wire { width: 1px; height: 48px; background: #FFFFFF33; }
  .wire b:first-child { left: -3px; top: -3px; } .wire b:last-child { left: -3px; top: auto; bottom: -3px; right: auto; }
  .wire::after { display: none; }
  .station { width: 100%; padding: 28px 24px; }
  .job-row { grid-template-columns: 36px minmax(0, 1fr) 20px; grid-template-areas: "n t a" "n c a" "n l a"; row-gap: 8px; padding: 20px 12px; }
  .jn { grid-area: n; align-self: start; padding-top: 4px; } .jt { grid-area: t; } .jc { grid-area: c; } .jl { grid-area: l; } .job-row > .i { grid-area: a; }
  .dev-row { flex-direction: column; align-items: stretch; gap: 40px; }
  .dev-text { width: auto; }
  .dev-fit { flex: none; }
  .cmp, .faq { grid-template-columns: minmax(0, 1fr); }
  .cmp-solo .cmp-main { grid-template-columns: minmax(0, 1fr); }
  .cmp-solo .cmp-title { margin-bottom: 28px; }
  .cards3 { grid-template-columns: minmax(0, 1fr); }
  .cmp-main { min-height: 0; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 32px); }
  .top-in { padding: 0 16px; }
  .top-right { gap: 10px; }
  .hero { padding: 40px 0 64px; }
  h1 { font-size: 44px; line-height: 46px; letter-spacing: -1.3px; margin-top: 24px; }
  .lede, .hero .lede { font-size: 17px; line-height: 26px; }
  .btns { flex-direction: column; align-self: stretch; width: 100%; }
  .btns .btn { width: 100%; }
  .small-line { font-size: 12.5px; }
  .stage-fit { --nofit: 1; margin: 40px 16px 0; width: auto; height: 560px; overflow: hidden; background: var(--surface); border: 1px solid #FFFFFF0D; border-radius: 20px; }
  .js .stage-fit { height: 560px; }
  .js .stage-fit > .fit-in, .stage { position: relative; left: 0; transform: none; width: 100%; height: 100%; }
  .hero-app, .stage::before { display: none; }
  .hero-phone { left: 50%; top: 32px; width: 240px; transform: translateX(-50%); }
  .control-card { left: auto; right: 12px; top: auto; bottom: 16px; width: 178px; padding: 12px; gap: 8px; }
  .sec { padding: 64px 0; }
  h2 { font-size: 34px; line-height: 38px; letter-spacing: -0.8px; }
  .sec-head { margin-bottom: 32px; }
  .sec-head.row { flex-direction: column; align-items: flex-start; }
  .tabs { margin-inline: -16px; padding-inline: 16px; }
  .tp-text h3 { font-size: 24px; line-height: 30px; }
  .jt { font-size: 18px; line-height: 24px; }
  .rail { padding-inline: 16px; scroll-padding-inline: 16px; }
  .track { grid-template-columns: repeat(4, 300px); grid-template-rows: repeat(2, auto); gap: 12px; }
  .cd-scene { height: 200px; }
  .cd-scene > * { transform: scale(.78); }
  .snd .saved { bottom: -30px; } /* the scale above makes .snd the chip's box: keep the chip below the phone */
  .cd-text { padding: 18px 18px 20px; }
  .cd-text h3 { font-size: 18px; line-height: 24px; }
  .cd-text p:last-child { font-size: 14px; line-height: 22px; }
  .cmp-main { padding: 28px 22px 16px; }
  .cmp-card { padding: 24px 22px 16px; }
  .cmp-title { font-size: 22px; line-height: 28px; }
  .faq-list summary { padding: 18px 16px; }
  .faq-list details p { padding: 0 16px 18px; }
  .final { padding: 88px 0; }
  .final h2 { font-size: 40px; line-height: 44px; letter-spacing: -1.1px; }
  .foot-bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Links to pages that are not built yet */
a[data-soon] { cursor: pointer; }
.soon-tip { position: fixed; z-index: 90; padding: 6px 10px; border-radius: 8px; background: var(--fg); color: var(--bg); font-size: 12.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; pointer-events: none; box-shadow: 0 8px 24px #00000080; }
.soon-tip[hidden] { display: none; }

/* Tour scene modal. A click or Enter on a tour scene opens the same scene large. */
.tp-fit { cursor: zoom-in; border-radius: 37px; }
.tp-fit:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.zoom-hint { position: absolute; top: 12px; right: calc(var(--fit-x, 0px) + 12px); z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: #000000B3; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(-2px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.zoom-hint .i { width: 13px; height: 13px; }
.zoom-hint .h-tap { display: none; }
.tp-fit:hover .zoom-hint, .tp-fit:focus-visible .zoom-hint { opacity: 1; transform: none; }
@media (hover: none) { .zoom-hint { opacity: 1; transform: none; } .zoom-hint .h-click { display: none; } .zoom-hint .h-tap { display: inline; } }
html.zoom-open { overflow: hidden; }
.zoom { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--fg); overflow: hidden; }
.zoom[open] { display: grid; place-items: center; }
.zoom::backdrop { background: #000000EB; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.zoom-panel { display: flex; flex-direction: column; gap: 12px; }
.zoom-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.zoom-title { font-size: 16px; font-weight: 500; color: #FFFFFFCC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoom-head { min-width: 0; }
.zoom-note { margin-top: 2px; font-size: 13px; color: var(--muted, #FFFFFF80); }
.zoom-x { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong); background: #FFFFFF0F; color: #fff; transition: background-color .3s var(--ease), transform .3s var(--ease); }
.zoom-x:hover { background: #FFFFFF1F; }
.zoom-x:active { transform: scale(.96); }
.zoom-x .i { width: 18px; height: 18px; }
.zoom-body { overflow: auto; overscroll-behavior: contain; }
.zoom-fit { position: relative; }
.zoom-fit > .scene { position: absolute; left: 0; top: 0; width: 633px; height: 426px; transform: scale(var(--zk, 1)); transform-origin: 0 0; }
@media (max-width: 760px) {
  .zoom[open] { display: block; }
  .zoom-panel { width: 100%; height: 100%; gap: 0; background: var(--bg); }
  .zoom-bar { padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); }
  .zoom-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
  .zoom-fit { flex: none; }
}