/* Flurfunk home page: hero, sections and the small live mocks.
   The mocks are drawn with the app's own look in the warm brand palette:
   espresso sidebar, brown accent, yellow highlights. Everything inside a
   mock is sized in em. */

/* ---------- App tokens ----------
   Section mocks follow the page theme. The hero window always uses the
   light app look (see .ua). */
:root {
  --app-side: #231b12;
  --app-side-text: #eadfce;
  --app-side-muted: #ab9b85;
  --app-side-active: #3d2f1f;
  --app-main: #201a14;
  --app-pane: #1a1510;
  --app-text: #f1e9dc;
  --app-muted: #b0a28d;
  --app-line: #3a3026;
  --app-select: #33281b;
  --app-chrome: #0d0b08;
  --app-accent: #8b5a1b;          /* fills with white text */
  --app-accent-text: #f2c46d;     /* accent as text */
  --app-accent-soft: rgb(242 196 109 / 16%);
  --app-done: #8b5a1b;
  --shadow-app: 0 2px 6px rgb(0 0 0 / 30%), 0 40px 80px -30px rgb(0 0 0 / 80%);
  --hero-glow: rgb(255 201 60 / 9%);
}

:root:not([data-theme="dark"]) {
  --app-main: #ffffff;
  --app-pane: #faf6ef;
  --app-text: #231b12;
  --app-muted: #6b5d4c;
  --app-line: #e8dece;
  --app-select: #f6eedf;
  --app-chrome: #2b241c;
  --app-accent-text: #8b5a1b;
  --app-accent-soft: rgb(139 90 27 / 12%);
  --shadow-app: 0 2px 6px rgb(35 27 18 / 10%), 0 40px 80px -30px rgb(35 27 18 / 45%);
  --hero-glow: rgb(255 201 60 / 26%);
}


/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60rem 34rem at 50% 78%, var(--hero-glow), transparent 70%),
    var(--bg);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.hero-text { padding-top: clamp(3.5rem, 8vw, 6rem); }

.hero h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(3.2rem, 9vw, 6rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.pitch {
  max-width: 34ch;
  margin: 1.1rem auto 2rem;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.35;
}

.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0; }
.hero-meta { margin: 1.25rem auto 0; color: var(--muted); font-size: 0.9rem; }

@media (max-width: 30rem) {
  .hero-actions .button { flex: 1 1 auto; }
}

/* ---------- Hero demo: the app window ----------
   A drawn copy of the real Flurfunk UI (full screen, light appearance).
   All sizes are in em; the font size scales the window to the page width.
   The window is cut by the bottom edge of the hero. */
.hero-demo {
  --crop: 5em;
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.ua {
  /* The window is the product: always the light app look. */
  --ua-side: #231b12;
  --ua-side-text: #eadfce;
  --ua-side-muted: #ab9b85;
  --ua-side-active: #3d2f1f;
  --ua-paper: #ffffff;
  --ua-soft: #f8f3ea;
  --ua-soft2: #efe6d7;
  --ua-ink: #231b12;
  --ua-muted: #6b5d4c;
  --ua-line: #e8dece;
  --ua-accent: #8b5a1b;
  --ua-accent-soft: rgb(139 90 27 / 12%);
  --ua-yellow: #ffc93c;
  --ua-red: #c4372c;

  font-size: min(14px, calc((100vw - 4rem) / 86));
  position: relative;
  width: 86em;
  height: 52em;
  margin-bottom: calc(-1 * var(--crop));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.9em 0.9em 0 0;
  background: var(--ua-paper);
  color: var(--ua-ink);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 12%), var(--shadow-app);
  font-family: var(--font-sans);
  line-height: 1.4;
  text-align: left;
  user-select: none;
  /* Flat at rest; with a mouse over it, it leans very slightly towards the pointer (site.js). */
  transform: perspective(2400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-origin: 50% 40%;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ua.is-tilting { transition-duration: 0.18s; }
@media (prefers-reduced-motion: reduce) { .ua { transform: none; transition: none; } }
.ua p { margin: 0; }
.ua ul { margin: 0; padding: 0; list-style: none; }
.ua img { display: block; max-width: none; object-fit: cover; }
.ua u { color: var(--ua-accent); text-decoration: none; font-weight: 600; }

.ua-bar {
  display: flex;
  align-items: center;
  gap: 1.2em;
  height: 2.6em;
  padding: 0 1em;
  background: #2b241c;
  flex: none;
}
.ua-dots { display: flex; gap: 0.45em; }
.ua-dots i { width: 0.8em; height: 0.8em; border-radius: 50%; background: rgb(255 255 255 / 25%); }
.ua-url {
  width: 26em;
  margin-inline: auto;
  padding: 0.2em 0.8em;
  border-radius: 0.5em;
  background: rgb(255 255 255 / 9%);
  color: rgb(255 255 255 / 65%);
  font-size: 0.85em;
  text-align: center;
}

.ua-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 17em minmax(0, 1fr) minmax(0, 1fr);
}

/* Sidebar */
.ua-side {
  display: flex;
  flex-direction: column;
  padding: 1.1em 0.6em var(--crop);
  background: var(--ua-side);
  color: var(--ua-side-text);
}
.ua-ws { display: flex; align-items: center; justify-content: space-between; padding: 0.2em 0.6em 1em; }
.ua-ws b { color: #fff; font-size: 1.15em; }
.ua-bell { position: relative; color: var(--ua-side-text); }
.ua-bell svg { width: 1.3em; height: 1.3em; fill: currentColor; }
.ua-bell-n {
  position: absolute;
  top: -0.6em;
  right: -0.7em;
  min-width: 1.45em;
  padding: 0.05em 0.3em;
  border-radius: 999px;
  background: var(--ua-yellow);
  color: var(--ua-ink);
  font-size: 0.75em;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}
.ua-nav li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.42em 0.6em;
  border-radius: 0.45em;
  color: var(--ua-side-text);
  white-space: nowrap;
  overflow: hidden;
}
.ua-nav li.is-bold { color: #fff; font-weight: 700; }
.ua-nav li.is-active { background: var(--ua-side-active); color: #fff; font-weight: 700; }
.ua-ico { width: 1em; flex: none; color: var(--ua-side-muted); text-align: center; font-weight: 700; }
.ua-n {
  margin-left: auto;
  min-width: 1.5em;
  padding: 0 0.4em;
  border-radius: 999px;
  background: var(--ua-yellow);
  color: var(--ua-ink);
  font-size: 0.8em;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}
.ua-n.is-red { background: var(--ua-red); color: #fff; }
.ua-label {
  margin: 0.9em 0.6em 0.35em !important;
  padding-top: 0.9em;
  border-top: 1px solid rgb(255 255 255 / 10%);
  color: var(--ua-side-muted);
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ua-me {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-top: auto;
  padding: 0.8em 0.6em 0;
  border-top: 1px solid rgb(255 255 255 / 10%);
}
.ua-me img { width: 2.6em; height: 2.6em; border-radius: 0.55em; }
.ua-me span { display: flex; flex-direction: column; line-height: 1.25; }
.ua-me b { color: #fff; }
.ua-me small { color: var(--ua-side-muted); font-size: 0.85em; }
.ua-me .ua-sun { margin-left: auto; color: var(--ua-side-muted); font-size: 1.2em; }

/* Thread list */
.ua-list { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--ua-line); background: var(--ua-paper); }
.ua-head { display: flex; flex-direction: column; gap: 0.15em; padding: 1.1em 1.3em 1em; border-bottom: 1px solid var(--ua-line); }
.ua-title { font-size: 1.35em; }
.ua-topic { color: var(--ua-muted); }
.ua-tools { display: flex; gap: 0.8em; margin-top: 0.6em; }
.ua-select, .ua-search, .ua-date {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.7em;
  border: 1px solid var(--ua-line);
  border-radius: 0.4em;
  background: var(--ua-paper);
  color: var(--ua-ink);
  white-space: nowrap;
}
.ua-select { padding-right: 1.6em; background: linear-gradient(45deg, transparent 50%, var(--ua-muted) 50%) right 0.8em center / 0.35em 0.35em no-repeat, linear-gradient(-45deg, transparent 50%, var(--ua-muted) 50%) right 0.45em center / 0.35em 0.35em no-repeat, var(--ua-paper); }
.ua-search { flex: 1; max-width: 16em; color: var(--ua-muted); }

.ua-card { display: flex; gap: 0.8em; padding: 1em 1.3em; border-bottom: 1px solid var(--ua-line); }
.ua-card.is-sel { background: var(--ua-soft); }
.ua-av { flex: none; width: 2.5em; height: 2.5em; border-radius: 50%; }
.ua-av-s { width: 1.5em; height: 1.5em; border-radius: 50%; }
.ua-card-body { display: flex; flex-direction: column; gap: 0.3em; min-width: 0; flex: 1; }
.ua-who { color: var(--ua-muted); }
.ua-who b { color: var(--ua-ink); }
.ua-card-title { font-weight: 700; }
.ua-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ua-at { color: var(--ua-accent); font-weight: 600; }
.ua-chips { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.ua-chip { padding: 0.25em 0.75em; border: 1px solid var(--ua-line); border-radius: 999px; font-weight: 600; font-size: 0.92em; }
.ua-due { padding: 0.15em 0.6em; border-radius: 999px; background: var(--ua-soft2); color: var(--ua-ink); font-size: 0.85em; font-weight: 600; }
.ua-pill { margin-left: 0.3em; vertical-align: 0.05em; }
.ua-pill i { padding: 0.05em 0.5em; border-radius: 999px; background: var(--ua-accent-soft); color: var(--ua-accent); font-style: normal; font-size: 0.85em; font-weight: 700; }
.ua-pill i.is-done { background: var(--ua-accent); color: #fff; }
.ua-replies { display: flex; align-items: center; gap: 0.6em; margin-top: 0.2em; color: var(--ua-muted); white-space: nowrap; }
.ua-replies b { color: var(--ua-accent); }
.ua-chev { font-size: 1.2em; line-height: 1; }
.ua-stack { display: flex; }
.ua-stack img { width: 1.7em; height: 1.7em; border-radius: 50%; box-shadow: 0 0 0 0.14em var(--ua-paper); }
.ua-stack img + img { margin-left: -0.45em; }
.ua-card.is-sel .ua-stack img { box-shadow: 0 0 0 0.14em var(--ua-soft); }
.ua-last { overflow: hidden; text-overflow: ellipsis; }
.ua-last i { font-style: normal; }

.ua-post { padding: 0.7em 0.8em; border: 1px solid var(--ua-line); border-radius: 0.6em; background: var(--ua-soft); }
.ua-post-kind { color: var(--ua-muted); font-size: 0.85em; }
.ua-post-kind b { color: var(--ua-ink); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 0.3em; }
.ua-post-kind u { margin-left: 0.4em; text-decoration: underline; }
.ua-post-row { display: flex; gap: 0.9em; align-items: center; margin-top: 0.5em; }
.ua-post-row img { width: 4.6em; height: 4.2em; border-radius: 0.3em; }
.ua-post-row span { display: flex; flex-direction: column; }
.ua-post-row small { color: var(--ua-muted); font-size: 0.95em; }
.ua-post-row u { text-decoration: underline; }

.ua-compose {
  margin: auto 1.3em var(--crop);
  padding: 0.8em 0.9em;
  border: 1px solid var(--ua-line);
  border-radius: 0.5em;
  color: var(--ua-muted);
  background: var(--ua-paper);
}

/* Thread pane */
.ua-pane { display: flex; flex-direction: column; gap: 0.9em; min-width: 0; padding: 1.1em 1.3em 0; background: var(--ua-paper); }
.ua-pane-head { padding-bottom: 0.2em; }
.ua-pane-head p:first-child { display: flex; align-items: baseline; gap: 0.4em; color: var(--ua-muted); }
.ua-pane-head b { color: var(--ua-ink); font-size: 1.15em; }
.ua-x { margin-left: auto; font-size: 1.3em; line-height: 1; }
.ua-follow { display: flex; gap: 1em; margin-top: 0.3em !important; color: var(--ua-muted); }
.ua-msg { display: flex; gap: 0.8em; }
.ua-msg > div { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.ua-root { padding-bottom: 0.2em; }
.ua-task { display: flex; flex-direction: column; gap: 0.6em; padding: 0.8em 0.9em; border: 1px solid var(--ua-line); border-radius: 0.6em; background: var(--ua-soft); }
.ua-task-row { display: flex; align-items: center; gap: 0.55em; flex-wrap: wrap; }
.ua-k { color: var(--ua-muted); font-size: 0.92em; }
.ua-k + .ua-av-s { margin-left: 0.2em; }
.ua-task-row .ua-k:not(:first-child) { margin-left: 0.4em; }
.ua-task-state .ua-select { min-width: 8em; }
.ua-check { display: inline-flex; align-items: center; gap: 0.45em; margin-left: 0.4em; }
.ua-check i {
  position: relative;
  width: 1.15em;
  height: 1.15em;
  border: 1.5px solid var(--ua-muted);
  border-radius: 0.25em;
  background: var(--ua-paper);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.ua-check i::after {
  content: "";
  position: absolute;
  left: 0.32em;
  top: 0.1em;
  width: 0.3em;
  height: 0.6em;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
/* End state: ticked. */
.ua-check i { background: var(--ua-accent); border-color: var(--ua-accent); }
.ua-sys { color: var(--ua-muted); font-size: 0.9em; }
.ua-gallery { display: flex; gap: 0.45em; margin-top: 0.4em !important; }
.ua-gallery img {
  width: 6.8em;
  height: 6.8em;
  border-radius: 0.4em;
  outline: 0.2em solid transparent;
  outline-offset: 0.12em;
  transition: outline-color 0.3s ease;
}
.ua-online { display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.3em; border-radius: 50%; background: #3f9b4f; }
.ua-slot { display: grid; }
.ua-slot > * { grid-area: 1 / 1; }
.ua-typing { display: flex; align-items: center; gap: 0.8em; align-self: start; color: var(--ua-muted); opacity: 0; transition: opacity 0.3s ease; }
.ua-dots3 { display: inline-flex; gap: 0.3em; padding: 0.6em 0.8em; border-radius: 1em; background: var(--ua-soft2); }
.ua-dots3 i { width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--ua-muted); }
.ua-new, .ua-sys-done { transition: opacity 0.45s ease, transform 0.45s ease; }
.ua-pane .ua-compose { margin: auto 0 var(--crop); }

/* Lightbox moment over the whole window */
.ua-lightbox {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding-bottom: var(--crop);
  background: rgb(20 15 10 / 88%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.ua-lightbox figure { margin: 0; transform: scale(0.95); transition: transform 0.4s ease; }
.ua-lightbox img { width: 42em; height: 28em; border-radius: 0.4em; box-shadow: 0 1em 3em rgb(0 0 0 / 50%); }
.ua-lightbox figcaption { display: flex; justify-content: space-between; margin-top: 0.6em; color: rgb(255 255 255 / 80%); }

/* Values that change in place share one grid cell, so nothing jumps.
   Without .is-playing the last value (.v2) shows. */
.swap { display: inline-grid; }
.swap > * { grid-area: 1 / 1; justify-self: start; transition: opacity 0.35s ease; }
.swap > :not(.v2) { opacity: 0; }

/* Medium screens: drop the thread pane, keep sidebar and list. */
@media (max-width: 62rem) {
  .ua { width: 58em; font-size: min(14px, calc((100vw - 3rem) / 58)); }
  .ua-body { grid-template-columns: 17em minmax(0, 1fr); }
  .ua-pane { display: none; }
  .ua-list { border-right: 0; }
}

/* Phones: only the open thread, like the app on a phone. */
@media (max-width: 40rem) {
  .hero-demo { --crop: 3.5em; padding-inline: 1rem; }
  .ua { width: 100%; height: 50em; font-size: clamp(10px, 3vw, 13px); transform: none; }
  .ua-url { width: auto; }
  .ua-body { grid-template-columns: minmax(0, 1fr); }
  .ua-side, .ua-list { display: none; }
  .ua-pane { display: flex; }
  .ua-root { display: none; }
  .ua-gallery img { width: 6.4em; height: 6.4em; }
  .ua-lightbox img { width: 92%; height: auto; margin-inline: auto; }
  .ua-lightbox figure { width: 100%; }
  .ua-lightbox figcaption { width: 92%; margin-inline: auto; }
}

/* ---------- Hero demo: animation ----------
   The script adds .is-playing and then step classes once the window is in
   view. Without JS or with reduced motion the end state shows. */
.ua.is-playing:not(.s-msg) .swap > .v0,
.ua.is-playing.s-msg .ua-replies .swap > .v2 { opacity: 1; }
.ua.is-playing:not(.s-msg) .ua-replies .swap > .v2 { opacity: 0; }
.ua.is-playing:not(.s-msg) .ua-stack-new { display: none; }

.ua.is-playing:not(.s-mention) .ua-bell-n > .v0,
.ua.is-playing:not(.s-mention) .ua-nav .swap > .v0 { opacity: 1; }
.ua.is-playing:not(.s-mention) .ua-bell-n > .v2,
.ua.is-playing:not(.s-mention) .ua-nav li:nth-child(2) .swap > .v2 { opacity: 0; }
.ua.is-playing.s-mention .ua-nav li:nth-child(2) .swap > .v2 { opacity: 1; }
.ua.is-playing.s-mention .ua-nav li:nth-child(2) .swap > .v0,
.ua.is-playing.s-mention .ua-bell-n > .v0 { opacity: 0; }
.ua.is-playing.s-mention .ua-bell-n > .v2 { opacity: 1; }
.ua-bell-n { transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.6, 1); }
.ua.is-playing.s-mention:not(.s-done) .ua-bell-n { transform: scale(1.18); }

.ua.is-playing.s-typing:not(.s-msg) .ua-typing { opacity: 1; }
.ua.is-playing:not(.s-msg) .ua-new { opacity: 0; transform: translateY(0.6em); }

.ua.is-playing.s-pick:not(.s-lbclose) .ua-pick { outline-color: var(--ua-yellow); }
.ua.is-playing.s-lightbox:not(.s-lbclose) .ua-lightbox { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
.ua.is-playing.s-lightbox:not(.s-lbclose) .ua-lightbox figure { transform: none; }

/* Ticking the task off: checkbox, state select, list pill, My tasks badge. */
.ua.is-playing:not(.s-done) .ua-check i { background: var(--ua-paper); border-color: var(--ua-muted); }
.ua.is-playing:not(.s-done) .ua-check i::after { display: none; }
.ua.is-playing:not(.s-done) .ua-pill > .v2,
.ua.is-playing:not(.s-done) .ua-task-state .swap > .v2,
.ua.is-playing:not(.s-done) .ua-nav li:nth-child(3) .swap > .v2 { opacity: 0; }
.ua.is-playing:not(.s-done) .ua-pill > .v0,
.ua.is-playing:not(.s-done) .ua-task-state .swap > .v0,
.ua.is-playing:not(.s-done) .ua-nav li:nth-child(3) .swap > .v0 { opacity: 1; }
.ua.is-playing.s-done .ua-pill > .v0,
.ua.is-playing.s-done .ua-task-state .swap > .v0,
.ua.is-playing.s-done .ua-nav li:nth-child(3) .swap > .v0 { opacity: 0; }
.ua.is-playing.s-done .ua-pill > .v2,
.ua.is-playing.s-done .ua-task-state .swap > .v2,
.ua.is-playing.s-done .ua-nav li:nth-child(3) .swap > .v2 { opacity: 1; }
.ua.is-playing:not(.s-done) .ua-sys-done { opacity: 0; transform: translateY(0.4em); }

.no-anim, .no-anim * { transition: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .ua-dots3 i, .dots i { animation: dot 1.1s ease-in-out infinite; }
  .ua-dots3 i:nth-child(2), .dots i:nth-child(2) { animation-delay: 0.15s; }
  .ua-dots3 i:nth-child(3), .dots i:nth-child(3) { animation-delay: 0.3s; }
}
@keyframes dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-0.3em); opacity: 1; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section-band { background: var(--bg-band); border-block: 1px solid var(--border); }

.section-head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head-wide { max-width: 48rem; }
.kicker {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.section h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
}
.lead { margin: 1rem 0 0; color: var(--muted); font-size: 1.15rem; line-height: 1.55; }
.section-head > p:not(.kicker):not(.lead) { margin: 1.25rem 0 0; }
.section code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--inline-code-bg);
  color: var(--inline-code-text);
  font-family: var(--font-mono);
  font-size: 0.86em;
}

.checks { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.checks li { position: relative; padding-left: 1.6rem; }
.checks li + li { margin-top: 0.55rem; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.5em;
  width: 0.7rem;
  height: 0.4rem;
  border-left: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  transform: rotate(-45deg);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.split .section-head { margin-bottom: 0; }
.split-reverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr); }
.split-reverse .showcase { order: -1; }
.showcase { min-width: 0; }

@media (max-width: 60rem) {
  .split, .split-reverse { grid-template-columns: 1fr; }
  .split-reverse .showcase { order: 0; }
}

/* ---------- Mocks: shared ---------- */
.mock {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: 0.9em;
  background: var(--app-main);
  color: var(--app-text);
  font-family: var(--font-sans);
  line-height: 1.35;
  text-align: left;
  user-select: none;
}
.mock p { margin: 0; }
.mock img { display: block; max-width: none; object-fit: cover; }
.mock code { background: none; padding: 0; }

/* ---------- Feature tiles ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.tile h3 {
  margin: 1.1rem 1.2rem 0.4rem;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
}
.tile p { margin: 0 1.2rem 1.3rem; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }

.tile-visual {
  position: relative;
  height: 12.5rem;
  overflow: hidden;
  padding: 1.1rem 1.1rem 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
/* The mocks run off the bottom of their tile, like a window cut by the frame. */
.tile-visual .mock {
  font-size: 0.74rem;
  min-height: calc(100% + 1rem);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: var(--shadow);
}

/* 1 Channels */
.mk-channels { display: grid; grid-template-columns: 8.2em minmax(0, 1fr); width: 27em; }
.mk-side { display: flex; flex-direction: column; gap: 0.15em; padding: 0.9em 0.55em; background: var(--app-side); color: var(--app-side-text); }
.mk-side b { margin: 0 0.4em 0.4em; color: var(--app-side-muted); font-size: 0.82em; letter-spacing: 0.06em; text-transform: uppercase; }
.mk-side span { display: flex; align-items: center; gap: 0.4em; padding: 0.35em 0.45em; border-radius: 0.4em; white-space: nowrap; }
.mk-side i { color: var(--app-side-muted); font-style: normal; }
.mk-side .is-on { background: var(--app-side-active); color: #fff; }
.mk-side .is-on i { color: rgb(255 255 255 / 70%); }
.mk-side .is-unread { color: #fff; font-weight: 700; }
.mk-side em { margin-left: auto; padding: 0 0.45em; border-radius: 999px; background: var(--yellow); color: var(--ink); font-style: normal; font-size: 0.85em; }
.mk-list { padding: 0.5em; min-width: 0; }
.mk-row { display: flex; gap: 0.6em; padding: 0.55em; border-radius: 0.5em; }
.mk-row.is-sel { background: var(--app-select); }
.mk-row img { width: 2.3em; height: 2.3em; border-radius: 50%; flex: none; }
.mk-row span { display: flex; flex-direction: column; min-width: 0; }
.mk-row b, .mk-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-row small { color: var(--app-muted); }

/* 2 Lanes */
.mk-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45em; width: 33em; padding: 0.7em; background: var(--app-main); }
.mk-lanes > div { display: flex; flex-direction: column; gap: 0.45em; padding: 0.45em; border-radius: 0.5em; background: var(--app-pane); border: 1px solid var(--app-line); min-width: 0; }
.mk-lanes b { color: var(--app-muted); font-size: 0.78em; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-card { display: flex; flex-direction: column; gap: 0.15em; padding: 0.5em; border-radius: 0.4em; background: var(--app-main); border: 1px solid var(--app-line); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-card small { color: var(--app-muted); font-weight: 400; }
.mk-card.is-q small { align-self: start; padding: 0 0.4em; border-radius: 999px; background: rgb(224 165 38 / 28%); color: var(--app-text); }
.mk-card.is-done { color: var(--app-muted); text-decoration: line-through; }

/* 3 Files */
.mk-files { padding: 0.8em; }
.mk-gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 4.2em 4.2em; gap: 0.35em; }
.mk-gallery img { width: 100%; height: 100%; border-radius: 0.4em; }
.mk-gallery img:first-child { grid-row: span 2; }
.mk-file { display: flex; align-items: center; gap: 0.6em; margin-top: 0.6em; padding: 0.5em 0.6em; border: 1px solid var(--app-line); border-radius: 0.5em; background: var(--app-pane); }
.mk-file i { padding: 0.2em 0.4em; border-radius: 0.3em; background: #b4442f; color: #fff; font-style: normal; font-size: 0.75em; font-weight: 700; }
.mk-file small { margin-left: auto; color: var(--app-muted); }

/* 4 Bell */
.mk-bell { padding: 0.7em; }
.mk-bell-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0.2em 0.5em; }
.mk-bell-head span { color: var(--app-accent-text); font-size: 0.85em; }
.mk-note { display: flex; gap: 0.6em; align-items: center; padding: 0.5em; border-radius: 0.5em; }
.mk-note.is-new { background: var(--app-select); }
.mk-note img, .mk-due { width: 2.2em; height: 2.2em; border-radius: 50%; flex: none; }
.mk-due { display: grid; place-items: center; background: var(--yellow); color: var(--ink); font-weight: 800; }
.mk-note > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.mk-note small { color: var(--app-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 5 Slash commands */
.mk-slash { display: flex; flex-direction: column; justify-content: flex-start; gap: 0.5em; padding: 0.8em; }
.mk-menu { display: flex; flex-direction: column; padding: 0.35em; border: 1px solid var(--app-line); border-radius: 0.6em; background: var(--app-main); box-shadow: 0 0.4em 1.2em rgb(0 0 0 / 18%); }
.mk-menu span { padding: 0.45em 0.55em; border-radius: 0.4em; color: var(--app-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-menu b { margin-right: 0.4em; color: var(--app-text); font-family: var(--font-mono); }
.mk-menu .is-sel { background: var(--app-select); }
.mk-compose { padding: 0.6em 0.75em; border: 1px solid var(--app-line); border-radius: 0.6em; background: var(--app-pane); font-family: var(--font-mono); }
.mk-caret { display: inline-block; width: 1px; height: 1.1em; margin-left: 1px; background: currentColor; vertical-align: -0.2em; }
@media (prefers-reduced-motion: no-preference) {
  .mk-caret { animation: caret 1s steps(1) infinite; }
}
@keyframes caret { 50% { opacity: 0; } }

/* 6 Phone */
.tile-visual .mk-phone {
  width: 11.5em;
  margin-inline: auto;
  padding: 0.55em;
  border-radius: 2em 2em 0 0;
  border: 0;
  background: #0b0c0d;
}
.mk-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 17em;
  padding: 0.8em 0.9em;
  border-radius: 1.5em 1.5em 0 0;
  background: linear-gradient(160deg, #4a3b2a, #17130f 70%);
  color: #fff;
}
.mk-time { font-size: 1.05em; font-weight: 700; }
.mk-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7em; width: 100%; margin-top: 1em; }
.mk-icons > i { aspect-ratio: 1; border-radius: 0.55em; background: rgb(255 255 255 / 14%); }
.mk-app { position: relative; aspect-ratio: 1; }
.mk-app img { width: 100%; height: 100%; border-radius: 0.55em; }
.mk-app em { position: absolute; top: -0.45em; right: -0.45em; min-width: 1.4em; padding: 0 0.3em; border-radius: 999px; background: #e5484d; color: #fff; font-style: normal; font-size: 0.8em; font-weight: 700; text-align: center; }
.mk-screen small { align-self: flex-start; margin: 0.25em 0 0 calc(37.5% + 0.2em); color: rgb(255 255 255 / 80%); font-size: 0.72em; }

/* 7 Guests */
.mk-guests { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; padding: 0.7em; }
.mk-col { display: flex; flex-direction: column; gap: 0.4em; min-width: 0; }
.mk-col b { color: var(--app-muted); font-size: 0.8em; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.mk-col span { display: flex; flex-direction: column; min-height: 3.1em; justify-content: center; padding: 0.45em 0.55em; border: 1px solid var(--app-line); border-radius: 0.45em; background: var(--app-pane); font-weight: 600; }
.mk-col small { color: var(--app-accent-text); font-weight: 600; }
.mk-col .is-hidden { border-style: dashed; background: transparent; }
.mk-col .is-hidden::before { content: ""; width: 0.8em; height: 0.7em; margin: 0 auto; border: 0.15em solid var(--app-muted); border-radius: 0.15em; opacity: 0.6; }

/* 8 Data */
.mk-data { padding: 0.8em 0.9em; }
.mk-data pre { margin: 0; color: var(--app-muted); font-family: var(--font-mono); font-size: 1em; line-height: 1.5; white-space: pre; }
.mk-data pre b { color: var(--app-text); font-weight: 600; }
.mk-tags { display: flex; flex-wrap: wrap; gap: 0.35em; margin-top: 0.7em; }
.mk-tags span { padding: 0.2em 0.55em; border-radius: 999px; background: var(--app-select); font-family: var(--font-mono); font-size: 0.9em; }

/* ---------- Board showcase ---------- */
.bd {
  --g: 0.6em;
  --H: 6.7em;
  --pad: 0.55em;
  --label: 1.4em;
  --i: 3;
  font-size: clamp(11px, 1.05vw, 14px);
  padding: 0.9em;
  box-shadow: var(--shadow-app);
}
.bd-head { display: flex; align-items: center; gap: 0.6em; margin-bottom: 0.8em; }
.bd-head b { margin-right: auto; font-size: 1.15em; }
.bd-filter { padding: 0.25em 0.7em; border: 1px solid var(--app-line); border-radius: 0.45em; color: var(--app-muted); font-size: 0.9em; }
.bd-filter::after { content: " \25BE"; }

.bd-lanes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); }
.bd-lane {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  min-width: 0;
  padding: var(--pad);
  border: 1px solid var(--app-line);
  border-radius: 0.6em;
  background: var(--app-pane);
}
.bd-lane > b { height: var(--label); color: var(--app-muted); font-size: 0.82em; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: calc(var(--label) / 0.82); }
.bd-slot { height: var(--H); border-radius: 0.5em; }
.bd-card {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  height: var(--H);
  padding: 0.5em 0.6em;
  border: 1px solid var(--app-line);
  border-radius: 0.5em;
  background: var(--app-main);
  overflow: hidden;
}
.bd-card > span:first-child { max-height: 2.7em; overflow: hidden; font-weight: 600; line-height: 1.35; }
.bd-card small { color: var(--app-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; color: var(--app-muted); font-size: 0.9em; }
.bd-foot em { font-style: normal; }
.bd-foot em::before { content: ""; display: inline-block; width: 0.95em; height: 0.75em; margin-right: 0.3em; border: 1.5px solid currentColor; border-radius: 0.25em; vertical-align: -0.05em; }
.bd-foot img { width: 1.6em; height: 1.6em; border-radius: 50%; }
.bd-people { display: flex; }
.bd-people img + img { margin-left: -0.4em; box-shadow: 0 0 0 0.14em var(--app-main); }
.bd-lane.is-done .bd-card > span:first-child { color: var(--app-muted); text-decoration: line-through; }

.bd-move {
  position: absolute;
  top: calc(var(--pad) + var(--label) + var(--H) + 1em + 1px);
  left: calc(var(--i) * (100% + var(--g)) / 4 + var(--pad) + 1px);
  width: calc((100% - 3 * var(--g)) / 4 - 2 * var(--pad) - 2px);
  border-color: color-mix(in srgb, var(--app-accent) 60%, var(--app-line));
  box-shadow: 0 0.4em 1em rgb(0 0 0 / 22%);
  transition: left 0.9s cubic-bezier(0.65, 0, 0.35, 1), top 0.9s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.3s ease;
}
.bd:not(.is-playing) .bd-move > span:first-child,
.bd.s-done .bd-move > span:first-child { color: var(--app-muted); text-decoration: line-through; }

.bd-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(25em, 62%);
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  padding: 1em;
  border-left: 1px solid var(--app-line);
  background: var(--app-main);
  box-shadow: -1em 0 2.5em rgb(0 0 0 / 25%);
  transform: translateX(105%);
  transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.bd-drawer-head { display: flex; flex-direction: column; gap: 0.4em; padding-bottom: 0.7em; border-bottom: 1px solid var(--app-line); }
.bd-drawer-head b { font-size: 1.1em; }
.bd-state { align-self: start; padding: 0.1em 0.6em; border-radius: 999px; background: var(--app-accent); color: #fff; font-size: 0.85em; font-weight: 700; }
.bd-msg { display: flex; gap: 0.6em; }
.bd-msg img { width: 2.2em; height: 2.2em; border-radius: 50%; flex: none; }
.bd-msg b { display: block; }
.bd-note { color: var(--app-muted); font-size: 0.85em; text-align: center; }

.bd.is-playing { --i: 0; }
.bd.is-playing.s-doing { --i: 1; }
.bd.is-playing.s-question { --i: 2; }
.bd.is-playing.s-done { --i: 3; }
.bd.is-playing.s-lift .bd-move { box-shadow: 0 0.8em 1.8em rgb(0 0 0 / 35%); }
.bd.is-playing.s-drawer:not(.s-drawerclose) .bd-drawer { transform: none; }

/* Phones: the lanes become rows; the card moves down instead of across. */
@media (max-width: 34rem) {
  .bd { font-size: clamp(10px, 3vw, 12px); --row: calc(var(--H) + 2 * var(--pad) + 2px); }
  .bd-lanes { grid-template-columns: 1fr; }
  .bd-lane { display: grid; grid-template-columns: 5.4em minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0.5em; height: var(--row); }
  .bd-lane > b { white-space: normal; line-height: 1.2; height: auto; }
  .bd-move {
    top: calc(var(--i) * (var(--row) + var(--g)) + var(--pad) + 1px);
    left: calc(var(--pad) + 5.4em + 1em + 1px + (100% - 2 * var(--pad) - 5.4em - 1em - 2px) / 2);
    width: calc((100% - 2 * var(--pad) - 5.4em - 1em - 2px) / 2);
  }
  .bd-drawer { width: 85%; }
}

/* ---------- Notifications showcase ---------- */
.ntf {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16em;
  align-items: center;
  font-size: clamp(11px, 0.95vw, 13px);
}
.nt-settings {
  grid-column: 1;
  grid-row: 1;
  margin-right: -3em;
  padding: 1.1em 4em 1.1em 1.1em;
  box-shadow: var(--shadow-app);
}
.nt-title { display: block; margin-bottom: 0.6em; font-size: 1.1em; }
.nt-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; padding: 0.65em 0; border-top: 1px solid var(--app-line); }
.nt-row-col { flex-direction: column; align-items: stretch; }
.nt-seg { display: flex; flex-wrap: wrap; gap: 0.25em; padding: 0.2em; border-radius: 0.55em; background: var(--app-pane); border: 1px solid var(--app-line); }
.nt-seg i { flex: 1; padding: 0.3em 0.55em; border-radius: 0.4em; color: var(--app-muted); font-style: normal; text-align: center; white-space: nowrap; }
.nt-seg i.is-on { background: var(--app-accent); color: #fff; font-weight: 600; }
.nt-seg-small i { flex: none; font-size: 0.9em; }
.nt-pill { padding: 0.2em 0.65em; border-radius: 999px; background: var(--app-select); white-space: nowrap; }
.nt-switch { position: relative; flex: none; width: 2.6em; height: 1.5em; border-radius: 999px; background: var(--app-accent); transition: background-color 0.3s ease; }
.nt-switch i { position: absolute; top: 0.2em; left: 1.3em; width: 1.1em; height: 1.1em; border-radius: 50%; background: #fff; transition: left 0.3s ease; }

.nt-phone {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  width: 16em;
  padding: 0.55em;
  border-radius: 2.6em;
  background: #0b0c0d;
  box-shadow: var(--shadow-app), inset 0 0 0 1px rgb(255 255 255 / 8%);
}
.nt-screen {
  position: relative;
  height: 29em;
  overflow: hidden;
  border-radius: 2.1em;
  background: #1e1813;
  color: #fff;
  text-align: center;
}
.nt-wall { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(2px) brightness(0.62) saturate(1.1); transform: scale(1.05); }
.nt-clock, .nt-date { position: relative; display: block; }
.nt-clock { margin-top: 1.6em; font-size: 3.4em; font-weight: 300; letter-spacing: -0.02em; line-height: 1; }
.nt-date { margin-top: 0.4em; font-size: 0.95em; opacity: 0.85; }
.nt-push-card {
  position: absolute;
  left: 0.7em;
  right: 0.7em;
  top: 9.5em;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  padding: 0.7em 0.8em;
  border-radius: 1.1em;
  background: rgb(245 245 245 / 82%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #111;
  font-size: 0.95em;
  text-align: left;
  line-height: 1.3;
  transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.4s ease;
}
.nt-push-card > span:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.nt-push-app { display: flex; align-items: center; gap: 0.45em; color: #555; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.03em; }
.nt-push-app img { width: 1.4em; height: 1.4em; border-radius: 0.35em; }
.nt-push-app small { margin-left: auto; text-transform: none; letter-spacing: 0; }
.nt-push-card > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-push-card { height: 6.4em; overflow: hidden; }
.nt-push-2 { transform: translateY(7.1em); } /* card height plus a 0.7em gap, like stacked iOS notifications */

.ntf.is-playing:not(.s-pushon) .nt-push i { left: 0.2em; }
.ntf.is-playing:not(.s-pushon) .nt-push { background: var(--app-line); }
.ntf.is-playing:not(.s-push1) .nt-push-1 { transform: translateY(-12em); opacity: 0; }
.ntf.is-playing:not(.s-push1) .nt-push-2 { transform: none; }

@media (max-width: 34rem) {
  .ntf { grid-template-columns: 1fr; justify-items: center; gap: 1.5rem; font-size: clamp(10.5px, 3.2vw, 12.5px); }
  .nt-phone { grid-column: 1; grid-row: 1; }
  .nt-settings { grid-row: 2; margin: 0; padding: 1.1em; width: 100%; }
}

/* ---------- Developers ---------- */
.dev-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.code { margin: 0; min-width: 0; }
.code figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; color: var(--muted); font-size: 0.9rem; }
.code figcaption b { color: var(--text); font-weight: 600; }
.code figcaption span { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.code figure.highlight { margin: 0; }
.code pre { font-size: 0.82rem; }
.dev-side { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.dev-list { margin: 0; padding: 0; list-style: none; }
.dev-list li { padding: 0.7rem 0; border-top: 1px solid var(--border); color: var(--muted); }
.dev-list li:last-child { border-bottom: 1px solid var(--border); }
.dev-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }

@media (max-width: 60rem) {
  .dev-grid { grid-template-columns: 1fr; }
}

/* ---------- Quick start ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.step h3 { margin: 0; font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; }
.step p { margin: 0; color: var(--muted); }
.step-n {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
}

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 3rem; align-items: start; }
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  position: relative;
  padding: 1.1rem 2.5rem 1.1rem 0;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 0.65rem;
  height: 0.65rem;
  margin-top: -0.45rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -0.1rem; }
.faq details p { margin: 0 0 1.25rem; max-width: 62ch; color: var(--muted); }

@media (max-width: 60rem) {
  .faq-wrap { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Docs cards ---------- */
.doc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.doc-cards a {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 100%;
  padding: 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.doc-cards a:hover { border-color: var(--accent); background: var(--surface-2); }
.doc-cards small { color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.doc-cards b { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.doc-cards span { color: var(--muted); font-size: 0.95rem; }