/* ==========================================================================
   Flowershow landing pages — shared styles
   --------------------------------------------------------------------------
   Flowershow auto-loads this file from the content root after the default
   theme, so rules with equal or higher specificity win without !important.

   Everything here is scoped under `.fs-root` so it applies ONLY to landing
   pages that wrap their body in `<div className="fs-root"> … </div>` and never
   leaks into docs, blog, or changelog. To reuse this design on another landing
   page (publish-github, publish-obsidian, cli, pricing, …) just wrap that
   page's JSX body in `<div className="fs-root">`.

   Design tokens come from the site DESIGN.md: a monochrome spine with a
   pink / berry / yellow accent palette, system font stack, ruled-grid cards.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap');

:root {
  /* Monochrome spine */
  --ink: #111111;
  --ink-active: #242424;
  --body: #37342e;
  --muted: #6b6860;
  --muted-soft: #928d84;
  --canvas: #ffffff;
  /* Neutrals biased a hair warm (cream, not rose) so they read chosen, not inherited */
  --surface-soft: #f9f8f6;
  --surface-card: #f4f2ee;
  --hairline: #eae7e1;
  --hairline-strong: #dad5cc;
  --surface-dark: #100e0b;
  --surface-dark-elevated: #1b1814;
  --on-dark: #ffffff;
  --on-dark-soft: #a29c92;
  /* ---- Brand palette — canonical accent colors ----
     Two-shade accent system: berry (pink) + gold (warm yellow), plus fern
     (green) reserved for the Gardens use-case. The old bright --rose-punch and
     lime --golden-glow were retired to keep the palette tight and on-brand. */
  --berry-blush:  #ab3a76;
  --black-forest: #043406;
  --bright-fern:  #56aa16;
  --brand-black:  #000000;

  /* Semantic accent roles → brand palette. Each accent is two shades: a
     saturated fill and a darkened `*-ink` that stays legible as TEXT on white.
     Yellows are all warm (#F9F394 fill / #8a6f00 text); green is Gardens-only. */
  --berry: var(--berry-blush);   /* decorative accents, eyebrows, chips, pink pop */
  --berry-ink: #872c5b;          /* darkened berry — accent text, links, hover */
  --fern: var(--bright-fern);    /* green pop — Gardens only */
  --fern-ink: #417f10;           /* darkened fern — green text on white (Gardens) */
  --forest: var(--black-forest); /* deep green — strong anchor */
  --plum: var(--berry-ink);      /* legacy name → deep berry accent text */
  --plum-deep: #6e2249;          /* darker berry — hover */
  /* Soft tints for colorful, filled card backgrounds */
  --tint-plum: #f6e7eb;
  --tint-berry: #f8e8f1;
  --tint-fern: #eaf5df;
  --tint-lemon: #faf1c6;         /* warm golden wash */
  --card-yellow: #F9F394;        /* warm yellow fill — publish cards, badges */
  --card-ink: #171310;           /* near-black text/icons on yellow fills */
  --gold-eyebrow: #8a6f00;       /* warm dark gold — golden-in-TEXT / accents */
  --lemon: var(--card-yellow);   /* warm yellow fill (back-compat alias) */
  --gold: var(--gold-eyebrow);   /* warm dark gold (back-compat alias) */
  /* Obsidian — the /publish-obsidian landing accent (brand violet). Two shades:
     a saturated fill (--obsidian) and a darkened --obsidian-ink that stays
     legible as TEXT on white, plus a soft --tint-obsidian wash — mirrors the
     berry/teal triplet. Also used by .wf-ico.brand-obsidian on the home page. */
  --obsidian:      #7c3aed;      /* Obsidian brand violet — icon + fills */
  --obsidian-ink:  #6d28d9;      /* darkened violet — accent text/links on white */
  --tint-obsidian: #f0e9fe;      /* soft violet wash — filled card backgrounds */
  /* Teal — the Data Stories use-case accent. A cool, analytical pop that reads
     distinct from the warm gold/berry family (docs owns gold). Two shades: a
     saturated fill (--teal) and a darkened --teal-ink that stays legible as
     TEXT on white, plus a soft --tint-teal wash — mirrors the berry triplet. */
  --teal:       #0f9aa6;         /* saturated teal — data-viz fills */
  --teal-ink:   #0b6b74;         /* darkened teal — accent text/links on white */
  --tint-teal:  #dcf0f2;         /* soft teal wash — filled card backgrounds */
  /* Back-compat aliases — existing rules pick up the brand palette automatically */
  --rose: var(--berry);          /* pink pop → focus, selection, "+" */
  --rose-deep: var(--berry-ink); /* deep berry → link / hover text */
  --rose-tint: var(--tint-berry);
  --yellow: var(--lemon);

  --maxw: 1180px;
  --sans: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", Times, serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

.fs-root, .fs-root *, .fs-root *::before, .fs-root *::after { box-sizing: border-box; }

.fs-root {
  font-family: var(--sans);
  color: var(--body);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  font-size: 17px;
  font-weight: 500;
}
.fs-root ::selection { background: var(--rose-tint); color: var(--rose-deep); }

.fs-root a { color: inherit; text-decoration: none; }
.fs-root img { max-width: 100%; display: block; }

.fs-root .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Typography ---------- */
.fs-root .eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--berry);
  margin: 0 0 16px;
  display: block;
}
.fs-root h1, .fs-root h2, .fs-root h3 {
  font-family: var(--sans);
  color: var(--ink);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
.fs-root h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.fs-root h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.fs-root h3 { font-size: 1.125rem; line-height: 1.35; letter-spacing: -0.01em; }
.fs-root p { margin: 0; }

.fs-root .lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--body); line-height: 1.55; }

/* ---------- Buttons ---------- */
.fs-root .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  height: 46px; padding: 0 22px; border-radius: 9px; border: 1px solid transparent;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease;
  white-space: nowrap;
}
.fs-root .btn-primary { background: var(--ink); color: var(--on-dark); }
.fs-root .btn-primary:hover { background: var(--ink-active); }
.fs-root .btn-primary:active { transform: translateY(1px); }
.fs-root .btn-secondary { background: var(--canvas); color: var(--ink); border-color: var(--hairline-strong); }
.fs-root .btn-secondary:hover { border-color: var(--muted); }
.fs-root .btn-ghost { background: transparent; color: var(--ink); height: auto; padding: 0; }
.fs-root .btn .arw { transition: transform .15s ease; }
.fs-root .btn:hover .arw { transform: translateX(3px); }
.fs-root .btn-google .g-ico { width: 18px; height: 18px; flex: none; }

/* ============================================================
   Canonical in-card link. Every non-button link — Learn more,
   Explore, showcase URLs, the agent note — is styled identically
   and, on hover anywhere over its card, changes color, underlines,
   and nudges its arrow forward. Bottom-alignment is set per card
   type alongside each card's own rule.
   ============================================================ */
.fs-root .use-link, .fs-root .show-link, .fs-root .learn,
.fs-root .wf-learn, .fs-root .fm-learn, .fs-root .ft-learn,
.fs-root .textlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 14px; line-height: 1.2;
  color: var(--ink); text-decoration: none;
  transition: color .16s ease;
}
.fs-root .use-link .arw, .fs-root .show-link .arw, .fs-root .learn .arw,
.fs-root .wf-learn .arw, .fs-root .fm-learn .arw, .fs-root .ft-learn .arw,
.fs-root .textlink .arw { transition: transform .16s ease; }
/* underline is a pseudo-element so it can animate: it unwraps left→right and
   sits under the label only — never the arrow or the flex gap */
.fs-root .lm-txt { position: relative; }
.fs-root .lm-txt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform .22s ease;
}
.fs-root .use-link:hover, .fs-root .use-card:hover .use-link,
.fs-root .show-link:hover, .fs-root .show-card:hover .show-link,
.fs-root .learn:hover, .fs-root .uc-feature:hover .learn,
.fs-root .wf-learn:hover, .fs-root .wf-card:hover .wf-learn,
.fs-root .fm-learn:hover, .fs-root .feature-mini:hover .fm-learn,
.fs-root .ft-learn:hover, .fs-root .feature-tile:hover .ft-learn,
.fs-root .textlink:hover {
  color: var(--berry-ink);
}
.fs-root .use-link:hover .lm-txt::after, .fs-root .use-card:hover .use-link .lm-txt::after,
.fs-root .show-link:hover .lm-txt::after, .fs-root .show-card:hover .show-link .lm-txt::after,
.fs-root .learn:hover .lm-txt::after, .fs-root .uc-feature:hover .learn .lm-txt::after,
.fs-root .wf-learn:hover .lm-txt::after, .fs-root .wf-card:hover .wf-learn .lm-txt::after,
.fs-root .fm-learn:hover .lm-txt::after, .fs-root .feature-mini:hover .fm-learn .lm-txt::after,
.fs-root .ft-learn:hover .lm-txt::after, .fs-root .feature-tile:hover .ft-learn .lm-txt::after,
.fs-root .textlink:hover .lm-txt::after { transform: scaleX(1); }
.fs-root .use-link:hover .arw, .fs-root .use-card:hover .use-link .arw,
.fs-root .show-link:hover .arw, .fs-root .show-card:hover .show-link .arw,
.fs-root .learn:hover .arw, .fs-root .uc-feature:hover .learn .arw,
.fs-root .wf-learn:hover .arw, .fs-root .wf-card:hover .wf-learn .arw,
.fs-root .fm-learn:hover .arw, .fs-root .feature-mini:hover .fm-learn .arw,
.fs-root .ft-learn:hover .arw, .fs-root .feature-tile:hover .ft-learn .arw,
.fs-root .textlink:hover .arw { transform: translateX(3px); }

.fs-root :focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 4px; }

/* ---------- Sections ---------- */
.fs-root .section { padding: clamp(64px, 9vw, 104px) 0; }
.fs-root .section-soft { background: var(--surface-card); }
.fs-root .section-head { max-width: 620px; margin: 0 auto 56px; text-align: center; }
.fs-root .section-head p:not(.eyebrow) { margin-top: 18px; color: var(--muted); font-size: 1.1rem; }

/* ---------- Hero ---------- */
.fs-root .hero { padding: clamp(48px, 7vw, 92px) 0 clamp(56px, 8vw, 100px); overflow: hidden; }
/* Stacked: copy on top, media full-width below */
.fs-root .hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 64px); }
.fs-root .hero-copy h1 { margin-bottom: 22px; max-width: 18ch; }
.fs-root .hero-copy .lede { max-width: 52ch; margin-bottom: 30px; }

/* Hero media — full content width, sits below the copy */
.fs-root .hero-media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  width: 100%;
  aspect-ratio: 2940 / 1848; /* matches the hero screenshots so nothing is cropped */
  background: linear-gradient(135deg, var(--rose-tint) 0%, #ffffff 55%, var(--surface-card) 100%);
}
.fs-root .hero-img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* Hero slideshow — 4 use-case screenshots crossfading in a loop.
   Each slide is a full-quality static image; opacity is animated with a shared
   keyframe, staggered per slide. No JS needed (MDX can't run <script>). */
.fs-root .hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: left top;
  opacity: 0; animation: heroSlide 24s linear infinite;
}
.fs-root .hero-slide:nth-child(1) { animation-delay: 0s; }
.fs-root .hero-slide:nth-child(2) { animation-delay: 6s; }
.fs-root .hero-slide:nth-child(3) { animation-delay: 12s; }
.fs-root .hero-slide:nth-child(4) { animation-delay: 18s; }
@keyframes heroSlide {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  25%  { opacity: 1; }
  29%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-root .hero-slide { animation: none; }
  .fs-root .hero-slide:first-child { opacity: 1; }
}

/* ---------- Demo video — framed 16/9 embed near the foot of the page ---------- */
.fs-root .demo-media {
  max-width: 900px; margin: 0 auto; position: relative;
  border-radius: 16px; overflow: hidden; border: 1px solid var(--hairline);
  box-shadow: 0 1px 2px rgba(17,13,15,.04), 0 30px 70px -28px rgba(17,13,15,.30);
  aspect-ratio: 16 / 9; background: var(--surface-card);
}
.fs-root .demo-media iframe { width: 100%; height: 100%; border: 0; display: block; }
.fs-root .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-bottom: 20px; }
.fs-root .gh-star {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 16px;
  border: 1px solid var(--hairline-strong); border-radius: 9px; font-size: 14px; font-weight: 600;
  color: var(--ink); background: var(--canvas); transition: border-color .15s ease;
}
.fs-root .gh-star:hover { border-color: var(--muted); }
.fs-root .gh-star .cnt { color: var(--muted); font-variant-numeric: tabular-nums; }
.fs-root .microcopy { font-family: var(--sans); font-size: 13.5px; color: var(--muted-soft); letter-spacing: 0; }
.fs-root .microcopy b { color: inherit; font-weight: 500; }

/* ---------- Publish your way — split layout ---------- */
.fs-root .publish-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 6vw, 76px); align-items: center; }
.fs-root .publish-copy { max-width: 30ch; }
.fs-root .publish-copy h2 { margin-top: 16px; }
.fs-root .publish-copy .publish-cta { margin-top: 32px; }

/* ---------- Workflow grid — filled rounded cards, colored icon chips ---------- */
.fs-root .wf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.fs-root .wf-card {
  position: relative; background: color-mix(in srgb, var(--card-yellow) 68%, #fff); border-radius: 16px;
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 12px;
  color: var(--card-ink);
}
.fs-root .wf-go { display: none; }
/* explicit, always-visible "Learn more" link — only its style shifts on hover */
.fs-root .wf-learn { align-self: flex-start; margin-top: auto; }
.fs-root .wf-ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--canvas); color: var(--card-ink);
  box-shadow: 0 1px 2px rgba(17,13,15,.10);
}
.fs-root .wf-ico.brand-obsidian { color: var(--obsidian); }
.fs-root .wf-ico svg { width: 22px; height: 22px; display: block; }
.fs-root .wf-card h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--card-ink); }
.fs-root .wf-card p { font-size: 1.05rem; color: var(--card-ink); line-height: 1.5; }
.fs-root .wf-card code { font-family: var(--mono); font-size: 12.5px; color: var(--card-ink);
  background: rgba(0,0,0,.06); border: none;
  padding: 2px 6px; border-radius: 5px; }

/* Agent skill — cross-cutting note beneath the CTA (works with any workflow) */
.fs-root .publish-agent {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 10px; max-width: 34ch;
}
.fs-root .publish-agent .pa-lead {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.fs-root .publish-agent .pa-icons { display: inline-flex; align-items: center; gap: 8px; }
.fs-root .publish-agent .pa-icons svg { display: block; }
.fs-root .publish-agent .ag-claude { width: 18px; height: 18px; }
.fs-root .publish-agent .ag-codex, .fs-root .publish-agent .ag-cursor { width: 15px; height: 15px; }
.fs-root .publish-agent .pa-copy { font-size: 16px; color: var(--muted); line-height: 1.5; }

/* ---------- Use cases — a single row of four small cards, one shared CTA ----------
   Images live in the hero carousel and features have their own section, so each
   card is minimal: a title, a one-line description, and an "Explore →" link.
   A per-card brand accent (green, pink, yellow, berry) is passed down as
   `--u-accent` and colors the badge and the title's highlighted phrase. */
.fs-root .uses .section-head { margin-bottom: clamp(40px, 6vw, 56px); }
.fs-root .uses-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* Clay-style: colored background, accent badge pill top-left, big two-tone
   headline pushed to the bottom. No image, no description. */
.fs-root .use-card {
  display: flex; flex-direction: column;
  background: var(--u-bg); border: none;
  border-radius: 20px;
  padding: 22px 22px 20px;
  min-height: 250px;
}
.fs-root .use-badge {
  align-self: flex-start;
  font-family: var(--sans); font-weight: 700; font-size: 12px;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: #fff; background: var(--u-accent);
  padding: 5px 12px; border-radius: 999px;
}
.fs-root .use-title {
  margin: auto 0 0;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.2rem, 1.55vw, 1.45rem); letter-spacing: -0.02em; line-height: 1.22;
  color: var(--ink);
}
.fs-root .use-title .use-accent { color: var(--u-accent); }
.fs-root .use-link { margin-top: 16px; }
.fs-root .uses-cta { display: flex; justify-content: center; margin-top: clamp(36px, 5vw, 52px); }
/* Per-card brand accent + matching (slightly richer) background fill */
.fs-root .use-garden { --u-accent: var(--fern-ink);    --u-bg: color-mix(in srgb, var(--bright-fern) 13%, #fff); }
.fs-root .use-blog   { --u-accent: var(--berry-blush); --u-bg: color-mix(in srgb, var(--berry-blush) 13%, #fff); }
.fs-root .use-wiki   { --u-accent: var(--berry-ink);   --u-bg: color-mix(in srgb, var(--berry-ink) 12%, #fff); }
.fs-root .use-docs   { --u-accent: var(--gold);        --u-bg: color-mix(in srgb, var(--card-yellow) 55%, #fff); }

/* ---------- Features — filled rounded cards with visuals ---------- */
.fs-root .feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0; }
.fs-root .feature-tile {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface-soft); border: none; border-radius: 20px;
  padding: 26px 28px 22px; min-height: 340px; overflow: hidden;
}
.fs-root .ft-head {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-family: var(--sans); font-size: 1.2rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em;
}
.fs-root .ft-ico {
  color: var(--berry-blush); flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: color-mix(in srgb, var(--berry-blush) 12%, #fff);
}
.fs-root .ft-ico svg { width: 20px; height: 20px; display: block; }
.fs-root .ft-desc { margin: 12px 0 0; color: var(--muted); font-size: 17.5px; font-weight: 600; line-height: 1.55; max-width: 42ch; }
/* order:1 drops the link below the visual so it sits at the card's very bottom */
.fs-root .ft-learn { order: 1; margin-top: 12px; }
.fs-root .ft-vis {
  margin-top: 24px; flex: 1; min-height: 150px; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent);
  mask-image: linear-gradient(to bottom, #000 74%, transparent);
}
.fs-root .ft-vis > .panel { position: absolute; left: 0; right: 0; top: 0; }

/* Features — mini cards (title + description, no visual): filled + rounded. */
.fs-root .feature-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin: 20px 0 0; }
.fs-root .feature-mini { display: flex; flex-direction: column;
  background: var(--surface-soft); border: none; border-radius: 16px; padding: 24px; }
.fs-root .feature-mini dt, .fs-root .feature-mini dd { margin: 0; }
.fs-root .feature-mini h3 { font-family: var(--sans); font-size: 1.15rem; font-weight: 700;
  color: var(--ink); letter-spacing: -0.02em; }
.fs-root .feature-mini p { margin: 8px 0 0; color: var(--muted); font-size: 17.5px; font-weight: 500; line-height: 1.55; }
/* explicit, always-visible "Learn more" link — only its style shifts on hover */
.fs-root .fm-learn { align-self: flex-start; margin-top: auto; padding-top: 14px; }
@media (max-width: 760px) {
  .fs-root .feature-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .fs-root .feature-row { grid-template-columns: 1fr; }
}

/* Vis — markdown code panel */
.fs-root .vis-code { background: var(--canvas); border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 18px 20px; }
.fs-root .vis-code pre { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.75; color: var(--body); white-space: pre; }
.fs-root .vis-code .h { color: var(--berry-ink); } .fs-root .vis-code .w { color: var(--berry-ink); }
.fs-root .vis-code .l { color: var(--muted); } .fs-root .vis-code .s { color: var(--ink); font-weight: 600; } .fs-root .vis-code .c { color: var(--muted); }

/* Vis — file tree */
.fs-root .vis-tree { background: var(--canvas); border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 18px 20px; font-family: var(--mono); font-size: 12px; color: var(--body); }
.fs-root .vis-tree ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fs-root .vis-tree li { white-space: nowrap; }
.fs-root .vis-tree .dir { color: var(--ink); font-weight: 600; }
.fs-root .vis-tree .dir::before { content: "▾ "; color: var(--muted); }
.fs-root .vis-tree .f::before { content: "◦ "; color: var(--muted-soft); }
.fs-root .vis-tree .l1 { padding-left: 18px; } .fs-root .vis-tree .l2 { padding-left: 36px; }

/* ---------- File types ("Not just Markdown") — one mixed folder beside what each
   file type becomes. Reuses the file-tree vis and the feature-mini cards; the
   tree sits in normal flow here (not inside a masked .ft-vis). ---------- */
.fs-root .ftypes-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr);
  gap: 16px; align-items: stretch; }
.fs-root .ftypes-tree { font-size: 13px; padding: 24px; }
.fs-root .ftypes-row { grid-template-columns: repeat(2, 1fr); margin: 0; }
.fs-root .ftypes-row code { font-family: var(--mono); font-size: .85em; color: var(--ink);
  background: var(--canvas); border-radius: 5px; padding: 1px 6px; }
@media (max-width: 760px) {
  .fs-root .ftypes-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .fs-root .ftypes-row { grid-template-columns: 1fr; }
}

/* Vis — theme swatches */
.fs-root .vis-themes { background: var(--canvas); border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 16px; }
.fs-root .theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fs-root .thumb { background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.fs-root .thumb .bar { height: 7px; width: 60%; border-radius: 3px; }
.fs-root .thumb .ln { height: 5px; border-radius: 3px; background: var(--hairline-strong); }
.fs-root .thumb .ln.s2 { width: 78%; }

/* Vis — custom domain browser bar */
.fs-root .vis-domain { background: var(--canvas); border: 1px solid var(--hairline-strong); border-radius: 12px; overflow: hidden; }
.fs-root .vis-domain .bar { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--hairline); }
.fs-root .vis-domain .dots { display: flex; gap: 5px; }
.fs-root .vis-domain .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline-strong); }
.fs-root .vis-domain .url { flex: 1; display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.5px; color: var(--ink); background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: 999px; padding: 5px 12px; }
.fs-root .vis-domain .url svg { width: 11px; height: 11px; color: var(--rose-deep); }
.fs-root .vis-domain .page { padding: 18px 16px; display: flex; flex-direction: column; gap: 9px; }
.fs-root .vis-domain .page .t { height: 9px; width: 50%; border-radius: 3px; background: var(--hairline-strong); }
.fs-root .vis-domain .page .r { height: 5px; border-radius: 3px; background: var(--hairline); }
.fs-root .vis-domain .page .r.s2 { width: 88%; } .fs-root .vis-domain .page .r.s3 { width: 72%; }

/* Vis — full-text search */
.fs-root .vis-search { background: var(--canvas); border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 16px; }
.fs-root .vis-search .box { display: flex; align-items: center; gap: 9px; border: 1px solid var(--hairline-strong); border-radius: 9px; padding: 9px 12px; font-size: 12.5px; color: var(--muted); }
.fs-root .vis-search .box svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.fs-root .vis-search .box .cur { color: var(--ink); } .fs-root .vis-search .box .cur b { color: var(--rose-deep); font-weight: 600; }
.fs-root .vis-search .res { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.fs-root .vis-search .res .row { padding: 8px 11px; border-radius: 7px; font-size: 12px; color: var(--body); }
.fs-root .vis-search .res .row b { color: var(--rose-deep); font-weight: 600; }
.fs-root .vis-search .res .row.on { background: var(--rose-tint); }

/* Vis — AI agent chat */
.fs-root .vis-agent { background: var(--canvas); border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 16px; }
.fs-root .chat { display: flex; flex-direction: column; gap: 11px; }
.fs-root .msg { border-radius: 12px; padding: 11px 14px; font-size: 12.5px; line-height: 1.5; }
.fs-root .msg.user { align-self: flex-end; max-width: 84%; background: var(--ink); color: var(--on-dark); border-bottom-right-radius: 4px; }
.fs-root .msg.user code { background: rgba(255,255,255,.16); color: #fff; padding: 1px 5px; border-radius: 4px; font-family: var(--mono); font-size: 11.5px; }
.fs-root .msg.bot { align-self: flex-start; max-width: 90%; background: var(--surface-soft); border: 1px solid var(--hairline); color: var(--body); display: flex; flex-direction: column; gap: 6px; border-bottom-left-radius: 4px; }
.fs-root .msg.bot .bot-head { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); font-size: 12px; }
.fs-root .msg.bot .step { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.fs-root .msg.bot .step b { color: var(--ink); font-weight: 600; }

/* ---------- Showcase ---------- */
.fs-root .section-head h2 .stat-hl { color: var(--rose-deep); font-variant-numeric: tabular-nums; }
.fs-root .section-head h2 .h2-sub { color: var(--muted); }
.fs-root .stats { display: flex; justify-content: center; gap: 40px; margin-bottom: 44px; flex-wrap: wrap; }
.fs-root .stat { text-align: center; }
.fs-root .stat .n { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 600; color: var(--ink); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.fs-root .stat .l { font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 10px; }
.fs-root .stat .n .plus { color: var(--rose); }
.fs-root .show-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Filled soft card matching the feature tiles: inset thumbnail, lift + rose glow
   on hover, plus the publish-section corner ↗ chip. */
.fs-root .show-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface-soft); border-radius: 20px;
  padding: 14px 14px 4px; outline-offset: 3px;
}
.fs-root .show-thumb {
  position: relative; aspect-ratio: 16 / 10; width: 100%; overflow: hidden;
  border: none; border-radius: 12px; background: var(--canvas);
}
.fs-root .show-thumb-img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.fs-root .show-body { display: flex; flex-direction: column; gap: 14px; padding: 18px 8px 14px; flex: 1; }
/* Use-card style: name + description at one large size and weight, told apart
   by color alone — name in ink, description in muted. */
.fs-root .show-body p { margin: 0; font-size: clamp(1.1rem, 1.35vw, 1.25rem); line-height: 1.4; font-weight: 600; letter-spacing: -0.015em; color: var(--muted); }
.fs-root .show-body .nm { color: var(--ink); }
.fs-root .show-link { margin-top: auto; font-variant-numeric: tabular-nums; }
/* Type badge — same pill as the use-case cards (uppercase, white-on-accent),
   sitting at the top of the card body above the name. Accent per card matches
   the matching use-case card colour. */
.fs-root .show-badge {
  align-self: flex-start;
  font-family: var(--sans); font-weight: 700; font-size: 12px;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: #fff; background: var(--sc-accent);
  padding: 5px 12px; border-radius: 999px;
}
.fs-root .sc-garden { --sc-accent: var(--fern-ink); }
.fs-root .sc-blog   { --sc-accent: var(--berry-blush); }
.fs-root .sc-wiki   { --sc-accent: var(--berry-ink); }
.fs-root .sc-docs   { --sc-accent: var(--gold); }
/* corner ↗ chip was a whole-card hover affordance; the URL is now the link */
.fs-root .show-go { display: none; }
/* Dogfooding banner — filled card in the section's card language, promoted from
   the old muted one-liner into a proper "we run on our own product" callout. */
.fs-root .self-note {
  display: flex; align-items: center; gap: 22px;
  margin-top: 40px; padding: 22px 26px;
  background: var(--surface-soft); border-radius: 20px;
}
.fs-root .sn-badge {
  flex: none; width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: var(--canvas); box-shadow: 0 1px 2px rgba(17,13,15,.05);
}
.fs-root .sn-copy { flex: 1; min-width: 0; }
.fs-root .sn-copy h3 { font-family: var(--sans); font-size: 1.2rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin: 0; }
.fs-root .sn-copy p { margin: 6px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.fs-root .sn-btn { flex: none; }
.fs-root .sn-btn svg { width: 18px; height: 18px; }

/* ---------- FAQ — filled rounded cards ---------- */
.fs-root .faq-grid { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.fs-root .faq-item { background: var(--surface-soft); border-radius: 16px; padding: 24px 26px; }
.fs-root .faq-item h3 { font-family: var(--sans); font-weight: 700; font-size: 1.075rem; margin-bottom: 10px; }
.fs-root .faq-item p { color: var(--muted); font-size: 16px; line-height: 1.6; }

/* ---------- Open source — copy left, star count + button right ---------- */
/* Reads on plain white — drop the soft-gray section fill (ID beats .section-soft) */
.fs-root #open-source { background: var(--canvas); }
.fs-root .os-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px); align-items: center;
}
.fs-root .os-copy h2 { margin: 0; }
.fs-root .os-copy p { margin-top: 16px; color: var(--muted); font-size: 1.05rem; line-height: 1.6; max-width: 42ch; }

.fs-root .os-side {
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  justify-self: end;
}
/* GitHub button + Product Hunt badge sit side by side so the column stays short */
.fs-root .os-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fs-root .os-star {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; color: var(--ink);
}
.fs-root .os-star-num {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1;
  transition: color .15s ease;
}
.fs-root .os-star-label {
  font-size: 13px; letter-spacing: 0.02em; color: var(--muted-soft);
}
.fs-root .os-star:hover .os-star-num { color: var(--rose-deep); }

.fs-root .os-gh {
  display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px;
  border: 1px solid var(--hairline-strong); border-radius: 9px; font-size: 15px; font-weight: 600;
  color: var(--ink); background: var(--canvas); transition: border-color .15s ease;
}
.fs-root .os-gh:hover { border-color: var(--muted); }
.fs-root .os-gh svg { width: 19px; height: 19px; flex: none; }
.fs-root .os-gh .arw { transition: transform .15s ease; }
.fs-root .os-gh:hover .arw { transform: translateX(3px); }

/* Matched to the GitHub button box (197×46); object-fit keeps the badge undistorted */
.fs-root .ph-badge { display: flex; justify-content: flex-start; }
.fs-root .ph-badge img { width: 197px; height: 46px; object-fit: contain; object-position: left center; display: block; }

/* ---------- Final CTA — flat berry close ----------
   The page's last block: one clean, saturated brand-berry fill (no gradient, no
   decorative petals) with white text and a white button. A single bold colour
   band sitting flush above the near-black footer to close the page. */
.fs-root .final { padding-top: clamp(64px, 9vw, 104px); padding-bottom: 0; }
.fs-root .final-card {
  background: var(--berry-blush); border: none; border-radius: 20px;
  padding: clamp(56px, 7vw, 84px) 32px; text-align: center; position: relative; overflow: hidden;
}
.fs-root .final-card .petal { display: none; }
.fs-root .final-card h2 { color: #fff; margin-bottom: 18px; position: relative; }
.fs-root .final-card p { color: rgba(255,255,255,.88); font-size: 1.1rem; max-width: 44ch; margin: 0 auto 30px; position: relative; }
.fs-root .final-card .fine { font-family: var(--mono); font-size: 12.5px; color: rgba(255,255,255,.72); margin-top: 20px; position: relative; }
/* White button pops on the berry fill */
.fs-root .final-card .btn-primary { background: #fff; color: var(--ink); position: relative; }
.fs-root .final-card .btn-primary:hover { background: rgba(255,255,255,.9); }
.fs-root .final-card .btn-primary:active { transform: translateY(1px); }

/* ---------- Reveal — content visible by default ----------
   The mockup faded `.reveal` blocks in via JS + IntersectionObserver. MDX pages
   don't run arbitrary <script>, so we render everything visible (no JS needed).
   The `reveal` classes are left on the markup as harmless no-ops. */
.fs-root .reveal { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .fs-root .hero-copy .lede { max-width: 46ch; }
  .fs-root .publish-grid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .fs-root .publish-copy { max-width: none; }
  .fs-root .os-grid { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .fs-root .os-side { justify-self: start; }
  .fs-root .uses-grid { grid-template-columns: repeat(2, 1fr); }
  .fs-root .wf-grid { grid-template-columns: repeat(2, 1fr); }
  .fs-root .show-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 22px; }
}
@media (max-width: 760px) {
  .fs-root .feature-grid { grid-template-columns: 1fr; }
  .fs-root .feature-tile { min-height: 300px; }
}
@media (max-width: 720px) {
  .fs-root { font-size: 16px; }
  .fs-root .cta-row { gap: 12px; }
  .fs-root .cta-row .btn, .fs-root .cta-row .gh-star { width: 100%; }
  .fs-root .stats { gap: 28px; }
}
@media (max-width: 560px) {
  .fs-root .self-note { flex-direction: column; text-align: center; }
  .fs-root .sn-btn { width: 100%; }
}
@media (max-width: 480px) {
  .fs-root .wf-grid { grid-template-columns: 1fr; }
  .fs-root .show-grid { grid-template-columns: 1fr; }
  .fs-root .uses-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-root .btn, .fs-root .textlink, .fs-root .wf-card, .fs-root .show-card,
  .fs-root .show-thumb-img, .fs-root .show-link .arw, .fs-root .lm-txt::after { transition: none; }
}

/* ==========================================================================
   Digital-gardens landing — pieces the home page has no equivalent for
   --------------------------------------------------------------------------
   The gardens page (/uses/digital-gardens) reuses the shared landing kit above
   as-is — .hero, .wf-grid, .feature-grid, .show-grid, .final-card — so it reads
   as the same product as the home page. These few extra components cover the
   sections the home page doesn't have, plus the fern-green accent the design
   tokens reserve for the Gardens use-case.

   The page wraps its body in `<div className="fs-root fs-garden">`, so the one
   shared component we re-tint green (.ft-ico) is scoped under `.fs-garden` and
   never touches the home page.
   ========================================================================== */

/* Announcement pill — hero eyebrow chip */
.fs-root .pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--fern-ink); background: var(--tint-fern);
  border-radius: 999px; padding: 6px 14px; margin-bottom: 20px;
  transition: background .15s ease;
}
.fs-root .pill:hover { background: color-mix(in srgb, var(--bright-fern) 20%, #fff); }
.fs-root .pill .arw { transition: transform .15s ease; }
.fs-root .pill:hover .arw { transform: translateX(3px); }

/* Fern accent — two-tone headline word, Gardens only */
.fs-root .accent-fern { color: var(--fern-ink); }

/* Soft page ground — use-case pages sit on surface-soft so they read as a
   distinct page-type from the white main landing. Sections keep their own
   fills on top (.section-soft stays a touch darker for gentle alternation). */
.fs-root.fs-garden { background: var(--surface-soft); }

/* ---- Use-case badge — "Flowershow for: [Use case]" ----
   Nested: an outer square-rounded box holds the muted "Flowershow for:" label
   + an inner square-rounded accent chip naming the use-case. Reusable across
   all use-case pages: each page sets --uc-accent / --uc-tint on its root to
   recolor the chip (defaults below are the Gardens fern). */
.fs-root .uc-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 6px 5px 13px;
  border: 1px solid var(--hairline-strong); border-radius: 9px;
  background: var(--canvas);
  font-size: 14px; font-weight: 600; letter-spacing: -0.006em; line-height: 1;
  margin-bottom: 20px;
}
.fs-root .uc-badge .uc-pre { color: var(--muted); font-weight: 500; }
.fs-root .uc-badge .uc-name {
  display: inline-flex; align-items: center; padding: 5px 11px;
  border-radius: 6px;
  background: var(--uc-tint, var(--tint-fern));
  color: var(--uc-accent, var(--fern-ink));
}

/* Uniform soft ground on use-case pages: no section carries its own fill, so
   the whole page reads as one continuous surface. Section bands are dropped;
   the cards that used to rely on a darker band for contrast become white
   surfaces floating on the soft ground instead. Scoped to .fs-garden so the
   white-page main landing keeps its soft-gray sections and cards. */
.fs-root.fs-garden .section-soft { background: transparent; }
.fs-root.fs-garden .show-card {
  background: var(--canvas);
}
/* Ways-to-publish sits in a white card floating on the soft garden ground —
   flat fill only, matching the README's borderless/shadowless card model */
.fs-root.fs-garden .publish-card,
.fs-root.lp-blog .publish-card,
.fs-root.lp-wiki .publish-card,
.fs-root.lp-docs .publish-card,
.fs-root.lp-data-stories .publish-card {
  background: var(--canvas);
  border-radius: 24px;
  padding: clamp(32px, 5vw, 56px);
}

/* ---- Feature rows — white cards with a colored mockup panel (Clay-style) ----
   Each feature is a white card: copy on one side, and on the other a soft
   colored inner panel that holds a hand-built UI mockup (not a screenshot),
   sides swapping per row. Every mockup colour derives from three per-card
   accent vars — --feat-strong (text/icons), --feat-bright (fills), --feat-tint
   (soft washes) — so a card recolours by swapping just those three. The f-*
   modifier classes alternate the theme's two brand accents: berry (pink) and
   gold (yellow). Lighter shades come from color-mix, mirroring .ft-ico below.
   The card itself is NOT a link — a small "Learn more" link lives in the copy. */
.fs-root .uc-features { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 30px); }
.fs-root .uc-feature {
  --feat-strong: var(--berry-ink);
  --feat-bright: var(--berry);
  --feat-tint: var(--tint-berry);
  display: flex; align-items: stretch; gap: clamp(8px, 1.4vw, 20px);
  background: var(--canvas); border-radius: 28px;
  padding: clamp(12px, 1.4vw, 18px); overflow: hidden;
}
/* Per-card accent themes — alternate pink / yellow down the stack */
.fs-root .f-graph, .fs-root .f-wikilinks {
  --feat-strong: var(--berry-ink); --feat-bright: var(--berry); --feat-tint: var(--tint-berry);
}
.fs-root .f-backlinks, .fs-root .f-search {
  --feat-strong: var(--gold-eyebrow); --feat-bright: var(--card-yellow); --feat-tint: var(--tint-lemon);
}
.fs-root .uc-feature:nth-child(even) { flex-direction: row-reverse; }
.fs-root .uc-feature > * { flex: 1 1 0; min-width: 0; }
.fs-root .uc-feature-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(20px, 3vw, 42px);
}
.fs-root .uc-feature-text h3 {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.12;
  letter-spacing: -0.028em; color: var(--ink);
}
.fs-root .uc-feature-text p {
  margin-top: 16px; color: var(--muted); font-size: 1.075rem; line-height: 1.62; max-width: 42ch;
}
.fs-root .uc-feature-text code {
  font-family: var(--mono); font-size: .88em; color: var(--feat-strong);
  background: var(--surface-card); border-radius: 5px; padding: 1px 6px;
}
.fs-root .uc-feature-text .learn { margin-top: 24px; color: var(--feat-strong); }
/* Keep the Learn-more hover on the card's own accent, not the shared berry
   hover from the .learn rules above */
.fs-root .uc-feature:hover .learn, .fs-root .uc-feature-text .learn:hover { color: var(--feat-strong); }
.fs-root .uc-feature-media {
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(280px, 27vw, 360px); border-radius: 20px;
  padding: clamp(24px, 3vw, 44px);
  /* Deeper, more saturated tint than before (was 32%), with a monochrome
     film-grain overlay. Grain is an inline feTurbulence SVG (no /assets url() —
     those 404 in this pipeline) blended via overlay so it modulates the hue
     rather than washing it toward grey. */
  background-color: color-mix(in srgb, var(--feat-bright) 50%, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 160px 160px; background-repeat: repeat;
  background-blend-mode: overlay;
}
/* Floating mockup panel shared by all four cards */
.fs-root .mock {
  width: 100%; max-width: 440px; background: var(--canvas); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .06), 0 5px 14px -8px rgba(17, 17, 17, .16);
  border: 1px solid color-mix(in srgb, var(--canvas) 70%, transparent); overflow: hidden;
}
/* 1. Knowledge graph — all fills/strokes come from CSS so they use theme vars */
.fs-root .mk-graph { padding: 8px; }
.fs-root .mk-graph svg { width: 100%; height: auto; display: block; }
.fs-root .mk-graph .g-edges line { stroke: color-mix(in srgb, var(--feat-bright) 58%, #fff); stroke-width: 1.4; stroke-linecap: round; }
.fs-root .mk-graph .g-dot { fill: color-mix(in srgb, var(--feat-bright) 82%, #fff); }
.fs-root .mk-graph .g-dot-sm { fill: color-mix(in srgb, var(--feat-bright) 60%, #fff); }
.fs-root .mk-graph .g-node { fill: var(--canvas); stroke: var(--feat-bright); stroke-width: 2; }
.fs-root .mk-graph .g-hub { fill: var(--feat-bright); }
.fs-root .mk-graph .g-hub-ring { fill: none; stroke: var(--feat-strong); stroke-width: 1.5; opacity: .6; }
.fs-root .mk-graph .g-lbl { fill: var(--feat-strong); font-size: 11px; font-weight: 600; text-anchor: middle; letter-spacing: -0.01em; }
.fs-root .mk-graph .g-lbl-c { fill: var(--canvas); font-size: 10px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
/* 2. Backlinks */
.fs-root .mk-back { padding: 18px 18px 20px; }
.fs-root .mk-back .note-title { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.fs-root .mk-back .note-sub { margin-top: 3px; font-size: 12px; color: var(--muted-soft); }
.fs-root .mk-back .bl-head { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.fs-root .mk-back .bl-head svg { width: 15px; height: 15px; color: var(--feat-strong); }
.fs-root .mk-back .bl-head .bl-lbl { font-size: 12.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.fs-root .mk-back .bl-count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--feat-strong); background: color-mix(in srgb, var(--feat-bright) 40%, #fff); border-radius: 999px; padding: 2px 9px; }
/* Flowershow backlinks are plain links to referencing pages — no context
   snippets — so each reference is a single link row, not a card with excerpt. */
.fs-root .mk-back .bl-link { display: flex; align-items: center; margin-top: 8px; padding: 9px 12px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface-soft); }
.fs-root .mk-back .bl-link span { font-size: 12.5px; font-weight: 600; color: var(--feat-strong); border-bottom: 1.5px solid color-mix(in srgb, var(--feat-strong) 30%, transparent); }
/* 3. Wikilinks */
.fs-root .mk-wiki { padding: 20px; }
.fs-root .mk-wiki .wk-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-soft); }
.fs-root .mk-wiki .wk-editor { margin-top: 9px; padding: 14px 16px; background: var(--ink); border-radius: 11px; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: color-mix(in srgb, var(--surface-card) 88%, transparent); }
.fs-root .mk-wiki .tok-b { color: color-mix(in srgb, var(--feat-bright) 82%, #fff); }
.fs-root .mk-wiki .tok-l { color: var(--canvas); }
.fs-root .mk-wiki .wk-arrow { display: flex; justify-content: center; margin: 12px 0; }
.fs-root .mk-wiki .wk-arrow svg { width: 22px; height: 22px; color: var(--feat-strong); }
.fs-root .mk-wiki .wk-rendered { padding: 15px 16px; background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: 11px; font-size: 13.5px; line-height: 1.65; color: var(--body); }
.fs-root .mk-wiki .wk-rendered a { color: var(--feat-strong); text-decoration: none; font-weight: 600; border-bottom: 1.5px solid color-mix(in srgb, var(--feat-strong) 34%, transparent); }
.fs-root .mk-wiki .wk-rendered a:hover { border-bottom-color: var(--feat-strong); }
/* 4. Full-text search */
.fs-root .mk-search { padding: 18px; }
.fs-root .mk-search .se-box { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border: 1.5px solid var(--hairline-strong); border-radius: 12px; background: var(--canvas); box-shadow: 0 0 0 4px color-mix(in srgb, var(--feat-bright) 26%, #fff); }
.fs-root .mk-search .se-box svg { width: 17px; height: 17px; color: var(--feat-strong); flex: none; }
.fs-root .mk-search .se-q { font-size: 14px; color: var(--ink); font-weight: 500; }
.fs-root .mk-search .caret { display: inline-block; width: 1.5px; height: 16px; background: var(--feat-strong); margin-left: 1px; vertical-align: -3px; animation: se-blink 1.1s steps(1) infinite; }
@keyframes se-blink { 50% { opacity: 0; } }
.fs-root .mk-search .se-kbd { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted-soft); border: 1px solid var(--hairline-strong); border-radius: 5px; padding: 2px 6px; }
.fs-root .mk-search .se-results { margin-top: 10px; border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; background: var(--canvas); }
.fs-root .mk-search .se-row { display: flex; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--hairline); }
.fs-root .mk-search .se-row:last-child { border-bottom: none; }
.fs-root .mk-search .se-row.on { background: color-mix(in srgb, var(--feat-bright) 24%, #fff); }
.fs-root .mk-search .se-ic { width: 26px; height: 26px; flex: none; border-radius: 7px; background: color-mix(in srgb, var(--feat-bright) 34%, #fff); color: var(--feat-strong); display: flex; align-items: center; justify-content: center; }
.fs-root .mk-search .se-ic svg { width: 14px; height: 14px; }
.fs-root .mk-search .st-t { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.fs-root .mk-search .st-s { margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.fs-root .mk-search .st-s mark { background: color-mix(in srgb, var(--feat-bright) 50%, #fff); color: var(--feat-strong); border-radius: 3px; padding: 0 3px; font-weight: 600; }
@media (max-width: 860px) {
  .fs-root .uc-feature, .fs-root .uc-feature:nth-child(even) { flex-direction: column; align-items: stretch; }
  /* In the stacked layout the flex main axis is vertical, so the row layout's
     `flex: 1 1 0` (for equal column widths) would collapse each child's height
     and let the taller mock spill out of its panel. Reset to natural height. */
  .fs-root .uc-feature > * { flex: 0 0 auto; }
}

/* Gardens re-tints the shared feature-icon chip from berry to fern */
.fs-root.fs-garden .ft-ico { color: var(--fern-ink); background: color-mix(in srgb, var(--bright-fern) 13%, #fff); }

/* Numbered steps — circled index + title + copy, three across */
.fs-root .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 40px); }
.fs-root .step { display: flex; flex-direction: column; align-items: flex-start; }
.fs-root .step-num {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem;
  color: var(--fern-ink); background: var(--tint-fern);
}
.fs-root .step h3 { margin-top: 18px; }
.fs-root .step p { margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.55; }

/* Feature visuals that carry a real screenshot rather than a CSS mockup — the
   tile's .ft-vis already masks the bottom edge, so the shot bleeds in. */
.fs-root .ft-vis .shot {
  width: 100%; border-radius: 12px 12px 0 0;
  border: 1px solid var(--hairline-strong); border-bottom: none; display: block;
}
/* Wide feature tile — spans both columns for the hero feature (the graph) */
.fs-root .feature-tile.wide { grid-column: 1 / -1; }

/* Concept cards — emoji + title + copy, filled soft cards, three across */
.fs-root .concept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fs-root .concept-card { background: var(--surface-soft); border-radius: 20px; padding: 28px; }
.fs-root .concept-card .ic { font-size: 1.6rem; }
.fs-root .concept-card h3 { margin-top: 16px; }
.fs-root .concept-card p { margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.55; }

/* Icon feature list — the split "Make it yours" section */
.fs-root .feature-list { margin: 32px 0 0; display: flex; flex-direction: column; gap: 22px; }
.fs-root .feature-list .fl-item { position: relative; padding-left: 40px; font-size: 16px; color: var(--muted); line-height: 1.55; }
.fs-root .feature-list .fl-ico { position: absolute; left: 0; top: 1px; color: var(--fern-ink); }
.fs-root .feature-list .fl-ico svg { width: 22px; height: 22px; display: block; }
.fs-root .feature-list b { color: var(--ink); font-weight: 600; }

/* Split media frame — the mockup shot beside "Make it yours" */
.fs-root .split-media {
  border-radius: 16px; overflow: hidden; border: 1px solid var(--hairline);
  box-shadow: 0 1px 2px rgba(17,13,15,.04), 0 30px 70px -28px rgba(17,13,15,.30);
  aspect-ratio: 16 / 10;
}
.fs-root .split-media img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* Callout band — centered card promoting the Obsidian Publish comparison */
.fs-root .callout {
  max-width: 900px; margin: 0 auto; text-align: center;
  background: var(--tint-fern); border-radius: 20px;
  padding: clamp(32px, 5vw, 48px) 32px;
}
.fs-root .callout h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.fs-root .callout p { margin: 14px auto 26px; max-width: 52ch; color: var(--body); font-size: 1.05rem; line-height: 1.55; }

/* Final CTA — Gardens green variant of the shared .final-card */
.fs-root .final-card.garden { background: var(--black-forest); }

@media (max-width: 760px) {
  .fs-root .feature-tile.wide { grid-column: auto; }
  .fs-root .concept-grid { grid-template-columns: 1fr; }
}
@media (max-width: 940px) {
  .fs-root .steps { grid-template-columns: 1fr; gap: 24px; }
}

/* ==========================================================================
   Blogs landing — /uses/blogs
   --------------------------------------------------------------------------
   Reuses the shared landing kit (.hero, .wf-grid, .publish-grid, .faq-grid,
   .show-grid, .final-card) on a plain white .fs-root page with the default
   berry accent — so it reads as the same product as the home + gardens pages.
   The one component the kit lacks is the bento feature grid, defined below.
   Page-scoped overrides under `.lp-blog` re-tint the few pieces the kit
   defaults to the Gardens fern (the uc-badge chip, the feature-list icons)
   back to berry.
   ========================================================================== */

/* Berry headline accent — blog counterpart to .accent-fern */
.fs-root .accent-berry { color: var(--berry); }

/* Soft page ground — like the gardens page, the whole blog page sits on
   surface-soft and section bands go transparent, so cards (bento tiles, wf
   cards) read as white surfaces floating on one continuous soft ground. */
.fs-root.lp-blog { background: var(--surface-soft); }
.fs-root.lp-blog .section-soft { background: transparent; }

/* Re-tint gardens-default-fern pieces to berry on the blog page */
.fs-root.lp-blog .uc-badge .uc-name { background: var(--tint-berry); color: var(--berry-ink); }
.fs-root.lp-blog .feature-list .fl-ico { color: var(--berry-ink); }

/* Publish-copy sub-line under the heading */
.fs-root .publish-copy .pc-sub { margin-top: 16px; color: var(--muted); font-size: 1.05rem; line-height: 1.55; }

/* Split section — "Make it yours": copy beside a framed media shot */
.fs-root .split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 72px); align-items: center; }
.fs-root .split-copy { max-width: 46ch; }
.fs-root .split-copy h2 { margin-top: 4px; }
.fs-root .split-copy .lede { margin-top: 16px; color: var(--muted); }
.fs-root .split-copy .split-cta { margin-top: 30px; }
.fs-root .split-copy .split-note { margin-top: 16px; font-size: 13px; color: var(--muted-soft); }

/* ---- Bento feature grid ----
   The asymmetric 6-column tiling kept from the original blog page, restyled
   into the kit's rounded cards: a big blog-index tile on the left, search +
   comments stacked on the right, and a newsletter strip across the bottom.
   Each card is white with a hairline border so it lifts off the soft section
   band; media panels carry a brand-tinted fill behind an inset screenshot. */
.fs-root .bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "idx idx idx idx sch sch"
    "idx idx idx idx sch sch"
    "idx idx idx idx cmt cmt"
    "nws nws nws nws cmt cmt";
  gap: 16px;
}
.fs-root .bento-card { display: flex; flex-direction: column; overflow: hidden; background: var(--canvas); border-radius: 20px; }
.fs-root .bento-index    { grid-area: idx; }
.fs-root .bento-search   { grid-area: sch; }
.fs-root .bento-comments { grid-area: cmt; }
.fs-root .bento-news     { grid-area: nws; }
/* Grainy colored panels — same monochrome feTurbulence overlay the gardens
   feature cards use (.uc-feature-media): a repeating noise SVG blended over
   the solid fill so the color reads textured rather than flat. */
.fs-root .bento-media {
  position: relative; flex: 1; min-height: 16rem; overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 160px 160px; background-repeat: repeat;
  background-blend-mode: overlay;
}
.fs-root .bento-index .bento-media { min-height: 20rem; }
.fs-root .bento-media.bg-berry { background-color: var(--berry-blush); }
.fs-root .bento-media.bg-lemon { background-color: var(--card-yellow); }
.fs-root .bento-media.bg-soft  { background-color: var(--surface-card); }
.fs-root .bento-media img { position: absolute; left: 32px; top: 32px; width: 100%; height: 100%; object-fit: cover; object-position: left top; border-top-left-radius: 12px; }
.fs-root .bento-body { padding: 26px 28px 28px; }
.fs-root .bento-body h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }
.fs-root .bento-body p { margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.55; max-width: 48ch; }
.fs-root .bento-body .ft-learn { margin-top: 16px; }
/* Whole-card hover drives the Learn-more link (color, underline, arrow) */
.fs-root .bento-card:hover .ft-learn { color: var(--berry-ink); }
.fs-root .bento-card:hover .ft-learn .lm-txt::after { transform: scaleX(1); }
.fs-root .bento-card:hover .ft-learn .arw { transform: translateX(3px); }
.fs-root .bento-tag { display: inline-block; margin-bottom: 12px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); background: var(--surface-card); border-radius: 999px; padding: 4px 10px; }

/* Single centered showcase card (the dogfood "Flowershow blog") */
.fs-root .show-grid.one { grid-template-columns: minmax(0, 520px); justify-content: center; }

@media (max-width: 940px) {
  .fs-root .split-grid { grid-template-columns: 1fr; gap: 32px; align-items: start; }
}
@media (max-width: 860px) {
  .fs-root .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "idx idx"
      "sch cmt"
      "nws nws";
  }
  .fs-root .bento-index .bento-media { min-height: 16rem; }
}
@media (max-width: 560px) {
  .fs-root .bento {
    grid-template-columns: 1fr;
    grid-template-areas: "idx" "sch" "cmt" "nws";
  }
}

/* ==========================================================================
   Wikis landing — /uses/wikis
   --------------------------------------------------------------------------
   Same shared kit + bento feature grid as the blogs page, but scoped under
   `.lp-wiki` and tinted to the deep-berry accent (--berry-ink) reserved for
   the wiki use-case (see .use-wiki / .sc-wiki). The blog bento inset a
   screenshot per tile; the wiki has none, so its media panels instead centre
   the hand-built CSS mockups (nav tree, search, wiki links) over a soft
   deep-berry wash + grain, recoloured through the shared --feat-* vars.
   ========================================================================== */

/* Soft page ground — matches blogs/gardens: whole page on surface-soft, section
   bands transparent, so bento cards read as white surfaces floating on it. */
.fs-root.lp-wiki { background: var(--surface-soft); }
.fs-root.lp-wiki .section-soft { background: transparent; }

/* Re-tint the gardens-default-fern kit pieces to deep berry on the wiki page */
.fs-root.lp-wiki .uc-badge .uc-name { background: var(--tint-berry); color: var(--berry-ink); }
.fs-root.lp-wiki .eyebrow { color: var(--berry-ink); }

/* Deep-berry theme for the bento mockups — the mk-* mocks derive every colour
   from these three vars (mirrors the gardens .uc-feature accent triplet). */
.fs-root.lp-wiki .bento {
  --feat-strong: var(--berry-ink);
  --feat-bright: var(--berry-blush);
  --feat-tint: var(--tint-berry);
  /* Only three tiles here (search + wiki-links side by side, GitHub-Wiki strip
     below) — override the blog grid, which reserves a big `idx` tile we removed. */
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "sch cmt"
    "nws nws";
}
/* Mock-holding panel — unlike the blog panels (which inset a screenshot), these
   centre a floating white .mock over a soft deep-berry wash. The grain SVG +
   blend from the base .bento-media rule still applies underneath. */
.fs-root.lp-wiki .bento-media.is-mock {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 3.4vw, 38px);
  background-color: color-mix(in srgb, var(--berry-ink) 24%, #fff);
}
.fs-root.lp-wiki .bento-media.is-mock .mock { max-width: 380px; }
/* Whole-card hover accent → deep berry */
.fs-root.lp-wiki .bento-card:hover .ft-learn { color: var(--berry-ink); }
/* Deep-berry variant of the corner tag for the text strip */
.fs-root.lp-wiki .bento-tag.alt { color: var(--berry-ink); background: var(--tint-berry); }
/* Wiki-links mock is shown label-less and arrow-less here — restore the gap the
   arrow used to give between the raw editor row and the rendered row. */
.fs-root.lp-wiki .mk-wiki .wk-rendered { margin-top: 12px; }
/* Stack the two mock tiles on narrow screens */
@media (max-width: 560px) {
  .fs-root.lp-wiki .bento {
    grid-template-columns: 1fr;
    grid-template-areas: "sch" "cmt" "nws";
  }
}

/* ==========================================================================
   Docs landing — /uses/docs
   --------------------------------------------------------------------------
   Same shared kit + bento feature grid as the blogs page, but scoped under
   `.lp-docs` and tinted to the GOLD accent reserved for the docs use-case
   (see .use-docs / .sc-docs). Like blogs (and unlike wikis, which had no
   screenshots), the docs bento insets real screenshots per tile, over
   gold-family fills: bright card-yellow on the hero navigation tile, a soft
   lemon wash on search, neutral surface on the rest.
   ========================================================================== */

/* Soft page ground — matches blogs/wikis: whole page on surface-soft, section
   bands transparent, so bento cards read as white surfaces floating on it. */
.fs-root.lp-docs { background: var(--surface-soft); }
.fs-root.lp-docs .section-soft { background: transparent; }

/* Re-tint the gardens-default-fern kit pieces to gold on the docs page */
.fs-root.lp-docs .uc-badge .uc-name { background: var(--tint-lemon); color: var(--gold-eyebrow); }
.fs-root.lp-docs .eyebrow { color: var(--gold-eyebrow); }

/* Gold in-card link hover — the kit defaults these to berry; docs is gold */
.fs-root.lp-docs .wf-card:hover .wf-learn,
.fs-root.lp-docs .textlink:hover,
.fs-root.lp-docs .bento-card:hover .ft-learn,
.fs-root.lp-docs .ft-learn:hover { color: var(--gold-eyebrow); }

/* Soft-gold media fill — a lemon wash between the bright card-yellow (bg-lemon,
   already defined) and the neutral bg-soft, so the tiles read as one gold family */
.fs-root.lp-docs .bento-media.bg-lemon-soft { background-color: var(--tint-lemon); }

/* Deep-gold corner tag for the "no build pipeline" text strip */
.fs-root.lp-docs .bento-tag.alt { color: var(--gold-eyebrow); background: var(--tint-lemon); }

/* ==========================================================================
   Data Stories landing — /uses/data-stories
   --------------------------------------------------------------------------
   Same shared kit + gardens-style .uc-feature rows (white card, copy on one
   side, a colored inner panel on the other), scoped under `.lp-data-stories`
   and tinted to the TEAL accent reserved for this use-case (docs owns gold).
   Unlike gardens — whose panels hold hand-built SVG mockups — each panel here
   holds a REAL Flowershow data component (this page is .mdx, so the live
   <FlatUiTable>/<LineChart>/<PlotlyBarChart> render as the showcase media).
   The .dv-panel wrapper replaces the fixed-width .mock: data viz needs room,
   so it grows to fill the media panel instead of capping at 440px.
   ========================================================================== */

/* Soft page ground — matches the family: whole page on surface-soft, section
   bands transparent, so feature cards read as white surfaces floating on it. */
.fs-root.lp-data-stories { background: var(--surface-soft); }
.fs-root.lp-data-stories .section-soft { background: transparent; }

/* Re-tint the gardens-default-fern kit pieces to teal on this page */
.fs-root.lp-data-stories .uc-badge .uc-name { background: var(--tint-teal); color: var(--teal-ink); }
.fs-root.lp-data-stories .eyebrow { color: var(--teal-ink); }

/* Teal in-card link hover — the kit defaults these to berry; here it's teal */
.fs-root.lp-data-stories .wf-card:hover .wf-learn,
.fs-root.lp-data-stories .textlink:hover,
.fs-root.lp-data-stories .dv-feature:hover .learn,
.fs-root.lp-data-stories .dv-copy .learn:hover { color: var(--teal-ink); }

/* Stacked feature cards — copy header on top, the live component spanning the
   FULL card width below. Data viz (especially the 8-column table and the
   time-series charts) needs the whole width, so unlike the gardens side-by-side
   .uc-feature rows these stack vertically. The teal --feat-* triplet drives the
   tinted media panel fill + the film-grain, mirroring the gardens accent vars. */
.fs-root.lp-data-stories .dv-feature {
  --feat-strong: var(--teal-ink);
  --feat-bright: var(--teal);
  --feat-tint: var(--tint-teal);
  background: var(--canvas); border-radius: 28px;
  padding: clamp(16px, 1.8vw, 24px); overflow: hidden;
}
/* Header row: copy on the left, the one-line MDX snippet on the right. Wraps to
   a single column on narrow screens (see the 720px query below). */
.fs-root.lp-data-stories .dv-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(18px, 3vw, 44px); flex-wrap: wrap;
  padding: clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px) clamp(20px, 2vw, 26px);
}
.fs-root.lp-data-stories .dv-copy { flex: 1 1 360px; min-width: 0; }
.fs-root.lp-data-stories .dv-copy h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.12;
  letter-spacing: -0.028em; color: var(--ink);
}
.fs-root.lp-data-stories .dv-copy p {
  margin-top: 14px; color: var(--muted); font-size: 1.075rem; line-height: 1.6; max-width: 60ch;
}
.fs-root.lp-data-stories .dv-copy .learn { margin-top: 18px; color: var(--teal-ink); }
/* One-line MDX snippet — plain mono card, sits to the right of the copy */
.fs-root.lp-data-stories .dv-code {
  flex: 0 1 400px; margin: 4px 0 0; font-family: var(--mono);
  font-size: 12.5px; line-height: 1.65; color: var(--body);
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 14px 16px; overflow-x: auto;
  white-space: pre; tab-size: 2;
}
/* Full-width tinted media panel — same teal fill + film-grain as the gardens
   .uc-feature-media (grain is an inline feTurbulence SVG; no /assets url()). */
.fs-root.lp-data-stories .dv-media {
  display: flex; justify-content: center; border-radius: 20px;
  padding: clamp(16px, 2.4vw, 34px);
  background-color: color-mix(in srgb, var(--feat-bright) 50%, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 160px 160px; background-repeat: repeat;
  background-blend-mode: overlay;
}
/* White card holding the live chart/table — fills the panel width */
.fs-root.lp-data-stories .dv-panel {
  width: 100%; background: var(--canvas); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .06), 0 5px 14px -8px rgba(17, 17, 17, .16);
  border: 1px solid color-mix(in srgb, var(--canvas) 70%, transparent);
  padding: clamp(14px, 1.6vw, 22px); overflow: auto;
}
.fs-root.lp-data-stories .dv-panel table { width: 100%; }
.fs-root.lp-data-stories .dv-panel :where(svg, canvas, img) { max-width: 100%; }
/* Snippet drops full-width below the copy on narrow screens */
@media (max-width: 720px) {
  .fs-root.lp-data-stories .dv-code { flex-basis: 100%; }
}

/* ==========================================================================
   CLI landing — /cli
   --------------------------------------------------------------------------
   Reuses the shared landing kit (.hero, .section, .section-head, .steps,
   .concept-grid, .demo-media, .final-card) on a plain white .fs-root page with
   the default berry accent — so it reads as the same product as the home page.
   The one bespoke component is the terminal mockup (.term) that stands in for
   the hero screenshot. Page-scoped overrides under `.lp-cli` re-tint the couple
   of kit pieces that default to the Gardens fern (the .pill chip, the .step-num
   index) back to berry, and lay the steps/concepts out two-up.
   ========================================================================== */

/* Re-tint gardens-default-fern kit pieces to berry on the CLI page */
.fs-root.lp-cli .pill { color: var(--berry-ink); background: var(--tint-berry); }
.fs-root.lp-cli .pill:hover { background: color-mix(in srgb, var(--berry-blush) 20%, #fff); }
.fs-root.lp-cli .step-num { color: var(--berry-ink); background: var(--tint-berry); }

/* Inline code in prose — mono chip in the berry accent */
.fs-root.lp-cli .concept-card code, .fs-root.lp-cli .section-head code {
  font-family: var(--mono); font-size: .88em; color: var(--berry-ink);
  background: var(--surface-card); border-radius: 5px; padding: 1px 6px;
}

/* Two-up steps and concept cards (the kit defaults to three across) */
.fs-root.lp-cli .cli-steps { grid-template-columns: repeat(3, 1fr); max-width: 1040px; margin: 0 auto; }
.fs-root.lp-cli .cli-steps .step { align-items: stretch; }
.fs-root.lp-cli .cli-steps .cmd-line { margin-top: 16px; overflow-wrap: anywhere; }
.fs-root.lp-cli .concept-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) {
  .fs-root.lp-cli .cli-steps, .fs-root.lp-cli .concept-grid { grid-template-columns: 1fr; }
}

/* Terminal mockup — dark card with a traffic-light bar and mono body. Stands in
   for the hero screenshot; also the language the .cmd-line command chips speak. */
.fs-root .hero-media-term { width: 100%; }
.fs-root .term {
  background: var(--surface-dark); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(17,13,15,.06), 0 30px 70px -28px rgba(17,13,15,.45);
  font-family: var(--mono); text-align: left;
}
.fs-root .term-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: var(--surface-dark-elevated);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.fs-root .term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a352f; }
.fs-root .term-bar .term-title { margin-left: 6px; font-size: 12px; color: var(--on-dark-soft); letter-spacing: .01em; }
.fs-root .term-body { padding: 20px 22px 24px; font-size: 13.5px; line-height: 1.85; color: var(--on-dark-soft); }
.fs-root .term-body .ln { white-space: pre-wrap; }
.fs-root .term-body .cmd { color: var(--on-dark); }
.fs-root .term-body .cmd::before { content: "$ "; color: var(--berry); }
.fs-root .term-body .ok { color: var(--bright-fern); }
.fs-root .term-body .muted { color: var(--muted-soft); }
.fs-root .term-body .url { color: var(--on-dark); font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.28); }

/* Command chip — a single dark terminal line for the numbered steps */
.fs-root .cmd-line {
  font-family: var(--mono); font-size: 13px; color: var(--on-dark);
  background: var(--surface-dark); border-radius: 10px; padding: 12px 15px;
}
.fs-root .cmd-line::before { content: "$ "; color: var(--berry); }

/* ==========================================================================
   AI landing — /publish-with-ai
   --------------------------------------------------------------------------
   Reuses the shared landing kit (.hero, .section, .steps, .concept-grid,
   .faq-grid, .final-card) with the default berry accent, like /cli. Borrows
   the home page's agent chat mockup (.vis-agent / .chat / .msg) as the hero
   visual and the .cmd-line chip from /cli. Adds a .prompt-line chip (a chat
   prompt, not a shell command) and the agent icon row.
   ========================================================================== */

/* Re-tint gardens-default-fern kit pieces to berry */
.fs-root.lp-ai .pill { color: var(--berry-ink); background: var(--tint-berry); }
.fs-root.lp-ai .step-num { color: var(--berry-ink); background: var(--tint-berry); }

/* Inline code in prose — mono chip in the berry accent (same as /cli) */
.fs-root.lp-ai .concept-card code, .fs-root.lp-ai .section-head code, .fs-root.lp-ai .faq-item code {
  font-family: var(--mono); font-size: .88em; color: var(--berry-ink);
  background: var(--surface-card); border-radius: 5px; padding: 1px 6px;
}

/* Hero visual — the agent chat mockup, sized up from its home-page tile */
.fs-root .hero-media-agent { width: 100%; max-width: 520px; justify-self: center; }
.fs-root.lp-ai .hero-media-agent .vis-agent { padding: 20px; box-shadow: 0 1px 2px rgba(17,13,15,.06), 0 30px 70px -28px rgba(17,13,15,.25); }
.fs-root.lp-ai .hero-media-agent .msg { font-size: 14px; }
.fs-root.lp-ai .hero-media-agent .msg.bot .step { font-size: 12.5px; overflow-wrap: anywhere; }

/* Steps — three across, commands/prompts stretch full width */
.fs-root.lp-ai .ai-steps { grid-template-columns: repeat(3, 1fr); }
.fs-root.lp-ai .ai-steps .step { align-items: stretch; }
.fs-root.lp-ai .ai-steps .cmd-line, .fs-root.lp-ai .ai-steps .prompt-line { margin-top: 16px; overflow-wrap: anywhere; }
.fs-root.lp-ai .cmd-line.url-line::before { content: none; } /* a URL, not a shell command: no "$ " */

/* Prompt chip — what you say to the agent (light, quoted) vs .cmd-line (dark, shell) */
.fs-root .prompt-line {
  font-size: 14px; color: var(--ink); background: var(--canvas);
  border: 1px solid var(--hairline-strong); border-radius: 10px; padding: 12px 15px;
}
.fs-root .prompt-line::before { content: "› "; color: var(--berry); font-weight: 700; }

/* Concept grids — two-up by default, three-up for use cases */
.fs-root.lp-ai .concept-grid { grid-template-columns: repeat(2, 1fr); }
.fs-root.lp-ai .concept-grid.ai-uses { grid-template-columns: repeat(3, 1fr); }

/* Agent icon row */
.fs-root.lp-ai .agent-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.fs-root.lp-ai .agent-row .pa-icons { display: inline-flex; align-items: center; gap: 14px; }
.fs-root.lp-ai .agent-row .pa-icons svg { display: block; width: 32px; height: 32px; }
.fs-root.lp-ai .agent-row .agent-names { color: var(--muted); font-size: 16px; text-align: center; }

@media (max-width: 900px) {
  .fs-root.lp-ai .ai-steps, .fs-root.lp-ai .concept-grid.ai-uses { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .fs-root.lp-ai .concept-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Obsidian landing — /publish-obsidian
   --------------------------------------------------------------------------
   Reuses the shared landing kit (.hero, .section, .steps, .concept-grid,
   .demo-media, .split-grid, .show-grid, .final-card) on a plain white .fs-root
   page, scoped under `.lp-obsidian` and tinted to the OBSIDIAN violet accent
   the design tokens reserve for this page (--obsidian / --obsidian-ink /
   --tint-obsidian). Like the other landing pages it re-tints the kit pieces
   that default to the Gardens fern (the .pill chip, the .step-num index, the
   .eyebrow) to violet. The one bespoke component is the .cmp comparison table
   — this page's "Obsidian Publish alternative" section has no kit equivalent.
   ========================================================================== */

/* Violet headline accent — obsidian counterpart to .accent-fern / .accent-berry */
.fs-root .accent-obsidian { color: var(--obsidian-ink); }

/* Re-tint gardens-default-fern kit pieces to violet on the obsidian page */
.fs-root.lp-obsidian .eyebrow { color: var(--obsidian-ink); }
.fs-root.lp-obsidian .step-num { color: var(--obsidian-ink); background: var(--tint-obsidian); }

/* Violet in-card link hover — the kit defaults these to berry; here it's violet */
.fs-root.lp-obsidian .textlink:hover,
.fs-root.lp-obsidian .show-card:hover .show-link,
.fs-root.lp-obsidian .show-link:hover { color: var(--obsidian-ink); }

/* Inline code in prose — mono chip in the violet accent */
.fs-root.lp-obsidian .concept-card code, .fs-root.lp-obsidian .section-head code {
  font-family: var(--mono); font-size: .88em; color: var(--obsidian-ink);
  background: var(--surface-card); border-radius: 5px; padding: 1px 6px;
}

/* ---- Comparison table — Flowershow vs Obsidian Publish vs self-hosted ----
   No kit equivalent, so a small bespoke component: a borderless table with
   hairline row rules and the Flowershow column washed in soft violet (its
   header rounds at the top, its last cell at the bottom) to read as the pick.
   Wrapped in .cmp-wrap so it scrolls horizontally on narrow screens rather
   than breaking the page's own layout. */
.fs-root .cmp-wrap { max-width: 880px; margin: 0 auto; overflow-x: auto; }
.fs-root .cmp { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 660px; }
.fs-root .cmp th, .fs-root .cmp td { padding: 14px 18px; text-align: center; vertical-align: middle; }
.fs-root .cmp thead th {
  font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--muted);
  letter-spacing: -0.01em; padding-top: 10px; padding-bottom: 16px;
}
.fs-root .cmp tbody tr { border-top: 1px solid var(--hairline); }
.fs-root .cmp tbody td { color: var(--muted); font-weight: 500; }
.fs-root .cmp tbody td:first-child, .fs-root .cmp thead th:first-child {
  text-align: left; color: var(--body); font-weight: 600;
}
/* Highlighted Flowershow column — soft violet wash running top to bottom */
.fs-root .cmp .col-fs { background: var(--tint-obsidian); color: var(--obsidian-ink); font-weight: 700; }
.fs-root .cmp thead th.col-fs { border-radius: 12px 12px 0 0; }
.fs-root .cmp tbody tr:last-child td.col-fs { border-radius: 0 0 12px 12px; }
.fs-root .cmp-note { margin: 22px auto 0; max-width: 880px; text-align: center; font-size: 14px; color: var(--muted-soft); }

/* ==========================================================================
   Pricing page — plan cards + feature comparison
   --------------------------------------------------------------------------
   Reuses the shared landing kit (.section, .section-head, .eyebrow, .btn,
   .cmp comparison table, .final-card) on a plain white .fs-root page scoped
   under `.lp-pricing`. The only bespoke pieces are the plan cards
   (.price-grid / .price-card) and the wide Custom banner (.price-custom) —
   the kit has no tier-card equivalent. The comparison table is the shared
   .cmp component, re-tinted from its default obsidian violet to the berry
   accent this page uses for its featured plan.
   ========================================================================== */

/* Plan cards — Free + Premium side by side, Custom banner spans below */
.fs-root .price-grid {
  max-width: 940px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
.fs-root .price-card {
  display: flex; flex-direction: column;
  background: var(--canvas); border: 1px solid var(--hairline-strong);
  border-radius: 20px; padding: 32px;
}
/* Featured (Premium) — berry ring so it reads as the pick */
.fs-root .price-card.featured {
  border-color: var(--berry);
  box-shadow: 0 0 0 1px var(--berry), 0 30px 60px -40px rgba(171, 58, 118, .45);
}
.fs-root .price-name {
  font-family: var(--sans); font-weight: 700; font-size: 12px;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--berry);
  display: flex; align-items: center; gap: 10px;
}
.fs-root .price-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--berry); padding: 3px 10px; border-radius: 999px;
}
.fs-root .price-cost { display: flex; align-items: baseline; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.fs-root .price-amount { font-family: var(--sans); font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.fs-root .price-unit { font-size: 15px; color: var(--muted); font-weight: 500; margin-left: 4px; }
.fs-root .price-alt { padding-left: 16px; border-left: 1px solid var(--hairline-strong); }
.fs-root .price-desc { margin-top: 18px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.fs-root .price-card .btn { margin-top: 26px; width: 100%; }
.fs-root .price-feats { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fs-root .price-feats li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--body); font-weight: 500; line-height: 1.45; }
.fs-root .price-feats svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--berry); }
.fs-root .price-fine { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); font-size: 13.5px; font-style: italic; color: var(--muted-soft); line-height: 1.5; }

/* Multi-site discount ladder — berry-tinted callout inside the Premium card */
.fs-root .price-ladder { margin-top: 24px; padding: 16px 18px; border-radius: 14px; background: var(--tint-berry); border: 1px solid var(--hairline); }
.fs-root .price-ladder-title { display: block; font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: -0.01em; color: var(--berry-ink); }
.fs-root .price-ladder ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fs-root .price-ladder li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; font-size: 14px; flex-wrap: wrap; }
.fs-root .pl-site { color: var(--body); font-weight: 500; }
.fs-root .pl-price { font-family: var(--sans); font-weight: 700; color: var(--ink); }
.fs-root .pl-per { font-weight: 500; color: var(--muted); font-size: 12px; margin-left: 2px; }
.fs-root .pl-off { margin-left: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: var(--berry); padding: 2px 7px; border-radius: 999px; vertical-align: middle; }
.fs-root .price-ladder-note { display: block; margin-top: 12px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* Custom — wide dark banner spanning both columns */
.fs-root .price-custom {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  background: var(--surface-dark); border-radius: 20px; padding: 36px 40px;
}
.fs-root .price-custom-copy { min-width: 0; flex: 1; }
.fs-root .price-custom h3 { color: #fff; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.fs-root .price-custom p { color: var(--on-dark-soft); font-size: 16px; line-height: 1.55; margin-top: 8px; max-width: 62ch; }
.fs-root .price-custom .btn { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .25); }
.fs-root .price-custom .btn:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .42); }

/* Comparison table — category divider rows + berry-tinted Premium column */
.fs-root.lp-pricing .cmp .col-fs { background: var(--tint-berry); color: var(--berry-ink); }
.fs-root .cmp tbody tr.cmp-group td {
  text-align: left; font-family: var(--sans); font-weight: 700; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  padding-top: 28px; padding-bottom: 10px;
}
.fs-root .cmp .yes { color: var(--fern-ink); font-weight: 700; }
.fs-root .cmp .no { color: var(--muted-soft); }
.fs-root .cmp td.col-fs .yes { color: inherit; }

@media (max-width: 720px) {
  .fs-root .price-grid { grid-template-columns: 1fr; }
  .fs-root .price-custom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Default Flowershow footer — restyled to match the landing mockup
   --------------------------------------------------------------------------
   The footer is theme chrome, rendered from config.json on EVERY page of this
   site (home, docs, blog, changelog…). So — unlike the landing styles above —
   these rules are intentionally NOT scoped under `.fs-root`: they apply
   site-wide for one consistent dark footer. custom.css loads after the theme,
   so these rules win without !important wherever their selectors are as
   specific as the theme's, or more.
   Target DOM: apps/flowershow/components/public/footer.tsx
   ========================================================================== */

/* Full-bleed near-black band; inner content stays centered (theme handles that) */
.site-footer {
  background: var(--surface-dark);
  border-top: none;
  color: var(--on-dark-soft);
}
.site-footer-inner { padding: 64px 0 40px; }

/* Publication name → brand, white, with the 💐 mark like the mockup */
.site-footer-publication-name {
  font-family: var(--sans);
  color: var(--on-dark);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.site-footer-publication-name::before { content: "💐 "; }

.site-footer-copyright { color: var(--on-dark-soft); font-size: 14px; }

/* Social icons: light gray → white on hover */
.site-footer-social-link { color: var(--on-dark-soft); }
.site-footer-social-link:hover { color: var(--on-dark); }

/* Column headings: mono, uppercase, wide-tracked */
.site-footer-navigation-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-dark-soft);
}

/* Links: soft light gray → white on hover */
.site-footer-navigation-link { font-size: 14px; color: #cfc9cd; }
.site-footer-navigation-link:hover { color: var(--on-dark); }

/* ==========================================================================
   Site-wide default font — Inter
   --------------------------------------------------------------------------
   Like the footer block above, this is intentionally NOT scoped under
   `.fs-root`: it sets the default body/UI font for the ordinary content pages
   (docs, blog, changelog, …). The `.fs-root` landing pages keep their own
   Urbanist font (they set `font-family: var(--sans)` directly), so nothing
   here leaks into them. custom.css loads after the default theme, so
   equal-or-higher specificity wins without !important.

   Reuses the Inter instance the app already loads via next/font (exposed as
   --next-font-heading), so there's no extra web-font request. Headings already
   use Inter (--font-heading); this switches body + prose text from the theme's
   serif default (Lora) to Inter. */
:root {
  --font-body: var(--next-font-heading, Inter, ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}