/* ═══════════════════════════════════════════════════════════════════════════
   AuroraDocs marketing site — auroradocs.eu
   World: dark product landing, category standard at Linear/Vercel/Notion craft.
   Ground #101413 cool charcoal · aurora teal primary, aurora violet second,
   warm bronze third · Schibsted Grotesk (self-hosted variable).

   The ground was a warm charcoal under a copper primary. The product is named
   after the aurora and the app now paints it — teal-green — so the site does
   too, and a teal accent on a brown surface stack reads as a half-finished
   rebrand. The greys were re-cut at the same relative luminance (ΔL ≤ 0.002
   on every surface), so only the temperature moved: nothing about the site's
   weight, density or text contrast changes.

   Sage went with the copper. It sat at 155° against the new primary's 166°
   and the two were indistinguishable as an 8px dot, which is the size the
   trio is mostly used at. Violet is the other half of an aurora, and lands
   within 0.16 of sage's old contrast on the ground.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  /* SIL Open Font License 1.1 — see fonts/OFL.txt */
  src: url('fonts/schibsted-grotesk-latin.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:            #101413;
  --bg2:           #111614;
  --surface:       #141a18;
  --surface-2:     #1b2220;
  --border:        rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.14);
  --text-1:        #eaf0ed;
  --text-2:        #a6b1ac;
  --text-3:        #808b87;
  --accent:        #38b494;   /* 7.18:1 on --bg */
  --accent-text:   #4dbf9e;   /* 8.19:1 — copper text was 8.12 */
  --accent-ink:    #06110e;   /* 7.42:1 on --accent */
  --accent2:       #a78bfa;   /* aurora violet, was sage */
  --accent3:       #E0B37A;   /* bronze, unchanged */
  /* Done is not a category. Sage carried both jobs because it happened to be
     green; violet cannot, so the success state is the primary now — which is
     also the honest reading of a teal-branded product. */
  --success:       var(--accent);
  --success-ink:   var(--accent-ink);
  --danger:        #f08a8a;
  /* The product's own object-type colours, used only inside the demo window's
     quick-create pills so the depiction reads as the app, not the site. */
  --type-page:     #7c9aff;
  --type-bookmark: #34d0c3;
  --radius:        12px;
  --max-w:         1160px;
  --nav-h:         64px;
  --cat-nav-top:   var(--nav-h);
  --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; }

::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); color: var(--text-1); }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-text) 85%, transparent);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 28px;
}

/* ── Nav ────────────────────────────────────────────────────────────────── */

nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--nav-h);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin-right: auto;
}

/* Quiet product-stage chip next to the wordmark (not a pricing tier). */
.site-beta-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: none;
}

.nav-logo img,
.footer-logo img {
  border-radius: 8px;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 13px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  transition: color 0.15s ease, background 0.15s ease;
}

.nav-links a:hover { color: var(--text-1); background: rgba(255,255,255,0.05); }

.nav-links a[aria-current="page"] { color: var(--text-1); }

.btn-nav {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: var(--text-1);
  color: var(--bg);
  white-space: nowrap;
  transition: background 0.15s ease;
}

.btn-nav:hover { background: color-mix(in srgb, var(--text-1) 88%, white); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 26px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 640;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  transition: background 0.15s ease;
}

/* Derived, so the hover cannot drift away from the fill it lightens. */
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 520;
  color: var(--text-1);
  background: transparent;
  border: 1px solid var(--border-strong);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.btn-secondary:hover { border-color: rgba(255,255,255,0.26); background: rgba(255,255,255,0.04); }

/* ── Hero (centered over aurora photograph, comp A composition) ─────────── */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  /* pull up under the sticky nav so the photograph fills the whole band */
  margin-top: calc(-1 * var(--nav-h));
  padding-top: var(--nav-h);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: url('img/aurora-hero.webp') center 32% / cover no-repeat;
  animation: hero-glow-in 1.5s ease-out 0.1s backwards;
}

/* scrim: keep the top calm for nav + headline, fade to solid ground at the fold */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg) 62%, transparent) 0%,
    color-mix(in srgb, var(--bg) 30%, transparent) 30%,
    color-mix(in srgb, var(--bg) 24%, transparent) 58%,
    color-mix(in srgb, var(--bg) 86%, transparent) 88%,
    var(--bg) 100%
  );
}

.hero-center {
  position: relative;
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
  padding-top: 72px;
}

.hero h1 {
  font-size: clamp(42px, 4.5vw, 64px);
  font-weight: 740;
  line-height: 1.03;
  letter-spacing: -0.028em;
  color: var(--text-1);
  margin-bottom: 20px;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}

.hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-1);
  opacity: 0.86;
  margin-bottom: 32px;
  max-width: 46ch;
  margin-inline: auto;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

.hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero .btn-secondary {
  background: color-mix(in srgb, var(--bg) 38%, transparent);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero .btn-secondary:hover {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.hero-caption {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-2);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

/* App window — centered, interactive demo */

.hero-app {
  position: relative;
  max-width: 940px;
  margin: 44px auto 0;
}

.app-frame {
  position: relative;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 10px 28px rgba(0,0,0,0.45);
  overflow: hidden;
  font-size: 12px;
  line-height: 1.45;
  animation: hero-window-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.12s backwards;
}

/* faint aurora light reflecting into the window from the sky above */
.app-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 58% 46% at 12% -6%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 48% 42% at 94% -6%, color-mix(in srgb, var(--accent2) 9%, transparent) 0%, transparent 58%);
  pointer-events: none;
}

.hero-demo-hint {
  position: relative;
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
  margin: 16px 0 30px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

@keyframes hero-window-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@keyframes hero-glow-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.app-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
}

.dot { width: 10px; height: 10px; border-radius: 50%; }
/* The three macOS window-control dots. These are the system's colours, not
   the site's: tinting them to the palette would stop them reading as a Mac
   window, which is the one thing the chrome is there to say. */
.dot-red    { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green  { background: #28c840; }

.window-title {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--text-3);
}

.app-body {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr) 204px;
  height: 448px;
}

/* the in-window pane toggles mirror the app's own sidebar/panel controls */
.f-noside .app-side { display: none; }
.f-noside .app-body { grid-template-columns: minmax(0, 1fr) 204px; }
.f-nopanel .app-panel { display: none; }
.f-nopanel .app-body { grid-template-columns: 188px minmax(0, 1fr); }
.f-noside.f-nopanel .app-body { grid-template-columns: minmax(0, 1fr); }

.app-side {
  border-right: 1px solid var(--border);
  background: rgba(0,0,0,0.14);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.app-ws {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 10px;
  font-weight: 640;
  font-size: 12px;
  color: var(--text-1);
  white-space: nowrap;
}

.app-ws-caret { margin-left: auto; color: var(--text-3); }

.app-ws-mark {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

/* sidebar tools: search + new page, like the app's workspace header */
.side-tools {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 2px 9px;
}

.side-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(0,0,0,0.14);
  color: var(--text-3);
  cursor: text;
}

.side-search:focus-within { border-color: var(--border-strong); }

.side-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  color: var(--text-1);
}

.side-search input::placeholder { color: var(--text-3); }
.side-search input:focus-visible { outline: none; }

.side-search kbd {
  font-family: inherit;
  font-size: 9px;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
}

.side-new {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.side-new:hover { background: rgba(255,255,255,0.04); color: var(--text-2); }

.side-created { display: flex; flex-direction: column; gap: 1px; }

.is-hidden { display: none !important; }

.side-foot {
  margin-top: auto;
  padding: 9px 8px 2px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.side-foot-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 640;
  color: var(--text-2);
}

.side-foot-label svg { color: var(--accent-text); }
.side-foot-hint { font-size: 9.5px; color: var(--text-3); }

.side-row {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 4px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  color: var(--text-3);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.side-row:hover { background: rgba(255,255,255,0.04); color: var(--text-2); }
.side-row svg { flex-shrink: 0; opacity: 0.75; }
.side-row.active { background: rgba(255,255,255,0.07); color: var(--text-1); }
.side-row .side-count { margin-left: auto; font-size: 10px; color: var(--text-3); }

.side-label {
  padding: 12px 8px 4px;
  font-size: 9.5px;
  font-weight: 640;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.side-indent { padding-left: 22px; }

/* center column: app-style content header over the scrolling view */
.app-center {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.app-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
}

.app-head-title {
  flex: 1;
  font-size: 11.5px;
  font-weight: 640;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-head-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.app-head-btn:hover { background: rgba(255,255,255,0.05); color: var(--text-2); }

.app-main {
  flex: 1;
  min-height: 0;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.app-doc-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
}

.app-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}

.app-tab {
  padding: 4px 10px 7px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 520;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.app-tab:hover { color: var(--text-2); }
.app-tab.active { color: var(--text-1); border-bottom-color: var(--accent); }

/* columns share the width evenly and scroll sideways past three — the app's
   task board does the same when its status columns overflow */
.kb-cols {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}

.kb-col-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 640;
  color: var(--text-2);
  padding: 2px 2px 8px;
}

.kb-count { color: var(--text-3); font-weight: 400; }

.kb-dot { width: 7px; height: 7px; border-radius: 50%; }
.kb-dot--teal { background: var(--accent); }
.kb-dot--violet { background: var(--accent2); }
.kb-dot--bronze { background: var(--accent3); }

.kb-col { display: flex; flex-direction: column; gap: 8px; flex: 1 1 0; min-width: 140px; }

.kb-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kb-card-title { font-size: 11.5px; font-weight: 560; color: var(--text-1); }
.kb-card-meta  { font-size: 10px; color: var(--text-3); }

.kb-chip {
  align-self: flex-start;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 560;
}

.kb-chip--violet { background: color-mix(in srgb, var(--accent2) 16%, transparent); color: var(--accent2); }
.kb-chip--teal { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
.kb-chip--bronze { background: color-mix(in srgb, var(--accent3) 16%, transparent); color: var(--accent3); }

.kb-add {
  padding: 7px 11px;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  text-align: left;
  color: var(--text-3);
  font-size: 10.5px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.kb-add:hover { border-color: rgba(255,255,255,0.24); color: var(--text-2); }

/* ── Demo interactivity ─────────────────────────────────────────────────── */

.app-frame [contenteditable] { cursor: text; border-radius: 3px; }

.app-frame [contenteditable]:focus-visible {
  outline: 1.5px solid color-mix(in srgb, var(--accent-text) 60%, transparent);
  outline-offset: 2px;
}

.app-frame [contenteditable]:empty::before {
  content: attr(data-ph);
  color: var(--text-3);
}

/* document view */
.demo-doc { display: flex; flex-direction: column; gap: 10px; max-width: 470px; }

.demo-doc p {
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-2);
}

.demo-doc .demo-ref { color: var(--accent-text); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }

.demo-doc-add {
  align-self: flex-start;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
  padding: 3px 0;
  transition: color 0.15s ease;
}

.demo-doc-add:hover { color: var(--text-2); }

/* task + inbox lists */
.demo-list { display: flex; flex-direction: column; gap: 2px; max-width: 470px; }

.demo-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 12px;
  color: var(--text-2);
}

.demo-task:hover { background: rgba(255,255,255,0.03); }

.demo-task-check {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 4.5px;
  border: 1.5px solid var(--border-strong);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.demo-task-check[aria-pressed="true"] {
  border-color: var(--success);
  background: var(--success);
}

.demo-task-check[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--success-ink);
  -webkit-mask: var(--check-mask) center / contain no-repeat;
  mask: var(--check-mask) center / contain no-repeat;
}

.demo-task--done .demo-task-title { color: var(--text-3); text-decoration: line-through; }

.demo-task-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-task-due { font-size: 10px; color: var(--text-3); }

/* empty state */
.demo-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-3);
  text-align: center;
  padding-bottom: 40px;
}

.demo-empty svg { opacity: 0.5; margin-bottom: 2px; }
.demo-empty strong { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.demo-empty span { font-size: 11px; }

/* table view */
.demo-table {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.demo-table .demo-tr {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
}

.demo-table .demo-tr + .demo-tr { border-top: 1px solid var(--border); }

.demo-table .demo-tr > * {
  padding: 6px 11px;
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.demo-table .demo-tr > * + * { border-left: 1px solid var(--border); }

.demo-table .demo-tr--head > * {
  font-size: 9.5px;
  font-weight: 640;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  background: rgba(0,0,0,0.16);
}

/* gallery view */
.demo-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-content: start;
}

.demo-gcard {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.demo-gcard-cover { height: 44px; }
.demo-gcard-cover--teal { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); }
.demo-gcard-cover--violet { background: linear-gradient(135deg, color-mix(in srgb, var(--accent2) 28%, transparent), color-mix(in srgb, var(--accent2) 8%, transparent)); }
.demo-gcard-cover--bronze { background: linear-gradient(135deg, color-mix(in srgb, var(--accent3) 28%, transparent), color-mix(in srgb, var(--accent3) 8%, transparent)); }

.demo-gcard-body { padding: 8px 10px 10px; }
.demo-gcard-title { font-size: 11px; font-weight: 560; color: var(--text-1); }
.demo-gcard-meta { font-size: 9.5px; color: var(--text-3); margin-top: 3px; }

/* neutral chip — pages and plain statuses inside the demo window */
.kb-chip--plain { background: rgba(255,255,255,0.06); color: var(--text-2); }
.kb-dot--plain { background: rgba(255,255,255,0.25); }

/* ── Inbox: the app's master-detail triage view ─────────────────────────── */

/* bleeds to the .app-main edges so the list column's hairline runs full height */
.inbox-split {
  flex: 1;
  min-height: 0;
  margin: -16px -18px;
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  overflow: hidden;
}

.inbox-listcol {
  border-right: 1px solid var(--border);
  background: rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.inbox-listhead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 8px;
}

.inbox-listtitle { font-size: 12px; font-weight: 660; color: var(--text-1); }
.inbox-unproc { font-size: 9.5px; color: var(--text-3); }

.inbox-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 10px 8px;
}

.inbox-chip {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 560;
  color: var(--text-3);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.inbox-chip:hover { color: var(--text-2); }

.inbox-chip.active {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-text);
}

.inbox-search { margin: 0 10px 8px; }

.inbox-capture {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 10px 8px;
  padding: 4px 8px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--text-3);
}

.inbox-capture:focus-within { border-color: var(--border-strong); }

.inbox-capture input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  color: var(--text-1);
}

.inbox-capture input::placeholder { color: var(--text-3); }
.inbox-capture input:focus-visible { outline: none; }

.inbox-rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}

.inbox-none { padding: 10px; }

.inbox-sel {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.inbox-sel:hover { background: rgba(255,255,255,0.03); }
.inbox-sel.sel { background: color-mix(in srgb, var(--accent) 14%, transparent); }

.inbox-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 640;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.inbox-ic { display: flex; flex-shrink: 0; color: var(--text-3); }

.inbox-when {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.inbox-row-main {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 560;
  color: var(--text-1);
}

.inbox-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* detail pane: badges, title, content, action bar */
.inbox-detail {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.inbox-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.inbox-badges .inbox-when { margin-left: 2px; }

.inbox-dtitle {
  font-size: 16px;
  font-weight: 660;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin-bottom: 8px;
}

.inbox-body {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 16px;
}

.inbox-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.inbox-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 560;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.inbox-act:hover { border-color: var(--border-strong); color: var(--text-1); }

.inbox-act-caret { display: flex; transform: rotate(90deg); }

.inbox-act--go {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
  font-weight: 640;
}

.inbox-act--go:hover { color: var(--accent-ink); filter: brightness(1.06); }

.inbox-act--danger {
  background: transparent;
  border-color: transparent;
  color: var(--danger);
}

.inbox-act--danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

.inbox-convert { position: relative; display: inline-flex; }

.inbox-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 96px;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-2);
}

.inbox-menu button {
  padding: 5px 9px;
  border: none;
  border-radius: 5px;
  background: transparent;
  font-family: inherit;
  font-size: 10.5px;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
}

.inbox-menu button:hover { background: rgba(255,255,255,0.05); color: var(--text-1); }

.inbox-zero { margin: auto 0; }

/* ── Tasks view: board/list toggle + status kanban ──────────────────────── */

.demo-viewbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.demo-viewbar-note { font-size: 10px; color: var(--text-3); }

.demo-vt {
  margin-left: auto;
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
}

.vt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 20px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.vt-btn:hover { color: var(--text-2); }
.vt-btn.active { background: rgba(255,255,255,0.08); color: var(--text-1); }

/* task cards on the status board */
.tcard-top {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.tcard .demo-task-check { flex-shrink: 0; margin-top: 1px; }

.tcard-title {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  font-weight: 560;
  color: var(--text-1);
}

.tcard--done .tcard-title { color: var(--text-3); text-decoration: line-through; }
.tcard .kb-card-meta { padding-left: 21px; }

/* ── Home view (mirrors the app's Home screen) ──────────────────────────── */

.home { display: flex; flex-direction: column; gap: 12px; }

.home-hello { text-align: center; padding-top: 4px; }

.home-greet {
  font-size: 16px;
  font-weight: 660;
  letter-spacing: -0.01em;
  color: var(--text-1);
}

.home-meta {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* quick-create pills, like the app's row of new-object buttons */
.qc-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.qc {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
  font-family: inherit;
  font-size: 11px;
  font-weight: 560;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.qc:hover { border-color: var(--border-strong); color: var(--text-1); }

/* the product's own object-type colours, kept as tokens */
.qc--page svg { color: var(--type-page); }
.qc--note svg { color: var(--accent3); }
.qc--task svg { color: var(--accent); }
.qc--db svg { color: var(--accent2); }
.qc--bookmark svg { color: var(--type-bookmark); }

/* AI daily brief card */
.home-brief {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 10px 12px;
}

.home-brief-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 640;
  color: var(--text-1);
  margin-bottom: 5px;
}

.home-brief-head svg { color: var(--accent-text); }

.home-brief p {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-2);
}

.home-brief-link {
  margin-top: 6px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 560;
  color: var(--accent-text);
  cursor: pointer;
  transition: color 0.15s ease;
}

.home-brief-link:hover { color: var(--text-1); }

/* Today / Recent changes columns */
.home-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.home-widget {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  overflow: hidden;
}

.hw-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 10.5px;
  font-weight: 640;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
}

.hw-head svg { color: var(--text-3); }
.hw-count { margin-left: auto; font-weight: 400; font-size: 9.5px; color: var(--text-3); }

.hw-progress {
  height: 3px;
  background: rgba(255,255,255,0.06);
}

.hw-progress span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.hw-list { display: flex; flex-direction: column; }

.hw-list .demo-task { padding: 5px 9px; gap: 8px; border-radius: 0; }
.hw-list .demo-task + .demo-task { border-top: 1px solid var(--border); }
.hw-list .demo-task:hover { background: rgba(255,255,255,0.03); }

/* recent-changes / object-list rows */
.list-rows { display: flex; flex-direction: column; gap: 2px; }

.recent-row {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 9px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.hw-list .recent-row { border-radius: 0; }
.hw-list .recent-row + .recent-row { border-top: 1px solid var(--border); }
.recent-row:hover { background: rgba(255,255,255,0.03); color: var(--text-1); }

.r-icon { display: flex; flex-shrink: 0; color: var(--text-3); }

.r-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.r-when { font-size: 9.5px; color: var(--text-3); flex-shrink: 0; }

/* What's new card */
.home-news-body { padding: 10px 12px; }

.home-news-ver {
  font-size: 11.5px;
  font-weight: 640;
  color: var(--text-1);
  margin-bottom: 6px;
}

.home-news-body p {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-2);
}

.home-news-body p + p { margin-top: 6px; }

.news-tag {
  display: inline-block;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 5px;
  vertical-align: 1px;
}

.news-tag--new { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
.news-tag--imp { background: color-mix(in srgb, var(--accent3) 16%, transparent); color: var(--accent3); }

/* ── Right panel (mirrors the app's Panel) ──────────────────────────────── */

.app-panel {
  border-left: 1px solid var(--border);
  background: rgba(0,0,0,0.14);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.panel-head {
  padding: 8px 12px 7px;
  font-size: 9.5px;
  font-weight: 640;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
}

.panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0 10px;
}

.panel-note { padding: 8px 12px; font-size: 10.5px; color: var(--text-3); }

.w + .w { border-top: 1px solid var(--border); }

.w-head {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 640;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: left;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.w-head:hover { background: rgba(255,255,255,0.03); color: var(--text-2); }

.w-caret {
  display: flex;
  color: var(--text-3);
  transition: transform 0.15s ease;
}

.w.open .w-caret { transform: rotate(90deg); }

.w-body { padding: 2px 10px 9px; }

.w-note { font-size: 10.5px; line-height: 1.5; color: var(--text-3); }

.w-body .demo-task { padding: 4px 6px; gap: 7px; }
.w-body .demo-task .kb-chip { display: none; }
.w-body .recent-row { padding: 5px 6px; }

/* mini calendar widget */
.w-cal-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 0 6px;
}

.w-cal-title {
  flex: 1;
  text-align: center;
  font-size: 10.5px;
  font-weight: 640;
  color: var(--text-2);
  text-transform: none;
  letter-spacing: 0;
}

.w-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.w-cal-nav:hover { background: rgba(255,255,255,0.05); color: var(--text-2); }

.w-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.w-dow {
  text-align: center;
  font-size: 8.5px;
  font-weight: 640;
  color: var(--text-3);
  padding: 2px 0;
}

.w-day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 19px;
  border-radius: 4px;
  font-size: 9.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.w-day.is-out { color: color-mix(in srgb, var(--text-3) 55%, transparent); }

.w-day.is-today {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

/* ── Tier strip (fold bottom) ───────────────────────────────────────────── */

.tier-strip {
  position: relative;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tier-strip-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.tier-seg {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 26px;
  min-width: 0;
}

.tier-seg + .tier-seg { border-left: 1px solid var(--border); }

.tier-seg svg { flex-shrink: 0; color: var(--text-3); }

.tier-seg-text { font-size: 14px; color: var(--text-2); }
.tier-seg-text strong { display: block; font-size: 14px; font-weight: 620; color: var(--text-1); }
.tier-seg-text span { font-size: 13px; color: var(--text-3); }

/* ── Sections ───────────────────────────────────────────────────────────── */

section { position: relative; }

.section-pad { padding: 108px 0; }

.section-title {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 720;
  color: var(--text-1);
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin-bottom: 14px;
  text-wrap: balance;
}

.section-sub {
  font-size: 17px;
  color: var(--text-2);
  max-width: 56ch;
  line-height: 1.6;
  margin-bottom: 56px;
}

.section-sub--tight { margin-bottom: 32px; }

/* ── Feature pillars (index) ────────────────────────────────────────────── */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.pillar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pillar-visual {
  height: 190px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.16);
  padding: 20px 20px 0;
  overflow: hidden;
  position: relative;
}

.pillar-body { padding: 22px 24px 26px; }

.pillar h3 {
  font-size: 17px;
  font-weight: 660;
  color: var(--text-1);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.pillar p { font-size: 14px; color: var(--text-2); line-height: 1.6; }

/* pillar vignettes — small truthful UI sketches */

.vig { font-size: 11px; line-height: 1.5; }

.vig-doc {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  padding: 16px 18px;
  height: 100%;
}

.vig-doc-title { font-size: 14px; font-weight: 700; color: var(--text-1); margin-bottom: 8px; }

.vig-text {
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-2);
  margin-bottom: 8px;
}

.vig-text--dim { color: var(--text-3); }

.vig-ref {
  color: var(--accent-text);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

.vig-slash {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 4px 9px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-text);
  font-weight: 600;
  font-size: 10.5px;
}

.vig-table {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  overflow: hidden;
  height: 100%;
}

.vig-tr {
  display: grid;
  grid-template-columns: 1.6fr 1fr 0.9fr;
  border-bottom: 1px solid var(--border);
}

.vig-tr > span {
  padding: 7px 11px;
  color: var(--text-2);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vig-tr--head > span {
  font-size: 9.5px;
  font-weight: 640;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.vig-tr > span + span { border-left: 1px solid var(--border); }

.vig-status {
  display: inline-block;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 560;
}

.vig-status--violet { background: color-mix(in srgb, var(--accent2) 16%, transparent); color: var(--accent2); }
.vig-status--bronze { background: color-mix(in srgb, var(--accent3) 16%, transparent); color: var(--accent3); }
.vig-status--teal { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }

.vig-tasks {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  padding: 14px 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.vig-task { display: flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 11px; }

.vig-check {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  flex-shrink: 0;
}

.vig-check--done {
  border-color: var(--success);
  background: var(--success);
  position: relative;
}

.vig-check--done::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--success-ink);
  -webkit-mask: var(--check-mask) center / contain no-repeat;
  mask: var(--check-mask) center / contain no-repeat;
}

.vig-task--done { color: var(--text-3); text-decoration: line-through; }

.vig-date { margin-left: auto; font-size: 9.5px; color: var(--text-3); }

/* ── Dense capability grid (index) ──────────────────────────────────────── */

.mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.mini {
  background: var(--bg);
  padding: 22px 22px 24px;
}

.mini svg { color: var(--text-3); margin-bottom: 12px; }

.mini h4 { font-size: 14px; font-weight: 620; color: var(--text-1); margin-bottom: 4px; }
.mini p  { font-size: 13px; color: var(--text-3); line-height: 1.55; }

/* ── Sync tiers (index detail) ──────────────────────────────────────────── */

.sync-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.tier-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.tier-card--featured { border-color: color-mix(in srgb, var(--accent) 38%, transparent); }

.tier-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-text);
  font-size: 11.5px;
  font-weight: 600;
  margin-bottom: 14px;
}

.tier-kind {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}

.tier-card h3 {
  font-size: 19px;
  font-weight: 680;
  color: var(--text-1);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.tier-card > p { font-size: 14px; color: var(--text-2); line-height: 1.6; margin-bottom: 20px; }

.tier-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: auto;
}

.tier-card ul li {
  font-size: 13.5px;
  color: var(--text-2);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}

.tier-card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 12px;
  height: 12px;
  background: var(--success);
  -webkit-mask: var(--check-mask) center / contain no-repeat;
  mask: var(--check-mask) center / contain no-repeat;
}

/* legacy tier icon (features/download pages may reference) */
.tier-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.tier-icon svg { width: 19px; height: 19px; }
.tier-icon--teal { background: color-mix(in srgb, var(--accent) 12%, transparent);  color: var(--accent-text); }
.tier-icon--violet { background: color-mix(in srgb, var(--accent2) 12%, transparent);  color: var(--accent2); }
.tier-icon--bronze { background: color-mix(in srgb, var(--accent3) 12%, transparent); color: var(--accent3); }

/* ── How it works ───────────────────────────────────────────────────────── */

.how { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg2); }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.step h3 {
  font-size: 16px;
  font-weight: 640;
  color: var(--text-1);
  margin-bottom: 8px;
}

.step p { font-size: 14px; color: var(--text-2); line-height: 1.6; }

.step-num {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 680;
  color: var(--accent-text);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  margin-bottom: 16px;
}

/* ── Platforms ──────────────────────────────────────────────────────────── */

.platform-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
}

.pill-dot { width: 7px; height: 7px; border-radius: 50%; }
.pill-dot--teal { background: var(--accent); }
.pill-dot--violet { background: var(--accent2); }
.pill-dot--bronze { background: var(--accent3); }

.platforms-cta { margin-top: 32px; }

/* ── CTA strip / waitlist ───────────────────────────────────────────────── */

.cta-strip {
  padding: 116px 0;
  text-align: center;
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 62% 74% at 50% 108%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.cta-strip h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 720;
  color: var(--text-1);
  letter-spacing: -0.024em;
  margin-bottom: 14px;
  text-wrap: balance;
}

.cta-strip > .container > p {
  font-size: 16px;
  color: var(--text-2);
  max-width: 54ch;
  margin: 0 auto 36px;
}

.cta-note { margin-top: 22px; font-size: 14px; color: var(--text-3); }
.cta-note a { color: var(--accent-text); }
.cta-note a:hover { text-decoration: underline; text-underline-offset: 3px; }






/* ── Footer ─────────────────────────────────────────────────────────────── */

footer { border-top: 1px solid var(--border); padding: 44px 0; }

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}

.footer-logo .site-beta-badge {
  font-size: 10px;
  padding: 1px 7px;
}

.footer-logo svg { border-radius: 6px; }

.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }

.footer-links a {
  font-size: 13px;
  color: var(--text-3);
  transition: color 0.15s ease;
}

.footer-links a:hover { color: var(--text-1); }

.footer-copy { font-size: 13px; color: var(--text-3); }

/* ── Legacy shared classes (subpages) ───────────────────────────────────── */

.accent { color: var(--accent-text); }

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px;
  transition: border-color 0.2s ease;
}

.feature-card:hover { border-color: var(--border-strong); }

.feature-card h3 { font-size: 16px; font-weight: 640; color: var(--text-1); margin-bottom: 8px; }
.feature-card p  { font-size: 14px; color: var(--text-2); line-height: 1.6; }

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.feature-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.feature-icon svg { width: 19px; height: 19px; }
.feature-icon--teal { background: color-mix(in srgb, var(--accent) 12%, transparent);  color: var(--accent-text); }
.feature-icon--violet { background: color-mix(in srgb, var(--accent2) 12%, transparent);  color: var(--accent2); }
.feature-icon--bronze { background: color-mix(in srgb, var(--accent3) 12%, transparent); color: var(--accent3); }

/* ── Subpage hero ───────────────────────────────────────────────────────── */

/* Lived inside features.html, so it was the features page's hero rather than
   the site's. Every subpage below the index opens this way — a centred title
   over the same faint accent bloom — and the legal pages opened instead with
   80px of empty ground and a 13px back-link, which is most of why they read as
   a different website. One definition, four pages. */
.page-hero {
  padding: 80px 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: -40px;
  background:
    radial-gradient(ellipse 55% 42% at 50% -6%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero h1 {
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 20px;
  text-wrap: balance;
}
.page-hero p {
  font-size: 18px;
  color: var(--text-2);
  max-width: 560px;
  margin-inline: auto;
  line-height: 1.65;
  text-wrap: pretty;
}
/* The revision date is metadata, not a subtitle — it sits under the sentence
   at label size rather than competing with it at 18px. */
.page-hero .hero-meta {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-3);
}

/* ── Legal pages ────────────────────────────────────────────────────────── */

/* Privacy and Terms used to be a bordered card floating on the ground: a
   pattern used nowhere else on the site, wrapping 14px body copy under a 28px
   h1 while the page around it had no footer at all. They are ordinary page
   content now — hero above, site footer below, one reading column between. */
.legal-page { padding: 8px 0 96px; }

.legal-prose {
  max-width: 760px;
  margin: 0 auto;
}

.legal-prose h2 {
  font-size: 20px;
  font-weight: 650;
  color: var(--text-1);
  letter-spacing: -0.01em;
  /* A hairline per section, which is the site's own device for separating
     bands of content, and the thing that turns a wall of clauses into a
     document you can scan by number. */
  border-top: 1px solid var(--border);
  margin: 44px 0 14px;
  padding-top: 30px;
}
.legal-prose h2:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }

.legal-prose p,
.legal-prose li {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.75;
}
.legal-prose p { margin-bottom: 14px; }
.legal-prose p:last-child { margin-bottom: 0; }

.legal-prose strong { color: var(--text-1); font-weight: 620; }

.legal-prose ul {
  padding-left: 22px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-prose a { color: var(--accent-text); }
.legal-prose a:hover { text-decoration: underline; }

.legal-prose code {
  font-size: 13px;
  padding: 1px 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-text);
}

.legal-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 4px 0 18px;
}
.legal-prose th,
.legal-prose td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.legal-prose thead th {
  color: var(--text-1);
  font-weight: 620;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom-color: var(--border-strong);
}
.legal-prose td { color: var(--text-2); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .pillars { grid-template-columns: 1fr; }
  .mini-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  /* the demo's right panel is the first thing to go as the window narrows */
  .app-panel { display: none; }
  .app-body { grid-template-columns: 168px minmax(0, 1fr); }
  .f-noside .app-body { grid-template-columns: minmax(0, 1fr); }
  .f-noside .app-panel { display: none; }
}

@media (max-width: 768px) {
  .container { padding-inline: 20px; }

  .nav-inner { gap: 6px; }
  .nav-logo { font-size: 15px; gap: 8px; }
  .nav-logo img { width: 32px; height: 32px; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 6px 8px; font-size: 13px; min-height: 40px; }
  .nav-links li:nth-child(n+3) { display: none; }
  .btn-nav { height: 34px; padding: 0 13px; font-size: 13px; }

  .hero-bg { background-position: 30% 30%; }

  .hero-center { padding-top: 56px; }
  .hero h1 { font-size: clamp(36px, 10vw, 46px); }
  .hero-sub { font-size: 16px; }

  .hero-app { margin-top: 40px; }
  .app-frame { font-size: 11px; }

  /* demo sidebar becomes a horizontal page switcher; the right panel hides */
  .app-body { height: 420px; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .f-noside .app-body, .f-nopanel .app-body { grid-template-columns: 1fr; }
  .app-side {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .app-ws, .side-tools, .side-label, .side-foot { display: none; }
  .side-row { width: auto; flex-shrink: 0; padding: 5px 10px; }
  .side-row .side-count { margin-left: 4px; }
  .app-head-btn { display: none; }
  .home-cols { grid-template-columns: 1fr; }

  /* the inbox master-detail stacks: list on top, detail below */
  .inbox-split { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .inbox-listcol { border-right: none; border-bottom: 1px solid var(--border); max-height: 46%; }
  .inbox-rows { flex: none; max-height: 100%; }

  /* board columns scroll sideways inside the window */
  .kb-cols { display: flex; overflow-x: auto; padding-bottom: 6px; }
  .kb-col { flex: 0 0 150px; }

  .demo-gallery { grid-template-columns: repeat(2, 1fr); }

  .tier-strip-inner { grid-template-columns: 1fr; }
  .tier-seg + .tier-seg { border-left: none; border-top: 1px solid var(--border); }
  .tier-seg { padding: 16px 4px; }

  .section-pad { padding: 72px 0; }

  .features-grid { grid-template-columns: 1fr; }
  .mini-grid { grid-template-columns: 1fr; }
  .sync-tiers { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 28px; }

  .cta-strip { padding: 80px 0; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
  .container { padding-inline: 16px; }
  .nav-links li:nth-child(n+2) { display: none; }
  .btn-nav { padding: 0 11px; font-size: 12px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }

  html { scroll-behavior: auto; }
}