/* ============================================================================
   wede — landing page
   The page IS the IDE: activity bar, explorer, tab strip, editor area,
   status bar, command palette. Every surface is the app's own chrome.
   ========================================================================= */

/* ── The shell ───────────────────────────────────────────────────────────── */
body { padding-bottom: 28px; }            /* room for the fixed status bar */

.ide {
  display: grid;
  grid-template-columns: 50px 244px minmax(0, 1fr);
  align-items: start;
  min-height: calc(100vh - 56px);
}
@media (max-width: 1080px) { .ide { grid-template-columns: 50px minmax(0, 1fr); } }
@media (max-width: 720px)  { .ide { grid-template-columns: minmax(0, 1fr); } body { padding-bottom: 0; } }
/* The `display: none` halves of those two rules used to live here, and never
   applied: `.explorer` and `.activity` are both defined BELOW this point with
   their own `display`, at the same specificity, and a media query adds none.
   The later rule simply won. The visible result was the 50px activity rail
   stretching to the full 390px width on a phone and painting a screen-tall
   column of disembodied icons. The overrides now sit directly after each
   component, where they can win. */

/* ── Activity bar ────────────────────────────────────────────────────────── */
.activity {
  position: sticky; top: 56px; z-index: 30;
  height: calc(100vh - 82px);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0;
  background: var(--bg-tertiary); border-right: 1px solid var(--border);
}
.activity a {
  position: relative; width: 38px; height: 38px; border-radius: var(--radius-md);
  display: grid; place-items: center; color: var(--text-muted);
  transition: color .16s, background .16s;
}
.activity a svg { width: 19px; height: 19px; }
.activity a::before {
  content: ""; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 2px;
  border-radius: 0 2px 2px 0; background: var(--accent);
  opacity: 0; transform: scaleY(.4); transition: opacity .2s, transform .2s var(--ease);
}
.activity a:hover { color: var(--text-2); background: var(--bg-hover); }
.activity a.on { color: var(--accent); }
.activity a.on::before { opacity: 1; transform: none; }
.activity .gap { flex: 1; }
.activity .badge {
  position: absolute; right: 2px; top: 3px; min-width: 17px; height: 17px;
  border-radius: 8.5px; background: var(--accent); color: var(--on-accent);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  display: grid; place-items: center; padding: 0 3px;
}
/* tooltip */
.activity a span.tip {
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px);
  background: var(--bg-elevated); border: 1px solid var(--border-active);
  color: var(--text); font-size: 12px; padding: 5px 9px; border-radius: var(--radius-md);
  white-space: nowrap; pointer-events: none; opacity: 0;
  transition: opacity .15s, transform .15s var(--ease);
  box-shadow: 0 8px 20px -10px var(--shadow-lg); z-index: 5;
}
.activity a:hover span.tip { opacity: 1; transform: translateY(-50%); }

/* Hidden on phones — see the note in The shell. Must stay after .activity. */
@media (max-width: 720px) { .activity { display: none; } }

/* ── Explorer ────────────────────────────────────────────────────────────── */
.explorer {
  position: sticky; top: 56px; z-index: 20;
  height: calc(100vh - 82px); overflow-y: auto;
  background: var(--bg-secondary); border-right: 1px solid var(--border);
  padding: 10px 8px 20px;
  scrollbar-width: thin;
}
.explorer::-webkit-scrollbar { width: 8px; }
.explorer::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.explorer .head {
  display: flex; align-items: center; gap: 7px; padding: 4px 8px 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
}
.explorer .head svg { width: 12px; height: 12px; }
.tree { display: grid; gap: 1px; }
.tree .dir {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px;
  font-size: 13px; color: var(--text-2); font-weight: 500;
}
.tree .dir svg { width: 13px; height: 13px; opacity: .8; }
.tree a {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 24px;
  border-radius: var(--radius-sm); font-size: 13px; color: var(--text-2);
  transition: background .14s, color .14s;
}
.tree a .ft { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.tree a:hover { background: var(--bg-hover); color: var(--text); }
.tree a.on { background: var(--bg-active); color: var(--text); }
.tree a .g { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 600; }
.tree a .g.m { color: var(--yellow); }
.tree a .g.a { color: var(--green); }
.tree .sep { height: 1px; background: var(--border); margin: 9px 8px; }
.explorer .hint {
  margin-top: 14px; padding: 10px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--bg-primary);
  font-size: 12.5px; color: var(--text-muted); line-height: 1.5;
}
.explorer .hint kbd {
  font-family: var(--mono); font-size: 12px; color: var(--text-2);
  border: 1px solid var(--border-active); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 5px; background: var(--bg-secondary);
}

/* Hidden below 1080 — see the note in The shell. Must stay after .explorer. */
@media (max-width: 1080px) { .explorer { display: none; } }

/* ── Editor area ─────────────────────────────────────────────────────────── */
.editor { min-width: 0; }
.tabbar {
  position: sticky; top: 56px; z-index: 25;
  display: flex; align-items: stretch; overflow-x: auto;
  background: var(--bg-tertiary); border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }
.tabbar a {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 15px; height: 39px; white-space: nowrap;
  font-family: var(--mono); font-size: 12.5px; color: var(--text-muted);
  border-right: 1px solid var(--border); border-bottom: 2px solid transparent;
  transition: color .16s, background .16s;
}
.tabbar a .ft { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.tabbar a:hover { color: var(--text-2); background: var(--bg-hover); }
.tabbar a.on { color: var(--text); background: var(--bg-primary); border-bottom-color: var(--accent); }
@media (max-width: 720px) { .tabbar { display: none; } }

.pane { padding: clamp(34px, 5vw, 68px) clamp(20px, 4vw, 56px); position: relative; overflow-x: clip; }
.pane + .pane { border-top: 1px solid var(--border); }
.pane-wide { max-width: 1080px; }

/* file-header strip that opens each pane, like a breadcrumb in the editor */
.pane-crumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12.5px; color: var(--text-muted);
  margin-bottom: 22px;
}
.pane-crumb .sep { opacity: .45; }
.pane-crumb .cur { color: var(--accent); }
.pane-crumb .meta { margin-left: auto; display: flex; gap: 14px; }

h2.title {
  font-family: var(--display); font-weight: 600; letter-spacing: -.032em;
  font-size: clamp(28px, 4vw, 44px); line-height: 1.06; margin: 0;
}
.lead { color: var(--text-2); font-size: clamp(15.5px, 1.5vw, 17.5px); margin: 15px 0 0; max-width: 62ch; }
.pane-head { margin-bottom: clamp(28px, 3.6vw, 44px); }

/* ── Status bar (fixed, like the app's) ──────────────────────────────────── */
.statusbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  height: 28px; display: flex; align-items: center; gap: 16px;
  padding: 0 12px; background: var(--status-bar);
  border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 12px; color: var(--text-2);
}
.statusbar .item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.statusbar .item svg { width: 12px; height: 12px; }
.statusbar .br { color: var(--accent); }
.statusbar .right { margin-left: auto; display: flex; gap: 16px; }
.statusbar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
@media (max-width: 720px) { .statusbar { display: none; } }
@media (max-width: 1000px) { .statusbar .hide-md { display: none; } }

/* ── Command palette ─────────────────────────────────────────────────────── */
.palette-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: color-mix(in srgb, var(--bg-base) 62%, transparent);
  backdrop-filter: blur(3px);
  display: grid; justify-items: center; align-items: start; padding-top: 12vh;
}
.palette-backdrop[hidden] { display: none; }
.palette {
  width: min(620px, 92vw);
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: 0 40px 90px -30px var(--shadow-lg);
  animation: paletteIn .18s var(--ease);
}
@keyframes paletteIn { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } }
.palette input {
  width: 100%; border: 0; outline: 0; background: transparent;
  padding: 16px 18px; color: var(--text);
  font-family: var(--sans); font-size: 16px;
  border-bottom: 1px solid var(--border);
}
.palette input::placeholder { color: var(--text-muted); }
.palette .results { max-height: 46vh; overflow-y: auto; padding: 6px; }
.palette .row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  min-height: 44px; padding: 9px 12px; border-radius: var(--radius-md); cursor: pointer;
  color: var(--text-2); font-size: 14px; text-align: left;
  background: transparent; border: 0; font-family: var(--sans);
}
.palette .row svg { width: 15px; height: 15px; flex: none; opacity: .75; }
.palette .row .k { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.palette .row[aria-selected="true"] { background: var(--accent-dim); color: var(--text); }
.palette .row[aria-selected="true"] svg { color: var(--accent); opacity: 1; }
.palette .empty { padding: 22px 18px; color: var(--text-muted); font-size: 14px; }
.palette .foot {
  display: flex; gap: 16px; padding: 9px 14px; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 12px; color: var(--text-muted);
}
.palette kbd {
  font-family: var(--mono); border: 1px solid var(--border-active); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 4px; background: var(--bg-secondary); color: var(--text-2);
}
.kbtn {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px;
  border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--bg-secondary); color: var(--text-muted); cursor: pointer;
  font-family: var(--sans); font-size: 12.5px;
  transition: border-color .15s, color .15s, background .15s;
}
.kbtn:hover { border-color: var(--border-strong); color: var(--text-2); background: var(--bg-hover); }
.kbtn kbd {
  font-family: var(--mono); font-size: 12px; border: 1px solid var(--border-active);
  border-radius: 3px; padding: 0 4px; background: var(--bg-primary);
}
@media (max-width: 620px) { .kbtn .kbtxt { display: none; } }

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(26px, 3.4vw, 52px); align-items: center; }
@media (max-width: 1180px) { .hero { grid-template-columns: minmax(0, 1fr); } }

.live-pill {
  display: inline-flex; align-items: center; gap: 9px;
  height: 30px; padding: 0 13px 0 11px; border-radius: 999px;
  background: var(--bg-secondary); border: 1px solid var(--border-active);
  font-family: var(--mono); font-size: 12.5px; color: var(--text-2);
}
.live-pill .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.hero h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(38px, 5.2vw, 60px); line-height: 1.01; letter-spacing: -.042em;
  margin: 20px 0 0;
}
.hero h1 .we {
  background: linear-gradient(100deg, var(--accent-hover), var(--mauve));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  position: relative;
}
.hero h1 .we::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: .05em; height: .09em;
  background: linear-gradient(90deg, var(--accent), var(--mauve));
  border-radius: 3px; opacity: .3;
}
.hero .sub { font-size: clamp(16px, 1.6vw, 18.5px); color: var(--text-2); margin: 19px 0 0; max-width: 52ch; line-height: 1.55; }
.hero .sub strong { color: var(--text); font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }

.trust { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; font-family: var(--mono); font-size: 12.5px; color: var(--text-muted); }
.trust span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--wash); }
.trust span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .8; }

/* ── Hero collab canvas ──────────────────────────────────────────────────── */
.canvas { position: relative; }
.tabstrip { display: flex; flex: 1; min-width: 0; overflow: hidden; }
.tabstrip .tab { display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; height: 38px; font-size: 12.5px; color: var(--text-muted); border-right: 1px solid var(--border); white-space: nowrap; font-family: var(--mono); }
.tabstrip .tab.on { color: var(--text); background: var(--bg-primary); box-shadow: inset 0 -2px 0 var(--accent); }
.tabstrip .tab .ft { width: 7px; height: 7px; border-radius: 2px; background: var(--cyan); flex: none; }
.tabstrip .tab.md .ft { background: var(--accent); }

.presence { display: flex; align-items: center; margin-left: auto; padding-left: 10px; flex: none; }
.presence .av { width: 24px; height: 24px; border-radius: 50%; margin-left: -6px; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: var(--sans); color: #0c0e14; border: 2px solid var(--bg-tertiary); }
.presence .av:first-child { margin-left: 0; }
.presence .av.a1 { background: #7c8cf8; } .presence .av.a2 { background: #4ade80; } .presence .av.a3 { background: #f472b6; }
.presence .av.join { animation: avJoin .5s var(--ease) 1.9s both; }
@keyframes avJoin { from { opacity: 0; transform: translateX(-8px) scale(.6); } to { opacity: 1; transform: none; } }

.editor-body { display: flex; position: relative; background: var(--bg-primary); overflow: hidden; }
/* The code inside scrolls horizontally on narrow screens (see .editor-code).
   Without an edge fade that just looks like the panel was cut off mid-word,
   which is exactly how it read on a phone. Shown only while there is more to
   the right — see syncScrollFades() in index.html. */
.editor-body::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 56px;
  pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 2;
  background: linear-gradient(270deg, var(--bg-primary), transparent);
}
.editor-body.can-scroll::after { opacity: .95; }
.gutter { flex: none; padding: 14px 10px 14px 14px; text-align: right; font-family: var(--mono); font-size: 13px; line-height: 1.75; white-space: pre; color: var(--text-muted); user-select: none; opacity: .55; border-right: 1px solid var(--border-subtle); }
.editor-code {
  position: relative; flex: 1; min-width: 0; padding: 14px 14px 14px 16px;
  font-family: var(--mono); font-size: 13px; line-height: 1.75;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
}
.code-text { white-space: pre; }
/* Narrow screens scroll the code horizontally instead of shrinking it below
   a legible size — the font-size here never changes, so the animated
   collaborator cursors (which are positioned in ch units) stay aligned. */
.editor-code .kw { color: var(--sx-kw); } .editor-code .fn { color: var(--sx-fn); }
.editor-code .str { color: var(--sx-str); } .editor-code .num { color: var(--sx-num); }
.editor-code .ty { color: var(--sx-type); } .editor-code .pu { color: var(--sx-punc); }

.typing { display: inline-block; overflow: hidden; white-space: pre; vertical-align: bottom; animation: type 2.4s steps(26, end) 1.1s both; width: 0; }
@keyframes type { to { width: 28ch; } }

.rsel {
  position: absolute; height: 1.75em; border-radius: 3px;
  top: calc(14px + 7 * 1.75 * 13px); left: calc(16px + 4ch); width: 23ch;
  background: color-mix(in srgb, var(--pink) 22%, transparent);
  border-left: 2px solid var(--pink);
  animation: selIn .5s var(--ease) 3.9s both;
}
@keyframes selIn { from { opacity: 0; transform: scaleX(.2); transform-origin: left; } to { opacity: 1; transform: none; } }

.rcur { position: absolute; width: 2px; height: 1.5em; border-radius: 1px; }
.rcur::after {
  content: attr(data-name); position: absolute; left: 0; top: -1.5em;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  padding: 1px 6px; border-radius: 4px 4px 4px 0; color: #0c0e14; white-space: nowrap;
  background: inherit;
}
.rcur.ava { background: var(--green); left: 16px; top: 14px; animation: ava 11s var(--ease) 1s infinite; }
.rcur.sam { background: var(--pink); left: 16px; top: 14px; animation: sam 11s var(--ease) 2.2s infinite; }
@keyframes ava {
  0%,14%   { transform: translate(44ch, calc(4  * 1.75 * 13px)); }
  22%,40%  { transform: translate(21ch, calc(5  * 1.75 * 13px)); }
  48%,64%  { transform: translate(23ch, calc(10 * 1.75 * 13px)); }
  72%,90%  { transform: translate(24ch, calc(12 * 1.75 * 13px)); }
  98%,100% { transform: translate(44ch, calc(4  * 1.75 * 13px)); }
}
@keyframes sam {
  0%,16%   { transform: translate(27ch, calc(7  * 1.75 * 13px)); }
  26%,44%  { transform: translate(24ch, calc(12 * 1.75 * 13px)); }
  54%,72%  { transform: translate(18ch, calc(2  * 1.75 * 13px)); }
  82%,100% { transform: translate(27ch, calc(7  * 1.75 * 13px)); }
}

.float { position: absolute; z-index: 3; border: 1px solid var(--border-active); border-radius: var(--radius-lg); background: var(--bg-elevated); box-shadow: 0 18px 40px -18px var(--shadow-lg); }
.float-chat { right: -10px; bottom: 52px; width: min(280px, 74%); padding: 11px 13px; animation: floatIn .6s var(--ease) 4.6s both; }
@media (max-width: 1180px) { .float-chat { right: 8px; } }
.float-chat .who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.float-chat .who .av { width: 21px; height: 21px; border-radius: 50%; background: var(--green); display: grid; place-items: center; font-size: 12px; color: #0c0e14; font-weight: 700; }
.float-chat .who .t { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--text-muted); font-weight: 400; }
.float-chat p { margin: 7px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
@keyframes floatIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

.term-strip { border-top: 1px solid var(--border); background: var(--bg-tertiary); font-family: var(--mono); font-size: 12.5px; color: var(--text-2); padding: 9px 14px; display: flex; align-items: center; gap: 8px; }
.term-strip .pr { color: var(--accent); }
.term-strip .ok { color: var(--green); margin-left: auto; }
.caret { display: inline-block; width: 7px; height: 13px; background: var(--text-2); vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .typing { width: auto; animation: none; }
  .rcur.ava { transform: translate(44ch, calc(4 * 1.75 * 13px)); }
  .rcur.sam { transform: translate(27ch, calc(7 * 1.75 * 13px)); }
}

/* ── Stat strip ──────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-primary); margin-top: clamp(26px, 3.5vw, 44px); }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } }
.stats .s { padding: 20px clamp(14px, 2vw, 24px); border-right: 1px solid var(--border); }
.stats .s:last-child { border-right: 0; }
@media (max-width: 760px) { .stats .s:nth-child(2n) { border-right: 0; } .stats .s:nth-child(-n+2) { border-bottom: 1px solid var(--border); } }
.stats .n { font-family: var(--display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.stats .n em { font-style: normal; color: var(--accent); }
.stats .l { font-family: var(--mono); font-size: 12px; color: var(--text-muted); margin-top: 8px; }

/* ── Features: explorer + detail, like opening a file ────────────────────── */
.featwrap { display: grid; grid-template-columns: 268px minmax(0, 1fr); border: 1px solid var(--border-active); border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-primary); box-shadow: 0 30px 66px -36px var(--shadow-lg); }
@media (max-width: 900px) { .featwrap { grid-template-columns: 1fr; } }
.featlist { background: var(--bg-secondary); border-right: 1px solid var(--border); padding: 8px; display: grid; gap: 1px; align-content: start; }
@media (max-width: 900px) { .featlist { border-right: 0; border-bottom: 1px solid var(--border); grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .featlist { grid-template-columns: 1fr; } }
.featlist .grp { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 9px 10px 5px; }
@media (max-width: 900px) { .featlist .grp { grid-column: 1 / -1; } }
.featlist button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border-radius: var(--radius-md); border: 0; cursor: pointer;
  background: transparent; color: var(--text-2);
  font-family: var(--mono); font-size: 12.5px; text-align: left;
  transition: background .14s, color .14s;
}
.featlist button svg { width: 14px; height: 14px; flex: none; opacity: .75; }
@media (max-width: 768px) { .featlist button { min-height: 44px; padding: 11px 10px; } }
.featlist button:hover { background: var(--bg-hover); color: var(--text); }
.featlist button[aria-selected="true"] { background: var(--bg-active); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.featlist button[aria-selected="true"] svg { color: var(--accent); opacity: 1; }

.featdetail { min-width: 0; display: flex; flex-direction: column; }
.featdetail .bar { display: flex; align-items: center; gap: 9px; padding: 0 15px; height: 39px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.featdetail .bar .ft { width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.featdetail .bar .now { color: var(--text); }
.featdetail .body { padding: clamp(22px, 3vw, 34px); flex: 1; }
.featdetail h3 { margin: 0 0 12px; font-family: var(--display); font-size: clamp(21px, 2.4vw, 27px); font-weight: 600; letter-spacing: -.025em; }
.featdetail p { margin: 0; color: var(--text-2); font-size: 15.5px; line-height: 1.65; max-width: 62ch; }
.featdetail p + p { margin-top: 12px; }
.featdetail code { font-family: var(--mono); font-size: .87em; background: var(--bg-active); border: 1px solid var(--border); padding: 1px 5px; border-radius: 4px; color: var(--text); }
.featdetail .tags { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 7px; }
.featdetail .tags b { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--text-muted); border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; }
.featdetail .snip {
  margin-top: 22px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-tertiary); padding: 13px 15px; overflow-x: auto;
  font-family: var(--mono); font-size: 12.2px; line-height: 1.75; color: var(--text-2); white-space: pre;
}
.featdetail .snip .pr { color: var(--accent); } .featdetail .snip .cm { color: var(--text-muted); }
.featdetail .snip .hl { color: var(--green); } .featdetail .snip .k { color: var(--sx-kw); }
.featdetail .snip .s { color: var(--sx-str); }
.fade { animation: fade .25s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ── Collaboration ───────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3.4vw, 52px); align-items: center; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; } }
.steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; }
.steps li { display: flex; gap: 15px; padding: 14px 0; border-top: 1px solid var(--border); }
.steps li:last-child { border-bottom: 1px solid var(--border); }
.steps .n { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-family: var(--mono); font-size: 12.5px; font-weight: 600; background: var(--accent-dim); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); }
.steps b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.steps span { color: var(--text-2); font-size: 14px; }

.share-card { padding: 18px; display: grid; gap: 13px; }
.share-url { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--text-2); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px 11px; overflow: hidden; white-space: nowrap; }
.share-url .tok { color: var(--accent); }
.role-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.role-pills span { font-family: var(--mono); font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); }
.role-pills span.on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); background: var(--accent-dim); }
.who-list { display: grid; gap: 9px; }
.who-row { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.who-row .av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #0c0e14; flex: none; }
.who-row .role { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.who-row .file { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.who-row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; }

/* ── Diff block: what you don't need ─────────────────────────────────────── */
.diff { border: 1px solid var(--border-active); border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-primary); }
.diff .hunk { font-family: var(--mono); font-size: 12px; color: var(--text-muted); padding: 9px 15px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border); }
.diff .hunk b { color: var(--accent); font-weight: 500; }
.diff .rows { font-family: var(--mono); font-size: 13.5px; line-height: 2.05; }
.diff .r { display: flex; gap: 12px; padding: 0 15px; }
.diff .r .s { width: 1ch; flex: none; }
.diff .r .t { min-width: 0; }
.diff .r .why { margin-left: auto; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 640px) { .diff .r .why { display: none; } }
.diff .r.del { background: color-mix(in srgb, var(--red) 8%, transparent); color: color-mix(in srgb, var(--red) 78%, var(--text)); }
.diff .r.del .s { color: var(--red); }
.diff .r.add { background: color-mix(in srgb, var(--green) 8%, transparent); color: color-mix(in srgb, var(--green) 70%, var(--text)); }
.diff .r.add .s { color: var(--green); }
.diff .foot { border-top: 1px solid var(--border); background: var(--bg-tertiary); padding: 10px 15px; font-family: var(--mono); font-size: 12.5px; color: var(--text-muted); }
.diff .foot b.plus { color: var(--green); } .diff .foot b.minus { color: var(--red); }

/* ── Tour ────────────────────────────────────────────────────────────────── */
.shots { border: 1px solid var(--border-active); border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-primary); box-shadow: 0 30px 66px -36px var(--shadow-lg); }
.shot-tabs { display: flex; overflow-x: auto; background: var(--bg-tertiary); border-bottom: 1px solid var(--border); scrollbar-width: none; }
.shot-tabs::-webkit-scrollbar { display: none; }
.shot-tabs button { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; background: transparent; border: 0; cursor: pointer; border-right: 1px solid var(--border); border-bottom: 2px solid transparent; font-family: var(--mono); font-size: 12.5px; color: var(--text-muted); transition: color .16s, background .16s, border-color .16s; }
.shot-tabs button svg { width: 14px; height: 14px; }
.shot-tabs button:hover { color: var(--text-2); background: var(--bg-hover); }
.shot-tabs button[aria-selected="true"] { color: var(--text); background: var(--bg-primary); border-bottom-color: var(--accent); }
/* A shrunk-to-fit screenshot is illegible below ~860px, so instead of
   scaling the image down to the viewport we hold it at a legible minimum
   width and let the stage scroll horizontally — same treatment as the
   code blocks below. At ≥~1000px content width this is a no-op: the
   image still renders at 100% of its (already wider) container. */
/* The screenshots are a wide IDE, so below ~860px the stage scrolls rather
   than shrinking them into illegibility. That was already true — but with no
   affordance it just looked like the image had been cut off, which is what a
   phone visitor actually saw: 45% of an 860px shot and no hint of the rest.
   The fade and the swipe hint below make the scroll legible as a scroll. */
.shot-stage { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.shot-stage img { width: 100%; min-width: 860px; height: auto; display: block; scroll-snap-align: start; }
.shot-stage img[hidden] { display: none; }
/* Sits on the stage's containing block, not inside the scroller, so it stays
   pinned to the right edge instead of scrolling away with the image. */
.shot-scroll { position: relative; }
.shot-scroll::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 64px;
  pointer-events: none; opacity: 0; transition: opacity .2s;
  background: linear-gradient(270deg, var(--bg-primary), transparent);
}
.shot-scroll.can-scroll::after { opacity: .96; }
.shot-hint {
  display: none; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12.5px; color: var(--text-muted);
}
.shot-scroll.can-scroll ~ .shot-cap .shot-hint { display: inline-flex; }
.shot-scroll.can-scroll ~ .shot-cap .k { display: none; }
.shot-cap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 16px; border-top: 1px solid var(--border); background: var(--bg-tertiary); font-size: 13.5px; color: var(--text-2); }
.shot-cap b { color: var(--text); font-weight: 600; }
.shot-cap .k { font-family: var(--mono); font-size: 12.5px; color: var(--text-muted); margin-left: auto; }
.shot-cap kbd { font-family: var(--mono); font-size: 12px; color: var(--text-2); border: 1px solid var(--border-active); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; background: var(--bg-secondary); }

/* ── Install ─────────────────────────────────────────────────────────────── */
.install-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 3vw, 44px); align-items: start; }
@media (max-width: 940px) { .install-grid { grid-template-columns: 1fr; } }
.term { font-family: var(--mono); font-size: 13px; line-height: 1.85; padding: 17px 18px 19px; overflow-x: auto; background: var(--bg-tertiary); }
.term .l { white-space: pre; }
.term .pr { color: var(--accent); user-select: none; }
.term .cm { color: var(--text-muted); }
.term .out { color: var(--text-2); }
.term .hl { color: var(--green); }
.copybtn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12.5px; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 8px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
@media (max-width: 768px) { .copybtn { min-height: 40px; padding: 8px 12px; } }
.copybtn:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg-hover); }
.copybtn.done { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.copybtn svg { width: 12px; height: 12px; }

.notes { display: grid; gap: 13px; }
.note { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-primary); padding: 15px 17px; }
.note h4 { margin: 0 0 6px; font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.note h4 svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.note p { margin: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
.note code { font-family: var(--mono); font-size: .92em; background: var(--bg-active); padding: 1px 5px; border-radius: 4px; color: var(--text); }
.note a { color: var(--accent); }
.note a:hover { text-decoration: underline; }

/* ── Security ────────────────────────────────────────────────────────────── */
.secgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .secgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .secgrid { grid-template-columns: 1fr; } }
.sec { border: 1px solid var(--border); border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: var(--radius-lg); background: var(--bg-primary); padding: 17px; }
.sec.warn { border-left-color: var(--yellow); }
.sec h4 { margin: 0 0 7px; font-size: 14.5px; font-weight: 600; }
.sec p { margin: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.55; }.final { text-align: center; padding: clamp(46px, 6vw, 84px) 0 clamp(30px, 4vw, 50px); }
.final h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.035em; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.06; margin: 0; }
.final p { color: var(--text-2); margin: 15px auto 0; max-width: 52ch; font-size: 16.5px; }
.final .cta-row { justify-content: center; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-tertiary); }
.foot-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 30px; padding: 42px clamp(20px, 4vw, 56px) 32px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h4 { margin: 0 0 11px; font-family: var(--mono); font-size: 12px; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { color: var(--text-2); font-size: 14px; transition: color .15s; }
.foot-grid a:hover { color: var(--accent); }
.foot-blurb { color: var(--text-2); font-size: 13.5px; margin: 13px 0 0; max-width: 42ch; }
.foot-bar { border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 13px clamp(20px, 4vw, 56px); font-family: var(--mono); font-size: 12.5px; color: var(--text-muted); }.foot-bar a:hover { color: var(--accent); }
/* Footer links are inline prose-style navigation; on touch widths give them
   a taller hit box without changing the visible text size. */
@media (max-width: 640px) {
  .foot-grid a { display: inline-flex; align-items: center; min-height: 32px; }
  .foot-bar a { min-height: 32px; }
}

/* ── Vulos suite chrome — identical on every product landing ───────────────
   Two elements, and only two: a logo-only home button in the top bar, and
   one line in the footer. Deliberately free of repo variables so the block
   is byte-identical across the suite and can be diffed as one thing. */
.vulos-home { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; opacity: .72; transition: opacity .15s ease, transform .15s ease; }
.vulos-home:hover, .vulos-home:focus-visible { opacity: 1; transform: translateY(-1px); }
.vulos-home img { display: block; width: 22px; height: 22px; border-radius: 6px; }
.vulos-foot { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; line-height: 1.45; text-decoration: none; color: inherit; opacity: .85; transition: opacity .15s ease; }
.vulos-foot:hover { opacity: 1; text-decoration: none; }
.vulos-foot img { display: block; width: 18px; height: 18px; border-radius: 5px; flex: 0 0 auto; }

/* Dark-ground correction for the mark above. vulos-logo.png is flat #2E383A
   on transparency — ink drawn for paper — so composited on this surface it
   measures about 1.3:1 and reads as a smudge, not as a dimmed logo. The
   artwork carries its whole shape in the alpha channel, so brightness(0)
   invert(1) recolours it to the surface's foreground with the glyph intact,
   and the opacity holds it at the same secondary weight the light theme
   gives it. Styling only: the chrome markup stays byte-identical suite-wide. */
:root:not([data-theme="light"]) .vulos-home img,
:root:not([data-theme="light"]) .vulos-foot img { filter: brightness(0) invert(1); opacity: .66; }