/* Product-mockup components: window chrome, dock, account lanes, and the
   reusable mockup primitives used across the landing and features pages. */

/* Window frame --------------------------------------------------------- */
.window {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--line);
  overflow: hidden;
  isolation: isolate;
}
.window-bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: var(--sunken);
  border-bottom: 1px solid var(--line);
}
.traffic { display: flex; gap: 6px; }
.traffic span { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); }
.window-url {
  flex: 1; display: flex; align-items: center; gap: 0.5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 0.35rem 0.8rem;
  font-size: 0.82rem; color: var(--ink-2); font-weight: 500;
}
.window-url svg { width: 13px; height: 13px; color: var(--lane-green); }
.window-body { display: flex; min-height: 300px; }

/* Dock ----------------------------------------------------------------- */
.dock {
  flex: none; width: 60px;
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  padding: 0.85rem 0; background: var(--sunken);
  border-right: 1px solid var(--line);
}
.dock-app {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--on-fill, #fff);
  box-shadow: var(--shadow-sm); position: relative;
  transition: transform var(--dur-fast) var(--ease);
}
.dock-app:hover { transform: translateY(-2px) scale(1.04); }
.dock-app.on::before {
  content: ""; position: absolute; left: -0.85rem; top: 50%; transform: translateY(-50%);
  width: 4px; height: 20px; border-radius: 0 3px 3px 0; background: var(--ink);
}
.dock-app[data-count]::after {
  content: attr(data-count); position: absolute; right: -4px; top: -4px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--surface); color: var(--ink); font-family: var(--font-body);
  font-size: 0.62rem; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 0 0 1.5px var(--surface), var(--shadow-sm);
}
.dock-div { width: 26px; height: 1px; background: var(--line-2); margin: 0.2rem 0; }
.dock-add { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--line-2); }
/* Solid lane fills. Each also declares --on-fill, the text colour that clears
   4.5:1 on it, so any glyph sitting on a fill inherits the right one instead of
   assuming white. Amber is the lightest lane in both themes, so white never
   clears on it (2.3:1); it takes the constant dark --on-fill-dark instead. */
.bg-red { background: var(--lane-red-fill); --on-fill: var(--on-fill-light); }
.bg-amber { background: var(--lane-amber); --on-fill: var(--on-fill-dark); }
.bg-green { background: var(--lane-green); --on-fill: var(--on-fill-dark); }
.bg-blue { background: var(--lane-blue-fill); --on-fill: var(--on-fill-light); }
.bg-slate { background: oklch(0.5 0.03 264); --on-fill: var(--on-fill-light); }
.bg-plum { background: oklch(0.55 0.15 320); --on-fill: var(--on-fill-light); }

/* Callout ---------------------------------------------------------------
   Promoted from the .legal-scoped rule in pages.css so it can be used outside
   a .legal page. Same values, so the callouts on /terms/ and /privacy-policy/
   are unchanged. */
.callout {
  padding: 1.2rem 1.4rem; border-radius: var(--r-md);
  background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2); font-size: 1rem;
}

/* Window main + account lanes ------------------------------------------ */
.window-main { flex: 1; padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem;
  background: linear-gradient(180deg, var(--surface), var(--sunken)); }
.lanes-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 0.2rem 0.2rem; }
.lanes-head strong { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; }
.lanes-head span { font-size: 0.78rem; color: var(--ink-3); }

.lane {
  --c: var(--lane-blue);
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem; border-radius: var(--r-md);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  position: relative;
}
.lane::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px; background: var(--c);
}
/* --on-c is the readable text colour for this lane's own fill, paired with --c
   so the avatar initial never has to assume white (amber and green are too
   light for it). */
.lane { --on-c: var(--on-fill-light); --c-fill: var(--c); }
.lane.red { --c: var(--lane-red); --c-fill: var(--lane-red-fill); --on-c: var(--on-fill-light); }
.lane.amber { --c: var(--lane-amber); --c-fill: var(--lane-amber); --on-c: var(--on-fill-dark); }
.lane.green { --c: var(--lane-green); --c-fill: var(--lane-green); --on-c: var(--on-fill-dark); }
.lane.blue { --c: var(--lane-blue); --c-fill: var(--lane-blue-fill); --on-c: var(--on-fill-light); }
.lane-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--on-c); font-weight: 700; font-size: 0.8rem;
  background: var(--c-fill); box-shadow: 0 0 0 2px color-mix(in oklch, var(--c) 22%, transparent);
}
.lane-meta { min-width: 0; flex: 1; }
.lane-meta b { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.lane-meta small { display: block; font-size: 0.75rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane-chip {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  color: color-mix(in oklch, var(--c) 45%, var(--ink));
  background: color-mix(in oklch, var(--c) 12%, var(--surface));
  padding: 0.2rem 0.5rem; border-radius: var(--r-sm); white-space: nowrap;
}
.lane-lock { flex: none; color: var(--ink-3); display: grid; place-items: center; }
.lane-lock svg { width: 15px; height: 15px; }
@media (max-width: 520px) { .lane-chip { display: none; } .window-body { min-height: 260px; } }

/* Generic mockup primitives (reused on features page) ------------------ */
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--on-fill, #fff); font-weight: 700; font-size: 0.85rem; flex: none; }
.chip-mono { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; padding: 0.2rem 0.55rem; border-radius: var(--r-sm); background: var(--sunken); color: var(--ink-2); }

/* Feature groups. The long tail used to be one 16-cell wall, which read as an
   undifferentiated card grid. Splitting it into named groups gives the section
   rhythm and tells the reader what each run of cells is for. Group sizes vary
   (4/4/5/3), so the grid never settles into one repeating block. */
.feature-group + .feature-group { margin-top: clamp(2.5rem, 5vw, 4rem); }
.feature-group-head { max-width: 34rem; margin-bottom: 1.1rem; }
.feature-group-head h3 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.feature-group-head p { color: var(--ink-2); font-size: 1rem; }

/* Feature grid (the long-tail capabilities) ---------------------------- */
/* Dividers are drawn as a hairline ring on each CELL, not as a 1px gap over a
   --line background. With the old approach any row that did not fill completely
   (5 cells over 4 columns, or 4 over 3 on tablet) left the container background
   showing as a bare grey block. Now an unfilled tail is just surface. */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.feature-cell { background: var(--surface); padding: 1.6rem; box-shadow: 0 0 0 0.5px var(--line); transition: background var(--dur-fast) var(--ease); }
.feature-cell:hover { background: var(--sunken); }
.feature-cell .ico { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 1rem; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); }
.feature-cell .ico svg { width: 21px; height: 21px; color: var(--ink); }
.feature-cell h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.feature-cell p { font-size: 1rem; color: var(--ink-2); }

/* Split feature row (alternating image + text) ------------------------- */
.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split-row.flip .split-visual { order: 2; }
.split-copy h2 { font-size: var(--step-h3); margin-bottom: 0.9rem; }
.split-copy .lead { font-size: 1.05rem; }
.split-copy ul { list-style: none; padding: 0; margin-top: 1.3rem; display: grid; gap: 0.7rem; }
.split-copy li { display: flex; gap: 0.65rem; font-size: 1rem; color: var(--ink-2); }
.split-copy li svg { width: 20px; height: 20px; flex: none; color: var(--lane-green); margin-top: 2px; }
@media (max-width: 860px) { .split-row { grid-template-columns: 1fr; gap: 2rem; } .split-row.flip .split-visual { order: 0; } }