/* landing.css: the signed-out front page (public/landing.html), second design (2026-09-19).
   Colour tokens and base element rules still come from style.css, so the page follows whatever theme the dashboard is
   set to, light or dark. What is new here: a display face (Unbounded, already self-hosted for the dashboard themes) for
   headlines, IBM Plex Mono for commands, and five different section layouts instead of one bento.
   Shape rule, applied everywhere: screens and tiles 16px, buttons 6px, nothing else.
   Layers: nav 5. Nothing else sets z-index except the two overlapping Live Assist images (1, 2). */

@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/unbounded-latin.woff2?v=2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-500-latin.woff2?v=2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-mono-600-latin.woff2?v=2") format("woff2"); }

.landing { --ld-display: "Unbounded", var(--font); --ld-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ld-nav-h: 64px; }
.landing main { overflow-x: clip; }
.ld-wrap { width: min(1180px, 100% - 2 * clamp(20px, 4vw, 48px)); margin-inline: auto; }

/* ---- nav: one line, 64px ---- */
.ld-nav {
  position: sticky; top: 0; z-index: 5;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.ld-nav-in { height: var(--ld-nav-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ld-brand { text-decoration: none; color: var(--text); font-family: var(--ld-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }

/* ---- buttons ---- */
.ld-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, filter .15s ease;
}
.ld-btn:active { transform: scale(.98); }
.ld-btn:focus-visible { outline: 2px solid var(--accent-text, var(--accent)); outline-offset: 3px; }
.ld-btn-primary { background: var(--accent-solid, var(--accent)); color: #fff; }
.ld-btn-primary:hover { filter: brightness(1.08); }
.ld-btn-secondary { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.ld-btn-secondary:hover { background: var(--surface-3); border-color: var(--border-strong); }
.ld-btn-sm { height: 36px; padding: 0 14px; font-size: 13.5px; }
.ld-cta-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- hero: the statement, then the real Home screen across the full measure ---- */
.ld-hero { padding: clamp(40px, 8vh, 88px) 0 0; }
.ld-hero h1 {
  margin: 0 0 22px; max-width: 15ch;
  font-family: var(--ld-display); font-weight: 700; font-size: clamp(36px, 5.2vw, 72px); line-height: 1.04; letter-spacing: -0.035em;
  text-wrap: balance;
}
.ld-hero-copy p { margin: 0 0 30px; font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.55; color: var(--text-2); max-width: 52ch; }
.ld-hero-stage { margin-top: clamp(40px, 7vh, 72px); perspective: 1600px; }
.ld-hero-shot {
  display: block; width: 100%; height: auto; transform-origin: 50% 0;
  border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: var(--surface);
}

/* ---- sections ---- */
.ld-section { padding: clamp(64px, 11vh, 128px) 0 0; }
.ld-section h2, .ld-close h2 { margin: 0 0 14px; font-family: var(--ld-display); font-weight: 700; font-size: clamp(26px, 3.1vw, 40px); line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.ld-lede { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-2); max-width: 62ch; }

/* ---- what's inside: a stacking index.
   Every item is a text block and a screen. On a wide, tall enough window the items dissolve into one two-column grid
   (display: contents): screens run down the right, and each text block sticks a little lower than the one before, so
   by the last screen the four of them have piled up into an index on the left. One copy of the text, no script needed
   for the layout; the script only marks which one is current. Narrow or short windows get plain stacked items. ---- */
.ld-walk { margin-top: clamp(28px, 5vh, 48px); display: grid; gap: 56px; }
.ld-walk-item { display: grid; gap: 18px; }
.ld-walk-text h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 700; }
.ld-walk-text p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-2); max-width: 46ch; }
.ld-walk-shot { margin: 0; min-width: 0; }
.ld-walk-shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: var(--surface); }

@media (min-width: 961px) and (min-height: 780px) {
  .ld-walk { --ld-step: 158px; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(36px, 5vw, 80px); row-gap: clamp(56px, 10vh, 112px); align-items: start; }
  .ld-walk-item { display: contents; }
  .ld-walk-text { grid-column: 1; position: sticky; min-height: calc(var(--ld-step) - 22px); padding-left: 18px; border-left: 2px solid var(--border); transition: opacity .35s ease, border-color .35s ease; }
  .ld-walk-shot { grid-column: 2; }
  .ld-walk-item:nth-child(1) > * { grid-row: 1; } .ld-walk-item:nth-child(1) .ld-walk-text { top: calc(var(--ld-nav-h) + 32px); }
  .ld-walk-item:nth-child(2) > * { grid-row: 2; } .ld-walk-item:nth-child(2) .ld-walk-text { top: calc(var(--ld-nav-h) + 32px + var(--ld-step)); }
  .ld-walk-item:nth-child(3) > * { grid-row: 3; } .ld-walk-item:nth-child(3) .ld-walk-text { top: calc(var(--ld-nav-h) + 32px + 2 * var(--ld-step)); }
  .ld-walk-item:nth-child(4) > * { grid-row: 4; } .ld-walk-item:nth-child(4) .ld-walk-text { top: calc(var(--ld-nav-h) + 32px + 3 * var(--ld-step)); }
  /* the current one reads at full strength, the rest step back (only once the script is marking them) */
  html.js .ld-walk.is-tracking .ld-walk-text { opacity: .42; }
  html.js .ld-walk.is-tracking .ld-walk-text.on { opacity: 1; border-left-color: var(--accent); }
}

/* ---- live assist: copy on top, then the wide stream view with the chat panel overlapping its lower right corner ---- */
.ld-assist-stage { position: relative; margin-top: clamp(28px, 5vh, 48px); padding: 0 0 clamp(36px, 6vw, 72px); }
.ld-assist-wide { position: relative; z-index: 1; display: block; width: 84%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: var(--surface); }
.ld-assist-tall { position: absolute; z-index: 2; right: 0; bottom: 0; width: 24%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); background: var(--surface); }

/* ---- team: a tinted statement tile (two columns, two rows) and six small tiles ---- */
.ld-team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.ld-team-lead { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); min-height: 340px; }
.ld-team-lead h2 { font-size: clamp(24px, 2.5vw, 34px); }
.ld-team-lead p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-2); max-width: 34ch; }
.ld-team-cell { padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); transition: border-color .2s ease, transform .2s ease; }
.ld-team-cell:nth-of-type(3n) { background: var(--surface-2); }
.ld-team-cell:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.ld-team-cell h3 { margin: 16px 0 6px; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
.ld-team-cell p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.ld-ic { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--accent-text); font-size: 18px; }
.ld-ic svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- discord: the commands as a type index, three columns, one rule above the whole group ---- */
.ld-cmds { margin: clamp(28px, 5vh, 48px) 0 0; padding: 28px 0 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px clamp(24px, 4vw, 56px); }
.ld-cmds dt { font-family: var(--ld-mono); font-weight: 600; font-size: clamp(19px, 1.9vw, 25px); letter-spacing: -0.02em; color: var(--text); }
.ld-cmds dt i { font-style: normal; color: var(--accent-text); }
.ld-cmds dd { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); max-width: 34ch; }

/* ---- close: the one band in the accent colour. Large type and two buttons only; both buttons are checked for contrast
   against the band (ink: white on near-black, paper: near-black on white), on every theme accent. ---- */
.ld-close { margin-top: clamp(64px, 11vh, 128px); background: var(--accent-solid, var(--accent)); color: #fff; }
.ld-close-in { padding: clamp(48px, 9vh, 96px) 0; }
.ld-close h2 { font-size: clamp(30px, 4.4vw, 60px); max-width: 16ch; color: #fff; }
.ld-close p { margin: 0 0 28px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; font-weight: 600; max-width: 44ch; color: #fff; }
.ld-btn-ink { background: #14161a; color: #fff; }
.ld-btn-ink:hover { background: #23272f; }
.ld-btn-paper { background: #fff; color: #14161a; }
.ld-btn-paper:hover { background: #eceef2; }
.ld-close .ld-btn:focus-visible { outline-color: #fff; }

/* ---- footer ---- */
.ld-foot { padding: 28px 0 44px; }
.ld-foot-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-3); }
.ld-foot-in span { max-width: 62ch; line-height: 1.5; }
.ld-foot b { color: var(--text-2); font-weight: 700; }
.ld-foot a { color: var(--text-2); text-decoration: none; }
.ld-legal { display: flex; gap: 14px; flex-wrap: wrap; }
.ld-legal a { text-decoration: underline; text-underline-offset: 3px; }
.ld-foot a:hover { color: var(--text); }

/* ---- motion. Each one has a job:
   load-in stagger ......... reading order: headline, sentence, buttons, then the product
   hero screen settling .... the screen starts tipped back and lies flat as you scroll to it: "here is the product"
   reveal on scroll ........ sections arrive as you reach them (script adds .in; without script nothing is hidden)
   index dimming ........... shows which screen the text on the left belongs to
   press / lift ............ feedback on buttons and tiles
   All of it stops under prefers-reduced-motion (style.css collapses animations; the scroll-driven one is removed here). ---- */
.ld-hero-copy > * { animation: tfFadeUp .6s cubic-bezier(.2, .8, .2, 1) both; }
.ld-hero-copy > :nth-child(1) { animation-delay: .04s; }
.ld-hero-copy > :nth-child(2) { animation-delay: .14s; }
.ld-hero-copy > :nth-child(3) { animation-delay: .24s; }
.ld-hero-stage { animation: authIn .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: .3s; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ld-hero-shot { animation: ldSettle linear both; animation-timeline: view(); animation-range: entry 10% cover 42%; }
    @keyframes ldSettle { from { transform: rotateX(16deg) scale(.94); } to { transform: none; } }
  }
}
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); }
html.js .reveal.in { opacity: 1; transform: none; }
.ld-team .reveal:nth-child(2), .ld-cmds .reveal:nth-child(2) { transition-delay: .05s; }
.ld-team .reveal:nth-child(3), .ld-cmds .reveal:nth-child(3) { transition-delay: .10s; }
.ld-team .reveal:nth-child(4), .ld-cmds .reveal:nth-child(4) { transition-delay: .05s; }
.ld-team .reveal:nth-child(5), .ld-cmds .reveal:nth-child(5) { transition-delay: .10s; }
.ld-team .reveal:nth-child(6), .ld-cmds .reveal:nth-child(6) { transition-delay: .15s; }
.ld-team .reveal:nth-child(7), .ld-cmds .reveal:nth-child(7) { transition-delay: .05s; }
.ld-cmds .reveal:nth-child(8) { transition-delay: .10s; }
.ld-cmds .reveal:nth-child(9) { transition-delay: .15s; }
@media (prefers-reduced-motion: reduce) {
  .ld-hero-shot { animation: none; transform: none; }
  .ld-team-cell:hover { transform: none; }
}

/* ---- narrower windows: every multi-column layout names its own single-column form ---- */
@media (max-width: 1100px) {
  .ld-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ld-team-lead { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
}
@media (max-width: 860px) {
  .ld-hero h1 { max-width: none; }
  .ld-assist-wide { width: 100%; }
  .ld-assist-tall { position: static; display: block; width: min(300px, 70%); margin: 16px auto 0; }
  .ld-assist-stage { padding-bottom: 0; }
  .ld-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-cmds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .ld-team, .ld-cmds { grid-template-columns: 1fr; }
  .ld-cta-row .ld-btn { flex: 1; }
}