/* All CSS for the product's own root ("/", Landing.tsx) — plain, unprocessed,
   not run through Tailwind/Lightning CSS, same reasoning as marketing.css:
   this page leans on real animation/gradient/keyframe CSS that Tailwind's
   processing has previously mangled or silently dropped elsewhere in this
   project (backdrop-filter, arbitrary-value backdrop-blur utilities).

   Ported verbatim from the finalized mockup (see docs/spec.md's own note on
   /overview for the same approach) — every rule here is scoped under
   .jm-landing so it can never leak onto any other screen; the mock's own
   bare `body`/`html` rules become the .jm-landing root rule instead. Colors
   and fonts reference the real global tokens defined in src/index.css's
   @theme block (--color-*, --font-*) — those resolve correctly here even
   though this file itself is never processed by Tailwind, since custom
   properties are resolved at paint time regardless of which stylesheet
   references them. The one exception is --lp-paper: the finalized design
   lightens this page's own base tone past the site-wide --color-paper, so
   it's a page-scoped variable instead of touching the global token. */

.jm-landing {
  --lp-paper: #faf6ee;
  /* Fixed to exactly the viewport, not min-height — this page is meant to
     fit in one screen with no scrolling at all (chatgpt.com-style), and a
     min-height lets any small content-height change (the headline's
     typing→reveal swap, the live-example card's text growing as it types)
     push the page taller than the viewport and trigger a page scrollbar. */
  height: 100vh;
  overflow: hidden;
  display: flex;
  position: relative;
  background: var(--lp-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
}

/* Slow-drifting tricolor wash — the page's base ambience, not a flag. Big,
   soft, low-saturation stops so it reads as tone rather than a stripe;
   .rail/.jm-main surfaces sit on their own solid fills above it, so
   legibility never depends on where the gradient happens to be. */
@keyframes jm-tricolor-drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.jm-landing .tricolor-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg,
    rgba(255, 170, 64, 0.66) 0%,
    rgba(255, 204, 128, 0.41) 21%,
    var(--lp-paper) 42%,
    var(--lp-paper) 58%,
    rgba(120, 210, 152, 0.5) 80%,
    rgba(38, 176, 100, 0.72) 100%
  );
  background-size: 220% 220%;
  animation: jm-tricolor-drift 26s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .jm-landing .tricolor-bg { animation: none; background-position: 50% 50%; }
}
.jm-landing .rail,
.jm-landing .jm-main { position: relative; z-index: 1; }

/* ================= left rail ================= */
.jm-landing .rail {
  width: 258px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-border);
  padding: 20px 14px;
  position: relative;
  /* .jm-landing itself no longer scrolls (see above) — on a short window
     the rail scrolls internally instead of ever clipping its own content. */
  overflow-y: auto;
  /* Explicit, not left to default — setting only overflow-y makes browsers
     compute overflow-x as "auto" too (the CSS overflow spec couples them
     when either is non-visible), which is what surfaced a horizontal
     scrollbar the moment any child (e.g. a long uppercase full name) was
     even a few pixels wider than the rail. */
  overflow-x: hidden;
}
.jm-landing .rail::after {
  /* hairline brand-gradient thread down the rail's own edge */
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: -1px;
  width: 1px;
  background: linear-gradient(to bottom, var(--color-tape-red), var(--color-amendment-ochre) 45%, var(--color-seal-green) 85%);
  opacity: 0.45;
}

/* Logo sized to span both lines of the text block beside it (wordmark +
   tagline stacked), not just the wordmark alone — a standard logo-mark +
   stacked-text lockup, rather than the logo only ever matching the single
   "Jurist Maven" line's height. */
.jm-landing .rail-brand { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 16px 4px 22px; flex-shrink: 0; }
.jm-landing .rail-brand-mark { width: 42px; height: 42px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.jm-landing .rail-brand-text-block { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jm-landing .rail-brand-text {
  font-family: "Audiowide", var(--font-display);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  white-space: nowrap;
}
.jm-landing .rail-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 11px;
  color: var(--color-void-grey);
  white-space: nowrap;
}

.jm-landing .rail-section-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-ink);
  padding: 10px 10px 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.jm-landing .rail-section-label:hover { color: var(--color-seal-green); }
.jm-landing .rail-lens-chev {
  flex-shrink: 0;
  color: var(--color-void-grey);
  transition: transform 150ms;
}
.jm-landing .rail-section-label.open .rail-lens-chev { transform: rotate(90deg); }
.jm-landing .rail-lens-mark { flex-shrink: 0; margin-left: -3px; }
/* The three lens rows (and the white box around the active one) sit indented under the header, box and all: shifted right and narrowed to match. */
.jm-landing .rail-lens-block .rail-item { margin-left: 18px; width: calc(100% - 18px); }

/* Wraps "Choose your lens" and the Tiers card — collapses to nothing when
   an expanded Pinned/Chats list needs the room (LandingRail's own
   ResizeObserver decides this: Pricing collapses first, then lens, and
   only once both are already gone does the list fall back to its own
   internal scroll — see .rail-chats-list's max-height below). Only THIS
   outer wrapper's box actually shrinks; the inner content div (that
   LandingRail measures via its own ref) keeps reporting its true natural
   height the whole time regardless — overflow:hidden on an ancestor
   doesn't change a descendant's own intrinsic size — so no "temporarily
   show it to measure it" step is ever needed. */
/* No transition, deliberately — an animated max-height means the
   ResizeObserver watching .rail below fires repeatedly with intermediate,
   mid-animation heights, which could otherwise leave hideTiers/hideLens
   stuck on a stale reading right as the animation finishes. Instant is
   more reliable here than smooth. */
/* flex-shrink:0 — .rail's default column-flex behavior otherwise shrinks
   this (and the other fixed-size children below, except .rail-chats —
   see its own note) below their own natural content size whenever total
   content is tight, EVEN with overflow-y:auto set on .rail (flex-shrink
   runs before overflow ever gets a say in the matter) — the exact bug
   that was clipping the 3rd (active, white-background) lens item's box
   mid-height instead of leaving it fully visible OR truly hiding it.
   Conditionally rendered by LandingRail itself (mount/unmount, same
   pattern Pinned/Chats already use), not a CSS collapse trick — simpler,
   and there's nothing here for a shrink/overflow quirk to ever act on. */
.jm-landing .rail-lens-block { flex-shrink: 0; }

.jm-landing .rail-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(26,25,23,0.72);
  position: relative;
  border-left: 2.5px solid transparent;
  width: 100%;
  text-align: left;
  background: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
}
.jm-landing .rail-item svg { flex-shrink: 0; color: var(--item-color, var(--color-void-grey)); opacity: 0.85; }
.jm-landing .rail-item:hover { background: rgba(26,25,23,0.045); color: var(--color-ink); }

.jm-landing .rail-item.active {
  background: var(--color-card);
  color: var(--color-ink);
  border-left-color: var(--item-color);
  box-shadow: 0 1px 2px rgba(26,25,23,0.05);
}
.jm-landing .rail-item.active svg { opacity: 1; }

.jm-landing .rail-citizen { --item-color: var(--color-citizen-fg); }
.jm-landing .rail-student { --item-color: var(--color-student-fg); }
.jm-landing .rail-lawyer  { --item-color: var(--color-lawyer-fg); }

.jm-landing .rail-divider { height: 1px; background: var(--color-border); margin: 10px 6px 16px; flex-shrink: 0; }

/* Signed-in only — collapsed by default, same idea as the conversation
   screen's own chats-mode drawer, just restrained to this rail's own
   quieter typographic language (font-mono uppercase labels, like
   .rail-upgrade-label) rather than importing that drawer's larger serif
   stamp-chip treatment wholesale into a 244px-wide secondary rail.

   This is the ONE piece of .rail allowed to actually flex — flex:1 1 0
   plus min-height:0 (which overrides a flex item's default min-height:
   auto, the thing that otherwise refuses to let it shrink below its own
   content size) is what lets it take "however much is actually left" in
   .rail's column and shrink down to fit a squeeze, with its own nested
   list(s) then absorbing anything beyond that via their own
   overflow-y:auto (below) — never .rail's own scrollbar, and never by
   silently clipping content instead of truly resizing it. */
.jm-landing .rail-chats {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  margin: 2px 4px 4px;
}
.jm-landing .rail-chats-header {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  flex-shrink: 0;
  padding: 8px 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-ink);
  text-align: left;
}
.jm-landing .rail-chats-header svg.chev { flex-shrink: 0; transition: transform 150ms ease; color: var(--color-void-grey); }
.jm-landing .rail-chats-header.open svg.chev { transform: rotate(90deg); }
.jm-landing .rail-chats-header svg.lead { flex-shrink: 0; color: var(--color-amendment-ochre); }
.jm-landing .rail-chats-header.chats svg.lead { color: rgba(26,25,23,0.7); }
/* Same rotated stamp chip as the chat portal's own Pinned/Chats headers. */
.jm-landing .rail-chats-chip {
  margin-left: auto;
  transform: rotate(-4deg);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--color-void-grey);
}
.jm-landing .rail-chats-chip.pinned { background: var(--color-amendment-ochre); }
/* flex:1 1 0 + min-height:0 (not a fixed max-height) — splits whatever
   .rail-chats has left evenly if BOTH Pinned and Chats happen to be open
   at once, natively, and each still gets its own internal scroll once
   even ITS share of that runs out. */
.jm-landing .rail-chats-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: 4px;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
/* An empty list just holds its one-line message — sizes to that instead of
   taking an equal flex share and leaving a big blank gap. The other (real)
   list then gets all the remaining room. */
.jm-landing .rail-chats-list.empty { flex: 0 0 auto; }
/* Pinned is usually short: it keeps its own height (scrolling only past ~3 rows) so the long Chats list is the one that absorbs any squeeze. */
.jm-landing .rail-chats-list.pinned-list { flex-shrink: 0; max-height: 160px; }
.jm-landing .rail-chats-row-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 7px;
}
.jm-landing .rail-chats-row-wrap:hover { background: rgba(26,25,23,0.045); }
.jm-landing .rail-chats-row {
  display: block;
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 7px;
  padding: 6px 30px 6px 27px;
}
.jm-landing .rail-chats-row-titleline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.jm-landing .rail-chats-row-pin { flex-shrink: 0; color: rgba(26,25,23,0.6); }
/* Vertical-dots trigger: hidden until the row is hovered (or its menu is open), same as the chat portal drawer. */
.jm-landing .rail-chats-dots {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--color-void-grey);
  cursor: pointer;
  opacity: 0;
}
.jm-landing .rail-chats-row-wrap:hover .rail-chats-dots,
.jm-landing .rail-chats-dots[aria-expanded="true"] { opacity: 1; }
.jm-landing .rail-chats-dots:hover { background: rgba(26,25,23,0.1); color: var(--color-ink); }
.jm-landing .rail-chats-rename {
  flex: 1;
  min-width: 0;
  margin: 0 4px 0 22px;
  padding: 7px 8px;
  border: 1px solid rgba(26,25,23,0.3);
  border-radius: 7px;
  background: var(--color-card);
  font-size: 14px;
  outline: none;
}
.jm-landing .rail-chats-row-title {
  font-size: 14px;
  color: rgba(26,25,23,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jm-landing .rail-chats-row-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-void-grey);
  margin-top: 2px;
}
.jm-landing .rail-chats-empty {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-void-grey);
  padding: 4px 10px 8px 27px;
}

.jm-landing .rail-spacer { flex: 1; }

.jm-landing .rail-upgrade {
  margin: 4px 4px 14px;
  padding: 13px 14px;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(46,89,64,0.08), rgba(166,103,44,0.06));
  border: 1px solid rgba(46,89,64,0.18);
  flex-shrink: 0;
}
.jm-landing .rail-upgrade-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 7px;
}
.jm-landing .rail-upgrade-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-seal-green);
}
.jm-landing .rail-upgrade-tiers {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(26,25,23,0.55);
}
.jm-landing .rail-upgrade-copy { font-size: 12px; line-height: 1.5; color: rgba(26,25,23,0.7); margin-bottom: 10px; }
.jm-landing .rail-upgrade-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-seal-green);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* The account card keeps its original width (the rail's old 244px minus its padding) even though the rail itself is wider now. */
.jm-landing .rail-account .rail-id-card,
.jm-landing .rail-account .rail-guest-card { width: 216px; max-width: 100%; margin-inline: auto; }
.jm-landing .rail-account {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

/* Signed-in: a small "ID badge" card — a colored header band with the
   avatar overlapping its bottom edge (option F4 of the concepts), rather
   than a plain text row or a document stamp. overflow:visible on the card
   itself is what lets the avatar actually poke past the band's edge.

   Unlike the rest of this file, these rules (through .jm-btn-primary:hover
   below) are deliberately NOT scoped under .jm-landing — AccountIdCard.tsx
   reuses this exact card (and its guest-state sibling) inside the
   conversation screen's own left rail, outside .jm-landing entirely. This
   file is loaded globally (index.html's <link>), so an unscoped rule here
   is safe to share the same way index.css's own global rules are. */
.rail-id-card {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-card);
  overflow: visible;
}
.rail-id-strip {
  height: 28px;
  border-radius: 9px 9px 0 0;
  position: relative;
}
.rail-id-avatar {
  position: absolute;
  left: 11px;
  bottom: -20px;
  border: 0;
  padding: 2.5px;
  background: var(--color-card);
  border-radius: 999px;
  cursor: pointer;
  line-height: 0;
}
/* Right-aligned on the same row as the avatar (left-aligned) — both
   positioned relative to .rail-id-strip, vertically centered on roughly
   the same line (the avatar's own visual center, where it crosses the
   strip's bottom edge). */
.rail-id-strip .rail-id-logout {
  position: absolute;
  right: 11px;
  bottom: -13px;
  /* A white ring only reads as a ring against a *different*-colored face —
     the avatar's own photo/icon/initials color does that job for it; this
     button has no such inner color of its own, so it needs one here
     (ink, with a white icon) for the white box-shadow ring to actually be
     visible rather than blending into a same-color face. */
  background: var(--color-ink);
  /* Falls back to the real global --color-paper outside .jm-landing (where
     --lp-paper is undefined) — see AccountIdCard.tsx, which renders this
     same markup inside the conversation screen's rail. */
  color: var(--lp-paper, var(--color-paper));
  border: none;
  box-shadow: 0 0 0 2.5px var(--color-card);
}
.rail-id-strip .rail-id-logout:hover { color: var(--color-tape-red); }
.rail-id-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 10px 12px;
  min-width: 0;
}
.rail-id-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  width: 100%;
  text-align: center;
}
.rail-id-role {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-void-grey);
}
.rail-id-name {
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.25;
  /* Wraps onto a second line for a long full name instead of truncating
     with an ellipsis — the whole point of showing a name is to actually
     read it. */
  overflow-wrap: break-word;
}

/* Guest: a left-strip card (mirrors the signed-in ID badge's own card
   language, just with a diagonal-hatch "not filled in yet" strip on the
   side instead of a colored header band) rather than a plain unboxed row —
   the visual "this becomes a real badge once you sign in" contrast is
   itself a small nudge toward signing up. */
.rail-guest-card {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-card);
}
.rail-guest-strip {
  width: 6px;
  flex-shrink: 0;
  background: repeating-linear-gradient(135deg, var(--color-border), var(--color-border) 6px, transparent 6px, transparent 12px);
  background-size: 10px 10px;
}
.rail-guest-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
.rail-identity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.rail-identity-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.rail-identity-caption {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-void-grey);
}
.rail-identity-name {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.rail-guest-avatar {
  width: 30px; height: 30px; border-radius: 999px;
  background: repeating-conic-gradient(var(--color-border) 0% 25%, transparent 0% 50%) 0 0/8px 8px;
  flex-shrink: 0;
}
.rail-logout-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: none;
  color: var(--color-void-grey);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.rail-logout-icon:hover { color: var(--color-tape-red); border-color: var(--color-tape-red); }
.rail-auth-buttons { display: flex; gap: 8px; width: 100%; }
.jm-btn-secondary,
.jm-btn-primary {
  flex: 1;
  font-size: 12.5px; font-weight: 500; padding: 7px 0; border-radius: 7px; cursor: pointer; text-align: center;
  transition: opacity 150ms ease, border-color 150ms ease;
}
.jm-btn-secondary { background: transparent; border: 1.5px solid var(--color-border); color: var(--color-ink); }
.jm-btn-secondary:hover { border-color: var(--color-ink); }
.jm-btn-primary { background: var(--color-ink); border: none; color: var(--lp-paper, var(--color-paper)); }
.jm-btn-primary:hover { opacity: 0.88; }

/* ================= main ================= */
.jm-landing .jm-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.jm-landing .jm-brand-bar { height: 3px; background: linear-gradient(to right, var(--color-tape-red), var(--color-amendment-ochre), var(--color-seal-green)); }

@keyframes jm-glow-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-22px, 16px) scale(1.05); }
  100% { transform: translate(14px, -10px) scale(1); }
}
.jm-landing .hero-wash {
  position: absolute; inset: -60px; pointer-events: none;
  background:
    radial-gradient(560px 380px at 18% 22%, rgba(46,89,64,0.09), transparent 62%),
    radial-gradient(600px 400px at 88% 12%, rgba(178,59,46,0.07), transparent 60%),
    radial-gradient(440px 320px at 68% 82%, rgba(166,103,44,0.07), transparent 60%);
  animation: jm-glow-drift 18s ease-in-out infinite;
}

.jm-landing .top-corner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  /* Absolute, not in normal flow — floats over the hero rather than taking
     space in .jm-main's own flex column, so <main>'s own layout stays
     identical regardless of what this row holds. */
  position: absolute;
  top: 16px;
  right: 28px;
  z-index: 3;
}
.jm-landing .header-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 7px 14px 7px 11px;
  transition: border-color 150ms ease, background 150ms ease;
}
.jm-landing .header-link:hover { border-color: var(--color-ink); background: var(--color-card); }
.jm-landing .header-link svg { flex-shrink: 0; }

.jm-landing main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centered, as originally designed — the disclaimer-touching-the-bottom-
     edge bug wasn't caused by centering itself, it was .top-corner (see
     below) consuming flex height unevenly between guest/signed-in, which
     shifted this box's visual center down. With .top-corner floated out of
     flow, centering is safe again and looks identical in both states. The
     bottom padding is also trimmed from the original 96px, which was more
     than centering ever needed and made short viewports tighter than
     necessary. */
  justify-content: center;
  /* Top padding a bit larger than bottom — centering only balances the
     space *between* the paddings, not the paddings themselves, so this
     nudges the whole block down slightly from dead-center. */
  padding: 46px 32px 32px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.jm-landing .jm-pill {
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-ink);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 20px;
}
@keyframes jm-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
@keyframes jm-dot-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.jm-landing .jm-pill .dot2 {
  width: 8px; height: 8px; border-radius: 999px;
  background: #22c55e;
  animation: jm-dot-pulse 1.7s ease-in-out infinite, jm-dot-blink 1.7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .jm-landing .jm-pill .dot2 { animation: none; }
}

.jm-landing h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.65rem;
  line-height: 1.15;
  margin: 0 0 32px;
  max-width: 17ch;
  text-wrap: balance;
}
.jm-landing h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--color-tape-red);
  transition: color 550ms ease;
}
.jm-landing h1 em.pending { color: inherit; font-style: normal; }
.jm-landing h1 .jm-cursor { background: var(--color-ink); }
@media (prefers-reduced-motion: reduce) {
  .jm-landing h1 em { transition: none; }
}

.jm-landing .askbar {
  width: 100%;
  max-width: 620px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 9px 9px 9px 24px;
  box-shadow: 0 8px 28px -12px rgba(26,25,23,0.16), 0 1px 2px rgba(26,25,23,0.05);
}
.jm-landing .askbar input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-ink);
  padding: 12px 0;
}
.jm-landing .askbar input::placeholder { color: rgba(26,25,23,0.4); }
.jm-landing .askbar button {
  width: 40px; height: 40px; border-radius: 12px; border: none;
  background: var(--color-tape-red); color: var(--lp-paper);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  flex-shrink: 0;
  transition: opacity 150ms ease;
}
.jm-landing .askbar button:hover { opacity: 0.9; }

.jm-landing .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; max-width: 620px; }
.jm-landing .chip {
  font-size: 12.5px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--lp-paper);
  color: rgba(26,25,23,0.7);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.jm-landing .chip:hover { border-color: var(--color-ink); color: var(--color-ink); background: var(--color-card); }

.jm-landing .microcopy { margin-top: 24px; font-size: 12px; color: var(--color-void-grey); }

/* ================= live preview panel ================= */
.jm-landing .preview {
  width: 100%;
  max-width: 620px;
  margin-top: 20px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 20px 24px 22px;
  text-align: left;
  box-shadow: 0 10px 30px -16px rgba(26,25,23,0.14);
  opacity: 0;
  transform: translateY(10px);
  animation: jm-preview-in 700ms ease 400ms forwards;
}
@keyframes jm-preview-in { to { opacity: 1; transform: translateY(0); } }

.jm-landing .preview-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  color: var(--color-seal-green);
  margin-bottom: 10px;
}
.jm-landing .preview-label .live-dot {
  width: 6px; height: 6px; border-radius: 999px; background: #22c55e;
  animation: jm-dot-pulse 1.7s ease-in-out infinite, jm-dot-blink 1.7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .jm-landing .preview-label .live-dot { animation: none; }
}
.jm-landing .preview-question {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 12px;
  min-height: 1.3em;
}
.jm-landing .preview-body { display: flex; align-items: flex-start; gap: 16px; }
.jm-landing .preview-answer {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(26,25,23,0.78);
  min-height: 3.3em;
}
.jm-landing .jm-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--color-ink);
  margin-left: 1px;
  vertical-align: -0.15em;
  animation: jm-blink 900ms step-end infinite;
}
@keyframes jm-blink { 50% { opacity: 0; } }

.jm-landing .preview-stamp {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-seal-green);
  border: 1.5px solid var(--color-seal-green);
  border-radius: 5px;
  padding: 5px 8px;
  filter: url(#ink-bleed);
  opacity: 0;
  transform: scale(0.6) rotate(-14deg);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(.2,1.4,.4,1);
}
.jm-landing .preview-stamp.show { opacity: 1; transform: scale(1) rotate(-4deg); }

@media (prefers-reduced-motion: reduce) {
  .jm-landing .preview { animation: none; opacity: 1; transform: none; }
  .jm-landing .jm-cursor { animation: none; }
  .jm-landing .preview-stamp { transition: none; }
}

.jm-landing .disclaimer {
  padding: 18px 32px 18px;
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-void-grey);
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}