/* ================================================================
   Floom Landing v2 : standalone CSS
   Linked to space-ds.css (tokens) + app.css (base palette).
   Cursor-grade restraint: hairlines, one shadow tier, generous air.
   v2 rework: neutral window chrome (no accent slabs; accent now only
   on brand mark / "cockpit" / dot / active state / links), tighter
   hero shot proportions, integrated logo lockup, composed final CTA,
   collapsed stacked whitespace, dark parity.
   ================================================================ */

/* -- Layout wrapper ----------------------------------------------- */
.lp1 {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}
@media (max-width: 640px) { .lp1 { padding: 0 20px; } }

/* -- Nav ----------------------------------------------------------- */
/* E6 refactor: the nav is horizontally centred with symmetric left/
   right insets + margin auto (NOT transform:translateX). This frees
   the `transform` property exclusively for the Revolut-style vertical
   hide/reveal, so there is no transform-function interpolation
   conflict (translateX -> none -> translateY produced a broken matrix
   mid-transition). Single-axis transform = smooth, deterministic. */
.ln-nav {
  position: fixed;
  top: 28px;
  left: 32px;
  right: 32px;
  margin: 0 auto;
  width: auto;
  max-width: 1180px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 20px;
  border-radius: var(--r-xl);
  /* G-glass: identical translucent card material as the app header
     (space-ds .topbar/.nav) and login / library cards, so the landing
     nav and the app nav read as the same product surface. */
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  background: var(--surface-3);
  -webkit-backdrop-filter: saturate(1.5) blur(20px);
  backdrop-filter: saturate(1.5) blur(20px);
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
  will-change: transform;
  transition: top .32s var(--ease), border-radius .32s var(--ease),
              left .32s var(--ease), right .32s var(--ease),
              max-width .32s var(--ease),
              transform .3s var(--ease),
              border-color .2s, background .2s, box-shadow .2s;
}
.ln-nav.docked {
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  max-width: none;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  /* Docked = floating OVER page content (Revolut hide/reveal). It MUST
     be near-opaque: at 70% glass a heading scrolling behind it bled
     through and read as a broken bisected title (Federico). Keep the
     subtle backdrop blur for depth but obscure content fully. The
     hero (non-docked) nav stays 70% glass - nothing behind it there.
     var(--paper) is theme-aware so dark mode is covered. */
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  background: color-mix(in srgb, var(--paper) 97%, transparent);
  box-shadow: var(--shadow-md);
}
/* Revolut-style hide-on-scroll-down / reveal-on-scroll-up. Only ever
   hides while docked (scrolled away from the hero); at the top of the
   page the nav is always shown. `transform` is now a single clean
   axis so this animates smoothly with no layout jump. The nav stays
   in the DOM + focusable; focusin reveals it (handled in JS). */
.ln-nav.ln-hide {
  transform: translateY(-130%);
  box-shadow: none;
}

.ln-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 660;
  letter-spacing: -.025em;
  color: var(--ink);
  text-decoration: none;
}
/* Real Floom mark: the masked chevron from app.css (theme-aware,
   monochrome). The literal "f" glyph is hidden via font-size:0. */
.ln-mark {
  width: 22px;
  height: 22px;
  font-size: 0;
  color: transparent;
  flex-shrink: 0;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M32 26h20l22 22a3 3 0 0 1 0 4l-22 22H32a6 6 0 0 1-6-6V32a6 6 0 0 1 6-6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M32 26h20l22 22a3 3 0 0 1 0 4l-22 22H32a6 6 0 0 1-6-6V32a6 6 0 0 1 6-6z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.ln-right {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ln-link {
  font-size: 13.5px;
  color: var(--ink-soft);
  padding: 6px 10px;
  border-radius: var(--r-md);
  transition: color .15s, background .15s;
  font-weight: 450;
  text-decoration: none;
}
.ln-link:hover { color: var(--ink); background: var(--accent-soft); }

.ln-cta {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--r-md);
  background: var(--solid);
  color: var(--solid-fg);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  box-shadow: var(--shadow-btn);
  transition: background .15s, box-shadow .15s;
  margin-left: 4px;
}
.ln-cta:hover { background: var(--solid-2); }

/* D6: a clearly visible, LABELLED Light/Dark control (not a bare icon) */
.ln-theme {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px 0 11px;
  border: 1px solid var(--line-strong);
  /* consistency: was --r-pill, the lone fully-round control next to
     the squared Sign in / hero buttons. Unify to --r-md so nav + hero
     share one radius language (matches the tighter/less-round brand). */
  border-radius: var(--r-md);
  background: var(--surface-3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  color: var(--ink-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  letter-spacing: -.01em;
  transition: color .15s, background .15s, border-color .15s;
}
.ln-theme svg { flex-shrink: 0; }
.ln-theme:hover {
  color: var(--ink);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
@media (max-width: 640px) {
  .ln-theme { min-height: 40px; height: 40px; }
}

/* -- Hero ---------------------------------------------------------- */
.ln-hero {
  padding: 162px 0 0;
  text-align: center;
  position: relative;
}

/* "Backed by Founders Inc" badge (above the H1) */
.ln-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
  font-size: 12px;
  letter-spacing: -.005em;
}
.ln-badge-k {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-mute);
}
.ln-badge-v {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 11px;
  font-weight: 600;
  color: var(--ink);
}
.ln-badge-v::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 1px; height: 11px;
  transform: translateY(-50%);
  background: var(--line-strong);
}
.ln-badge-logo {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--ink);
}

/* eyebrow */
.ln-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  font-size: 12px;
  font-weight: 550;
  color: var(--ink-soft);
  margin-bottom: 28px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ln-eyebrow:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
  background: var(--surface-3);
}
.ln-eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  flex-shrink: 0;
}
.ln-eyebrow strong { color: var(--ink); font-weight: 600; }

/* headline */
.ln-h1 {
  font-size: clamp(42px, 6vw, 76px);
  font-weight: 680;
  letter-spacing: -.04em;
  line-height: 1.03;
  color: var(--ink);
  max-width: 860px;
  margin: 0 auto;
}
.ln-h1 em {
  font-style: normal;
  color: var(--accent);
}

/* sub */
.ln-sub {
  margin: 26px auto 0;
  max-width: 54ch;
  font-size: 18px;
  line-height: 1.58;
  color: var(--ink-soft);
  font-weight: 400;
}
.ln-sub .flogo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.ln-sub .flogo svg {
  width: 14px; height: 14px;
  vertical-align: -2px;
  color: var(--ink);
  opacity: .85;
}

/* ctas */
.ln-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 36px;
}
.ln-btn-primary {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 28px;
  /* unified with nav Sign in (--r-md): one button radius across the
     whole landing, no --r-md vs --r-lg split between nav and hero. */
  border-radius: var(--r-md);
  background: var(--solid);
  color: var(--solid-fg);
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -.01em;
  text-decoration: none;
  box-shadow: var(--shadow-btn);
  transition: background .15s, transform .18s var(--ease);
}
.ln-btn-primary:hover { background: var(--solid-2); transform: translateY(-1px); }
/* P0-1 (audit A, dark-CTA invisible 1.01:1): a higher-specificity rule
   shadowed the token in dark; pin the dark primary explicitly. */
html.dark .ln-btn-primary{ background:var(--solid)!important; color:var(--solid-fg)!important; }
html.dark .ln-btn-primary:hover{ background:var(--solid-2)!important; }

.ln-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 550;
  color: var(--accent);
  text-decoration: none;
  transition: gap .15s;
}
.ln-btn-ghost svg { width: 14px; height: 14px; transition: transform .15s; }
.ln-btn-ghost:hover svg { transform: translateX(3px); }

/* Secondary CTA: start-from-terminal command, click to copy. Quiet
   terminal chip so the cloud "Start a workspace" stays primary. */
.ln-cmd {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  /* match the primary button radius (--r-md) so the hero CTA pair
     reads as one consistent component set */
  border-radius: var(--r-md);
  background: var(--surface-3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .18s var(--ease);
}
.ln-cmd:hover {
  border-color: var(--accent-line);
  background: var(--surface-3);
  transform: translateY(-1px);
}
.ln-cmd-pr { color: var(--accent); font-weight: 700; }
.ln-cmd code {
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: -.005em;
  color: var(--ink);
  /* proto app.css styles bare <code> with a dark fill + padding via a
     higher-priority rule; the command must read as part of the one
     chip, not a nested box, so override hard */
  background: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
}
.ln-cmd-ic {
  width: 14px; height: 14px;
  color: var(--ink-mute);
  flex-shrink: 0;
  transition: color .15s;
}
.ln-cmd:hover .ln-cmd-ic { color: var(--accent); }
.ln-cmd-ok {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
/* Copied state: hide the command/prompt/icon entirely and show a
   single centred "Copied" so nothing overlaps the dimmed text. */
.ln-cmd.copied { border-color: var(--accent-line); }
.ln-cmd.copied .ln-cmd-pr,
.ln-cmd.copied code,
.ln-cmd.copied .ln-cmd-ic { visibility: hidden; }
.ln-cmd.copied .ln-cmd-ok { display: flex; }

/* Tertiary: live demo, intentionally demoted to a quiet text link
   below the CTAs (not a primary path). */
.ln-demo-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  font-size: 14px;
  font-weight: 550;
  color: var(--ink-mute);
  text-decoration: none;
  transition: color .15s, gap .15s;
}
.ln-demo-link svg { width: 13px; height: 13px; transition: transform .15s; }
.ln-demo-link:hover { color: var(--accent); }
.ln-demo-link:hover svg { transform: translateX(3px); }

/* meta row */
.ln-meta {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-mute);
}
.ln-meta span:not(.sep) { white-space: nowrap; }
.ln-meta .sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .ln-meta {
    flex-direction: column;
    gap: 7px;
    font-size: 11px;
  }
  .ln-meta .sep { display: none; }
}

/* Mobile touch targets: every interactive control reaches >=40px
   tap height. The nav band is 52px tall so growing the controls
   inside it does not change the layout; visual size is unchanged
   (padding/min-height only, the glyphs and labels keep their size). */
@media (max-width: 640px) {
  .ln-cta { height: 40px; padding: 0 18px; }
  /* keep the labelled pill, just reach a 40px tap height on mobile */
  .ln-theme { min-height: 40px; height: 40px; padding: 0 13px 0 12px; }
  .ln-link {
    min-height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* closeout P1: home/brand link was 73x23 -> 40px tap height */
  .ln-brand {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .ln-btn-ghost { min-height: 44px; padding: 0 4px; }
  /* CTAs stack on mobile so the primary button and the terminal
     command chip do not overflow the 390 viewport. Both keep a
     >=40px tap height; the command shrinks to fit on one line. */
  .ln-ctas { flex-direction: column; gap: 14px; }
  .ln-btn-primary { height: 46px; }
  .ln-cmd {
    width: 100%;
    max-width: 360px;
    height: 46px;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    font-size: 13px;
  }
  .ln-cmd code { font-size: 13px; }
  .ln-cmd-ok { right: auto; }
  .ln-demo-link { min-height: 40px; }
}

/* -- Hero product visual ------------------------------------------- */
.ln-shot-wrap {
  position: relative;
  margin: 56px 0 0;
  padding-bottom: 0;
}
/* Ambient glow: steel halo behind the product shot */
.ln-shot-wrap::before {
  content: "";
  position: absolute;
  left: 50%; top: -12%;
  width: 90%;
  height: 65%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--accent) 20%, transparent) 0%,
    color-mix(in srgb, var(--accent) 6%, transparent) 50%,
    transparent 72%
  );
  filter: blur(72px);
  z-index: 0;
  pointer-events: none;
}
/* Second glow layer for depth, bottom spread */
.ln-shot-wrap::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 70%;
  height: 40%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--accent) 10%, transparent),
    transparent 70%
  );
  filter: blur(56px);
  z-index: 0;
  pointer-events: none;
}

.ln-shot {
  position: relative;
  z-index: 1;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-pop), 0 0 0 1px rgba(58,110,165,.12);
  animation: shotIn .9s var(--ease) both;
}
html.dark .ln-shot {
  box-shadow: var(--shadow-pop), 0 0 0 1px rgba(127,176,224,.1);
}
@keyframes shotIn {
  from { opacity: 0; transform: translateY(28px) scale(.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Chrome bar: neutral, refined (Cursor/Linear restraint, no accent slab) */
.ln-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 16px;
  background: color-mix(in srgb, var(--bg-2) 70%, var(--paper));
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.ln-chrome-tl {
  display: flex;
  gap: 7px;
  flex-shrink: 0;
}
.ln-chrome-tl i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.ln-chrome-url {
  flex: 1;
  max-width: 300px;
  margin: 0 auto;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
}
.ln-chrome-url svg { width: 10px; height: 10px; opacity: .6; flex-shrink: 0; }
/* nav affordance: small hamburger right of the URL bar. Always rendered
   so the mock chrome reads as a real browser tab; at narrow viewports
   when the .ln-sidebar inside the mock is hidden, this hamburger is
   the only visual cue that "menu / sidebar exists" inside the app. */
.ln-chrome-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink-soft);
  cursor: default; /* mock; not interactive */
  transition: color .15s, border-color .15s;
}
.ln-chrome-burger svg { width: 13px; height: 13px; }
@media (max-width:760px){
  /* at mobile the sidebar inside the mock is hidden, so emphasise the
     hamburger as the implicit nav affordance */
  .ln-chrome-burger { border-color: var(--accent-line); color: var(--ink); }
}

/* Cockpit app layout.
   L8: a CONSTANT height across every view. The shot used to jump
   ~37px between Skills (grid + rail) and System/Activity (one card).
   Pin the app to a fixed height so the product shot never resizes
   when the demo switches views; each view fills the same box. */
.ln-app {
  display: grid;
  grid-template-columns: 208px 1fr 256px;
  height: 470px;
  min-height: 470px;
  text-align: left;
  transition: grid-template-columns .42s var(--ease);
}
/* The detail rail is only coherent for the Skills view. For the
   neutral start, System instructions and Activity the layout reflows
   to 2 columns (sidebar + main) so there is no orphaned skill panel
   and no empty third column. */
/* Skills with NO skill selected also reflows to 2 columns: the grid
   stands alone and the detail rail only slides in once a card is
   clicked (data-sel="1"). */
.ln-app[data-view="neutral"],
.ln-app[data-view="sys"],
.ln-app[data-view="act"],
.ln-app[data-view="skills"]:not([data-sel="1"]) {
  grid-template-columns: 208px 1fr;
}
.ln-app[data-view="neutral"] #lnDetail,
.ln-app[data-view="sys"] #lnDetail,
.ln-app[data-view="act"] #lnDetail,
.ln-app[data-view="skills"]:not([data-sel="1"]) #lnDetail {
  display: none;
}
@media (max-width: 900px) {
  /* Mobile: only .ln-main shows (sidebar/detail/cursor are
     display:none below). Keep the panel a STABLE fixed height so the
     auto-demo can cycle views without the mock jumping height as
     content reflows. It is a decorative glimpse, so a long view
     clipping at the bottom is fine - a stable phone-screen reads far
     better than a janky resizing box. */
  .ln-app,
  .ln-app[data-view="neutral"],
  .ln-app[data-view="sys"],
  .ln-app[data-view="act"],
  .ln-app[data-view="skills"]:not([data-sel="1"]) {
    grid-template-columns: 1fr;
    height: 432px;
    min-height: 432px;
    overflow: hidden;
    transition: none;
  }
  .ln-app .ln-main { height: 100%; overflow: hidden; }
}

/* Sidebar */
.ln-sidebar {
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 80%, var(--paper));
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 2px;
  /* subtle inner shadow on right edge to add depth */
  box-shadow: inset -1px 0 0 var(--line);
}
/* dark: slightly lighter sidebar to separate from main */
html.dark .ln-sidebar {
  background: color-mix(in srgb, var(--paper) 60%, var(--bg));
}

.ln-sb-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 660;
  letter-spacing: -.025em;
  color: var(--ink);
  padding: 2px 7px 16px;
}
.ln-sb-mark {
  width: 17px; height: 17px;
  flex-shrink: 0;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M32 26h20l22 22a3 3 0 0 1 0 4l-22 22H32a6 6 0 0 1-6-6V32a6 6 0 0 1 6-6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M32 26h20l22 22a3 3 0 0 1 0 4l-22 22H32a6 6 0 0 1-6-6V32a6 6 0 0 1 6-6z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ln-sb-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-mute);
  padding: 0 8px 6px;
}
.ln-sb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 9px;
  border-radius: var(--r-md);
  font-size: 12.5px;
  font-weight: 490;
  color: var(--ink-soft);
  transition: background .15s, color .15s;
  cursor: default;
}
.ln-sb-item svg { width: 14px; height: 14px; opacity: .55; flex-shrink: 0; }
.ln-sb-item.on {
  background: var(--surface-3);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.ln-sb-item.on svg { opacity: 1; color: var(--accent); }
.ln-sb-item .badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-mute);
}
.ln-sb-ws {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-3);
  box-shadow: var(--shadow-sm);
}
.ln-sb-ws i {
  width: 24px; height: 24px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 8.5px;
  font-weight: 700;
  font-style: normal;
  flex-shrink: 0;
}
html.dark .ln-sb-ws i { color: #0c1a30; }
.ln-sb-ws .wn { font-size: 11.5px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.ln-sb-ws .wr { font-family: var(--font-mono); font-size: 9px; color: var(--ink-mute); }

/* Main pane */
.ln-main {
  padding: 22px 24px;
  min-width: 0;
  overflow: hidden;
  background: var(--paper);
  /* fill the fixed 470px app height so the active view can center
     its content instead of collapsing to content height (which left
     a large dead area below the neutral / skills views) */
  display: flex;
  flex-direction: column;
}
.ln-pane-h {
  font-size: 17px;
  font-weight: 660;
  letter-spacing: -.025em;
  color: var(--ink);
}
.ln-pane-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-mute);
}
.ln-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0;
  flex-wrap: wrap;
}
.ln-chip {
  font-size: 11px;
  font-weight: 550;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  white-space: nowrap;
}
.ln-chip.on {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.ln-grid {
  display: grid;
  /* 6 near-square tiles in a 3x2 grid that fills the area (no empty
     look, no big side gutter). Left-aligned and anchored under the
     "All skills" header. Rows stretch to fill the fixed mock height
     so there is no dead space below; cards come out close to square
     (Federico: "square or almost square"). */
  grid-template-columns: repeat(3, minmax(0, 200px));
  grid-auto-rows: 1fr;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  align-content: stretch;
  justify-content: start;
}
@media (max-width: 900px) { .ln-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; flex: none; } }
@media (max-width: 640px) { .ln-grid { grid-template-columns: repeat(2, 1fr); } }

.ln-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  padding: 13px;
  /* the 3x2 grid sizes the cell (near-square); the card fills it and
     distributes content top (icon) -> name/desc -> meta at the base */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.ln-card.hot {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-sm);
  transform: translateY(-1px);
}
.ln-card-icon {
  width: 28px; height: 28px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink);
  margin-bottom: 10px;
}
.ln-card-icon svg { width: 13px; height: 13px; }
.ln-card-name {
  font-size: 12.5px;
  font-weight: 620;
  letter-spacing: -.01em;
  color: var(--ink);
}
.ln-card-desc {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.ln-card-meta {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-mute);
}
.ln-card-meta .pub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ln-card-meta .pub i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2.5px var(--accent-soft);
  font-style: normal;
}

/* Detail panel (right side) */
.ln-detail {
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 60%, var(--paper));
  padding: 22px 20px;
  overflow: hidden;
}
html.dark .ln-detail {
  background: color-mix(in srgb, var(--paper) 70%, var(--bg));
}
@media (max-width: 900px) { .ln-detail { display: none; } }

.ln-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.ln-detail-icon {
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink);
  flex-shrink: 0;
}
.ln-detail-icon svg { width: 15px; height: 15px; }
.ln-detail-title {
  font-size: 14px;
  font-weight: 660;
  letter-spacing: -.02em;
  color: var(--ink);
}
.ln-detail-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-mute);
  margin-top: 2px;
}

.ln-detail-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  margin-bottom: 12px;
}

.ln-detail-body {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-2));
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  padding: 12px;
}
.ln-detail-comment { color: var(--ink-mute); }
.ln-detail-body .key { color: var(--accent); font-weight: 600; }

.ln-detail-agents {
  margin-top: 14px;
}
.ln-detail-agents .lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.ln-agent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--ink);
}
.ln-agent-row svg { width: 12px; height: 12px; color: var(--ink-mute); flex-shrink: 0; }
.ln-agent-row .status {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 1px 6px;
  border-radius: 999px;
}

/* -- Switchable views in the main pane (auto-demo) ---------------- */
.ln-view { display: none; }
.ln-view.on {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  animation: lnViewIn .42s var(--ease) both;
}
@keyframes lnViewIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* System-instructions + Activity views: composed to Skills-grade
   craft in the BATCH 5 block at the end of this file (single source). */

/* -- Demo cursor -------------------------------------------------- */
.ln-cursor {
  position: absolute;
  left: 0; top: 0;
  width: 17px; height: 17px;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: transform .62s cubic-bezier(.65,.05,.36,1), opacity .35s;
  filter: drop-shadow(0 1px 3px rgba(10,16,28,.34));
}
.ln-cursor.show { opacity: 1; }
.ln-cursor svg { width: 17px; height: 17px; display: block;
  transition: transform .2s var(--ease); }
/* tap = scale the inner SVG so it composes with the wrapper's
   inline translate() (no transform conflict) */
.ln-cursor.tap svg { animation: lnTap .38s var(--ease); }
@keyframes lnTap {
  45% { transform: scale(.7); }
}

@media (prefers-reduced-motion: reduce) {
  .ln-cursor { display: none; }
  .ln-view, .ln-view.on { animation: none; }
}
/* below 900px the shot collapses to the grid only (no cursor demo) */
@media (max-width: 900px) {
  .ln-cursor { display: none; }
  .ln-view:not(.on) { display: none; }
  .ln-view.on { animation: none; }
}

/* Mobile: hide sidebar; show the skill grid as the product moment */
@media (max-width: 900px) {
  .ln-sidebar { display: none; }
  .ln-main { padding: 20px 18px 22px; }
  .ln-app { min-height: auto; }
}
@media (max-width: 640px) {
  .ln-pane-h { font-size: 15px; }
  .ln-filters { margin: 12px 0; gap: 5px; }
  .ln-grid { gap: 9px; }
}

/* -- Logo strip: integrated inline lockup (no boxed grid) --------- */
.ln-trust {
  padding: 72px 0 0;
}
.ln-trust-label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-mute);
}
.ln-logos {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 40px;
}
.ln-logo-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 560;
  color: var(--ink-soft);
  letter-spacing: -.01em;
  opacity: .85;
  transition: opacity .15s, color .15s;
}
.ln-logo-cell:hover { opacity: 1; color: var(--ink); }
.ln-logo-cell svg { width: 17px; height: 17px; flex-shrink: 0; }
@media (max-width: 640px) {
  .ln-logos { gap: 14px 26px; }
  .ln-logo-cell { font-size: 13px; }
}

/* -- Feature sections ---------------------------------------------- */
.ln-feat {
  padding: 104px 0 0;
}
.ln-feat-row {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.ln-feat-row + .ln-feat-row { margin-top: 130px; }
.ln-feat-row.rev .ln-ft-txt { order: 2; }
@media (max-width: 900px) {
  .ln-feat-row { grid-template-columns: 1fr; gap: 36px; }
  .ln-feat-row + .ln-feat-row { margin-top: 88px; }
  .ln-feat-row.rev .ln-ft-txt { order: 0; }
}

.ln-ft-eye {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 620;
  letter-spacing: .06em;
  color: var(--accent);
  text-transform: uppercase;
}
.ln-ft-eye::before {
  content: "";
  width: 18px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--accent);
  flex-shrink: 0;
}
/* CANON sec 10  -  section h2 = 22 / 640 / -.02em. */
.ln-ft-txt h2 {
  margin-top: 14px;
  font-size: 22px;
  font-weight: 640;
  letter-spacing: -.02em;
  line-height: 1.18;
  color: var(--ink);
}
.ln-ft-txt p {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink-soft);
  max-width: 40ch;
}
.ln-ft-lnk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  font-size: 14px;
  font-weight: 570;
  color: var(--accent);
  text-decoration: none;
}
.ln-ft-lnk svg { width: 14px; height: 14px; transition: transform .15s; }
.ln-ft-lnk:hover svg { transform: translateX(3px); }

/* Feature visual panels */
.ln-ft-vis {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.ln-ftv-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--bg-2) 70%, var(--paper));
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.ln-ftv-bar i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.ln-ftv-bar span {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: .01em;
}
.ln-ftv-body {
  padding: 26px 28px;
  min-height: 304px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* -- Feature 1: "one source of truth" composed canvas ------------ */
.ln-sot { gap: 0; justify-content: flex-start; padding: 24px 26px; }
.ln-sot-src {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent) 5%, var(--paper));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 7%, transparent);
}
.ln-sot-ic {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-2));
  border: 1px solid var(--accent-line);
  color: var(--accent);
  flex-shrink: 0;
}
.ln-sot-ic svg { width: 19px; height: 19px; }
.ln-sot-id { flex: 1; min-width: 0; }
.ln-sot-nm {
  font-size: 15px;
  font-weight: 640;
  letter-spacing: -.02em;
  color: var(--ink);
}
.ln-sot-mt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  margin-top: 3px;
}
.ln-sot-ver { text-align: right; flex-shrink: 0; }
.ln-sot-vchip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--solid-fg);
}
html.dark .ln-sot-vchip { color: var(--ink-on-accent); }
.ln-sot-vsub {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-mute);
  margin-top: 5px;
}
.ln-sot-fan {
  position: relative;
  margin-top: 18px;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--paper) 60%, var(--bg-2));
}
/* connector line from the source down into the fan */
.ln-sot-fan::before {
  content: "";
  position: absolute;
  left: 50%; top: -18px;
  width: 2px; height: 18px;
  border-radius: 2px;
  background: var(--accent-line);
}
.ln-sot-fan-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-mute);
}
.ln-sot-targets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0 14px;
}
.ln-sot-t {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  font-size: 12.5px;
  font-weight: 520;
  color: var(--ink);
}
.ln-sot-t svg { width: 14px; height: 14px; color: var(--ink-soft); flex-shrink: 0; }
.ln-sot-t .ok {
  margin-left: auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  flex-shrink: 0;
}
.ln-sot-note {
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.5;
}

/* -- Feature 2: targets sync-status panel (product, not a terminal) -- */
.ln-sync { gap: 0; justify-content: flex-start; padding: 20px 22px; }
.ln-sync-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 2px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.ln-sync-t {
  font-size: 13px;
  font-weight: 640;
  letter-spacing: -.01em;
  color: var(--ink);
}
.ln-sync-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
}
.ln-sync-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.ln-sync-row:last-child { border-bottom: none; }
.ln-sync-ag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 530;
  color: var(--ink);
  min-width: 0;
}
.ln-sync-ag svg { width: 16px; height: 16px; color: var(--ink-soft); flex-shrink: 0; }
.ln-sync-d {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  color: var(--ink-mute);
  margin-top: 3px;
}
.ln-sync-st {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.ln-sync-st.ok {
  color: var(--ink-mute);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.ln-sync-pull {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--solid-fg);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
html.dark .ln-sync-pull { color: var(--ink-on-accent); }
.ln-sync-row.pending .ln-sync-ag { flex-wrap: wrap; }
.ln-sync-row.pending .ln-sync-d { flex-basis: 100%; padding-left: 26px; }
.ln-sync-row.pending {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  margin: 0 -22px;
  padding-left: 26px;
  padding-right: 26px;
}

/* version rows */
.ln-vr {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--paper) 70%, var(--bg-2));
  transition: border-color .2s, transform .2s var(--ease);
}
.ln-vr + .ln-vr { margin-top: 8px; }
.ln-vr:hover { transform: translateX(2px); border-color: var(--accent-line); }
.ln-vr svg { width: 15px; height: 15px; color: var(--accent); opacity: .85; flex-shrink: 0; }
.ln-vr .vn { font-size: 13px; font-weight: 550; color: var(--ink); }
.ln-vr .vv { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.ln-vr .vb {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}

/* cli visual */
.ln-cli {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 2.1;
  color: var(--ink-soft);
  padding: 4px 0;
}
.ln-cli .pr { color: var(--accent); font-weight: 600; }
.ln-cli .cm { color: var(--ink-mute); }

/* share card: refined composition in the BATCH 5 block at the end
   of this file (L11 ,  single source of truth). */

/* -- Final CTA ----------------------------------------------------- */
.ln-cta-section {
  padding: 104px 24px 112px;
  text-align: center;
  border-top: 1px solid var(--line);
  margin-top: 108px;
  position: relative;
}
.ln-cta-section::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 70%;
  height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--accent) 13%, transparent),
    transparent 70%);
  filter: blur(64px);
  pointer-events: none;
  z-index: 0;
}
.ln-cta-section > * { position: relative; z-index: 1; }
.ln-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-mute);
  margin-bottom: 22px;
}
.ln-cta-eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  flex-shrink: 0;
}
.ln-cta-section h2 {
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 680;
  letter-spacing: -.04em;
  line-height: 1.04;
  color: var(--ink);
}
.ln-cta-sub {
  margin: 18px auto 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* -- Footer -------------------------------------------------------- */
.ln-footer {
  border-top: 1px solid var(--line);
  padding: 52px 0;
}
.ln-footer-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr repeat(4, auto);
  gap: 30px 56px;
  align-items: start;
}
@media (max-width: 760px) {
  .ln-footer-in { grid-template-columns: 1fr 1fr; gap: 28px; }
}
/* GAP-C: at <=640 the footer was a ~633px single-column stack (brand
   line + 4 link groups all stacked). Make it a balanced 2-col grid:
   the brand block spans the full first row, the 4 link groups fall
   into a tidy 2x2 below. Roughly half the height, looks intentional.
   Desktop (the base `1fr repeat(4,auto)` grid) is untouched. The old
   <=440 `1fr` collapse is overridden here so 390 gets the 2-col grid,
   not the tall stack. */
@media (max-width: 640px) {
  .ln-footer { padding: 40px 0; }
  .ln-footer-in {
    grid-template-columns: 1fr 1fr;
    gap: 26px 24px;
    padding: 0 20px;
  }
  .ln-footer-brand { grid-column: 1 / -1; }
  .ln-footer-col a { padding: 4px 0; }
}

/* GAP-B (landing): explicitly hide the shared decorative corner-frame
   on the landing page at mobile too. landing-v2.html uses the same
   .spaceframe from space-ds.css (no separate `.ln` frame variant
   exists), so the space-ds.css <=640 rule already covers it; this is
   the scoped, explicit landing-side guard the spec asked for and is
   harmless if the shared rule changes. */
@media (max-width: 640px) {
  body .spaceframe { display: none !important; }
}
.ln-footer-brand {
  font-size: 15px;
  font-weight: 660;
  letter-spacing: -.02em;
  color: var(--ink);
}
.ln-footer-brand .cp {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 400;
  letter-spacing: 0;
}
.ln-footer-col h5 {
  font-size: 10.5px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-mute);
  margin-bottom: 11px;
}
.ln-footer-col a {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 3px 0;
  text-decoration: none;
  transition: color .15s;
}
.ln-footer-col a:hover { color: var(--accent); }

/* ================================================================
   BATCH 5 - hero demo (L9 sys/act craft, L10 neutral start, L11 share)
   ================================================================ */

/* L10: neutral start view ,  a calm, finished workspace summary (not
   an empty state). The demo begins here, then animates the first
   selection so "click -> the section appears" reads from the top. */
.ln-neutral {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.ln-neutral-mark {
  width: 44px; height: 44px;
  border-radius: var(--r-lg);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
  margin-bottom: 16px;
}
.ln-neutral-mark .ln-sb-mark {
  width: 22px; height: 22px; background: var(--accent);
}
.ln-neutral-h {
  font-size: 18px;
  font-weight: 660;
  letter-spacing: -.025em;
  color: var(--ink);
}
.ln-neutral-sub {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-mute);
}
.ln-neutral-stats {
  margin-top: 22px;
  display: flex;
  gap: 10px;
}
.ln-ns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 84px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ln-ns b {
  font-size: 19px;
  font-weight: 660;
  letter-spacing: -.02em;
  color: var(--ink);
}
.ln-ns span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-mute);
}
.ln-neutral-hint {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-faint);
}

/* L9: System instructions ,  composed to Skills-grade craft */
.ln-sysi {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--paper) 60%, var(--bg-2));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.ln-sysi-hd {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.ln-sysi-ic {
  width: 30px; height: 30px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  color: var(--accent);
  flex-shrink: 0;
}
.ln-sysi-ic svg { width: 15px; height: 15px; }
.ln-sysi-id { flex: 1; min-width: 0; }
.ln-sysi-nm {
  font-size: 13px;
  font-weight: 620;
  letter-spacing: -.01em;
  color: var(--ink);
}
.ln-sysi-mt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.ln-sysi-ver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  flex-shrink: 0;
}
.ln-sysi-ver i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2.5px var(--accent-soft);
}
.ln-sysi-body { padding: 16px 18px 6px; }
.ln-sysi-blk { margin-bottom: 14px; }
.ln-sysi-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.ln-sysi-blk p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.ln-sysi-ft {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 50%, transparent);
}
.ln-sysi-ft-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-mute);
  margin-right: 3px;
}
.ln-sysi-tag {
  font-size: 11px;
  font-weight: 520;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  color: var(--ink-soft);
}

/* L9: Activity ,  a composed timeline feed */
.ln-act { margin-top: 14px; position: relative; }
.ln-act-day {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-mute);
  margin: 14px 0 6px 2px;
}
.ln-act-day:first-child { margin-top: 0; }
.ln-ar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 18px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ln-ar + .ln-ar { margin-top: 6px; }
.ln-ar-dot {
  position: absolute;
  left: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  flex-shrink: 0;
}
.ln-ar .ae {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
.ln-ar .as {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ln-ar .as em {
  font-style: normal;
  color: var(--ink-mute);
}
.ln-ar .aw {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.ln-ar .at {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  min-width: 26px;
  text-align: right;
  flex-shrink: 0;
}

/* L11: share visual ,  more premium composition + hierarchy */
.ln-share-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--accent) 5%, var(--paper));
  border-bottom: 1px solid var(--line);
}
.ln-share-av {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 680;
  flex-shrink: 0;
}
.ln-share-tx { flex: 1; min-width: 0; }
.ln-share-who {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.ln-share-who b {
  font-size: 13px;
  font-weight: 640;
  letter-spacing: -.01em;
  color: var(--ink);
}
.ln-share-time {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-mute);
}
.ln-share-msg {
  margin-top: 5px;
  padding-left: 10px;
  border-left: 2px solid var(--accent-line);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: italic;
}
.ln-share-body { padding: 18px; }
.ln-share-sk {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-3);
}
.ln-share-si {
  width: 34px; height: 34px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  display: grid;
  place-items: center;
  color: var(--accent);
  flex-shrink: 0;
}
.ln-share-si svg { width: 17px; height: 17px; }
.ln-share-skid { flex: 1; min-width: 0; }
.ln-share-sn {
  font-size: 13.5px;
  font-weight: 640;
  letter-spacing: -.01em;
  color: var(--ink);
}
.ln-share-sm {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.ln-share-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.ln-share-badge i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2.5px var(--accent-soft);
}
.ln-share-trust {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--ink-mute);
}
.ln-share-trust svg {
  width: 13px; height: 13px;
  color: var(--accent);
  flex-shrink: 0;
}
.ln-share-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.ln-share-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  border-radius: var(--r-md);
  font-size: 12.5px;
  font-weight: 600;
  cursor: default;
}
.ln-share-btn.p {
  background: var(--solid);
  color: var(--solid-fg);
  box-shadow: var(--shadow-btn);
}
.ln-share-btn.s {
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-weight: 520;
}
.ln-share-btn svg { width: 13px; height: 13px; }
.ln-share-nf {
  margin-top: 11px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
}

/* -- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ln-shot { animation: none; }
  .ln-app { transition: none; }
  .ln-vr, .ln-btn-primary, .ln-btn-ghost svg, .ln-ft-lnk svg { transition: none; }
}

/* ================================================================
   BATCH 7 - F2: landing-v2 visual parity with the refined app system
   --------------------------------------------------------------------
   The app got the BATCH 5 D1-D4 refinement (translucent glass cards,
   accent-glass icon containers with a steel glyph, clean dot+label
   visibility chips, tighter radius). landing-v2 was visually behind
   (opaque-paper skill cards + flat grey icon boxes), so the product
   shot no longer read as the same product. This block lifts the
   landing demo's cards / icon containers / feature panels to the SAME
   material as space-ds.css D1/D2 so app and landing are one product.
   Loaded last in landing-v2.css = single source, wins source-order
   over the original .ln-card / .ln-card-icon / .ln-detail-icon /
   .ln-ft-vis rules. E6 (Revolut hide) + L8-L12 (radius/demo/share)
   are untouched: only fill / blur / border / glyph colour change.
   ================================================================ */

/* D1 parity: skill cards = the same translucent glass as the app
   .sk grid card (surface-2 + real blur + accent hairline + sm shadow)
   instead of an opaque paper tile. */
/* Exact match to the measured app .sk grid card (computed both modes:
   surface-2 fill, saturate(1.5) blur(20px), accent~13% hairline,
   --r-xl 11px radius, shadow-sm). Same numbers = one product. */
.ln-card {
  background: var(--surface-2);
  -webkit-backdrop-filter: saturate(1.5) blur(20px);
  backdrop-filter: saturate(1.5) blur(20px);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.ln-card.hot {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-sm);
}

/* D2 parity: every icon CONTAINER in the demo = accent-tinted glass
   + a hairline accent ring + soft inner highlight + steel glyph (no
   flat grey box anywhere). Mirrors space-ds.css D2 exactly. The grid
   card icon and the right-rail detail icon were still the old grey
   var(--bg-2) box; the BATCH-5 containers (sysi / neutral / share /
   sot) already follow this and are normalised here in one rule so
   the whole demo is identical. */
.ln-card-icon,
.ln-detail-icon,
.ln-sot-ic,
.ln-sysi-ic,
.ln-neutral-mark,
.ln-share-si {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
  color: var(--accent);
}
.ln-card-icon svg,
.ln-detail-icon svg,
.ln-sot-ic svg,
.ln-sysi-ic svg,
.ln-share-si svg { color: var(--accent); opacity: 1; }
/* keep the neutral-start mark a solid steel chevron on its accent
   glass (it is a brand mark, not a line glyph) */
.ln-neutral-mark .ln-sb-mark { background: var(--accent); }

/* D1 parity: feature visual panels = the same refined glass as the
   app .panel (surface-3 + blur + accent hairline) instead of opaque
   paper, so the two product panels read as the same surface. */
.ln-ft-vis {
  background: var(--surface-3);
  -webkit-backdrop-filter: saturate(1.5) blur(20px);
  backdrop-filter: saturate(1.5) blur(20px);
  border: 1px solid color-mix(in srgb, var(--accent) 13%, var(--line));
  box-shadow: var(--shadow-sm);
}

/* Consistency: the small inner rows inside the demo (agent row in
   the detail rail) move off opaque paper onto the same translucent
   surface-2 so nothing inside the shot is a heavier opaque slab than
   the cards around it. Restraint preserved: rows stay quiet, no
   per-row blur (matches the app's "glass on cards, not list rows"
   rule - this is only an alpha match, not a card treatment). */
.ln-agent-row { background: var(--surface-2); }

/* ================================================================
   PHASE 3 - landing-v2 mobile completeness ( <= 640px )
   The CTA stack / theme pill / cockpit-collapse / logo-wrap / footer
   rules already exist (verified). This adds the missing hero + nav
   mobile tuning: the 162px desktop hero top padding leaves a huge
   empty band above the headline at 390, the clamp() h1 floor (42px)
   is oversized for a 358px content box, and the fixed nav 32px side
   insets are wide for 390. Standalone file (not proto); ASCII only.
   ================================================================ */
@media (max-width: 640px) {
  .ln-hero {
    padding: 104px 0 0 !important;
  }
  /* CANON sec 10.1 R1  -  hero h1 clamp floor stays 42 on every breakpoint.
     Previous override dropped to 31 which violates the floor; restore. */
  .ln-h1 {
    font-size: clamp(38px, 8vw, 76px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
    max-width: 100% !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
  }
  .ln-sub {
    font-size: 15px !important;
    margin-top: 18px !important;
    padding: 0 20px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* hero (non-docked): floating inset pill */
  .ln-nav:not(.docked) {
    left: 14px !important;
    right: 14px !important;
    top: 14px !important;
  }
  /* docked (scrolled, floating over content): flush to the top edge,
     full-width, no radius -> no transparent sliver above it where a
     heading scrolling behind it would bleed through (Federico's
     bisected-title bug). Pairs with the 97% opaque docked bg. */
  .ln-nav.docked {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    border-radius: 0 !important;
  }
  .ln-nav { padding: 0 12px !important; }
  /* keep the bar to a single tidy line: nothing wraps, controls
     cluster tight ("Sign in" was breaking onto 2 lines) */
  .ln-right { gap: 8px !important; }
  .ln-cta, .ln-link { white-space: nowrap !important; }
  .ln-cta { padding: 0 14px !important; }
  /* the preview switcher (#flmPrev) is injected only on built proto
     pages, not on this standalone landing; nothing to constrain here */
}
@media (max-width: 400px) {
  /* CANON sec 10.1 R1  -  landing hero h1 floor stays >=38 at every width. */
  .ln-h1 { font-size: clamp(38px, 9vw, 56px) !important; }
  /* very narrow: drop the secondary "Docs" text link so the brand +
     GitHub + theme + Sign-in stay on one comfortable line */
  .ln-right .ln-link:not([aria-label]) { display: none !important; }
}

/* ============================================================
   2D + 1A (landing-v2): scoped, additive landing-side fixes.
   landing-v2.html is the standalone marketing landing and ships
   its OWN embedded #flmPrev script + its OWN .spaceframe brackets;
   per scope this file is the ONLY place these are corrected here
   (no landing-v2.html edit). Appended at the very end so it is the
   last word; does not disturb any earlier (externally-modified)
   rule.
   ============================================================ */

/* 1A (landing): the embedded preview pill collapses to a glitchy
   dark blob over the stat cards on mobile. Hide it (and its frame
   overlay) entirely <=900px and neutralise the html.flm-mobile
   content-hide so the page is never blanked. The marketing landing
   does not need an in-page mobile-preview toggle. Desktop keeps it
   but docked tighter into the corner gutter so it never overlaps. */
#flmPrev {
  right: 14px !important;
  bottom: 14px !important;
}
@media (max-width: 900px) {
  #flmPrev,
  #flmFrameOv,
  #flmPrevCss { display: none !important; }
  html.flm-mobile body > * { visibility: visible !important; }
}

/* 2D-a: the hero browser-mockup neutral copy ("Federico's Library"
   subline + hint) sat at --ink-mute / --ink-faint on a blurred
   glass panel and read near-invisible. Raise to readable tokens
   so it reads as a polished hero (the heading is already --ink). */
.ln-shot .ln-neutral-sub { color: var(--ink-soft) !important; }
.ln-shot .ln-neutral-hint { color: var(--ink-mute) !important; }
.ln-shot .ln-sb-ws .wr { color: var(--ink-soft) !important; }

/* 2D-b: remove the stray faint corner-bracket motif. landing-v2
   uses the shared .spaceframe (the four L-shaped corner <i>s);
   near the page bottom they overlap the final CTA section and
   read as a glitch. Drop the brackets on the landing entirely
   (the ambient .spacebg glow + the hero .ln-shot-wrap glows
   carry the atmosphere; the brackets add nothing here). */
body .spaceframe i { display: none !important; }

/* 2D-c: cap section vertical rhythm on mobile so the ~550-650px
   void between "Private by default" and the final CTA collapses,
   and the final CTA is not marooned in dead space. Desktop
   spacing is untouched (these only fire <=640). */
@media (max-width: 640px) {
  .ln-feat { padding-top: 72px !important; }
  .ln-feat-row + .ln-feat-row { margin-top: 64px !important; }
  .ln-cta-section {
    margin-top: 64px !important;
    padding-top: 72px !important;
    padding-bottom: 80px !important;
  }
  .ln-cta-section::before { height: 40% !important; }
  /* .ln-feat/.ln-trust/.ln-cta-section each set `padding: Npx 0 0`,
     which zeroes the horizontal gutter .lp1 would give -> the section
     ran edge-to-edge on mobile (Federico: "still 0 margin left and
     right"). Restore a consistent 20px side gutter (matches the hero
     .lp1). The inner rows/cards then inset properly. */
  .ln-feat, .ln-trust, .ln-cta-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
}