/* =============================================================================
 * Scroll-driven product demo, centre stage.
 *
 * A browser is pinned in the viewport while the story plays over it: the page →
 * the shortcut pressed → the extension's own toast confirming the copy → the
 * browser receding as the paste targets come forward.
 *
 * Choreography is driven by a single scroll progress value (--p, 0→1) set by
 * scrollytelling.js, rather than discrete step toggles. That's what makes the
 * motion continuous instead of snapping between states — and it's the one thing
 * a library like GSAP ScrollTrigger would normally be pulled in for. One
 * variable plus calc() covers it here.
 *
 * Self-contained: docs/styles.css is a Tailwind build output with no rebuild
 * script wired up, so new utility classes would ship unstyled. Everything below
 * is plain CSS scoped under .cine.
 *
 * The scrollbar is never hijacked — the stage is `position: sticky` inside a
 * tall track, so native scrolling, keyboard paging and find-in-page keep working.
 * ========================================================================== */

.cine {
  --c-surface: #ffffff;
  --c-surface-2: #f8fafc;
  --c-line: #dce3ea;
  --c-line-soft: #ebf0f5;
  --c-ink: #032a4b;
  --c-ink-2: #55677a;
  --c-ink-3: #667584;
  --c-accent: #0b3c63;
  --c-brand: #fc686d;
  --c-ok: #0c7c95;
  --c-pro: #fad176;
  --c-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Progress through the pinned track, 0→1. JS overwrites this each frame. */
  --p: 0;

  position: relative;
  color: var(--c-ink);
}

/* The tall track the stage is pinned inside. Its height is the runway the whole
   sequence plays out over — longer track, slower story. */
.cine-track { height: 460vh; }

.cine-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  contain: layout paint;
  padding-bottom: 6vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ---------- act 1: the page ---------- */
/* Hands over to the two lanes once its part is done. */
.cine-hero {
  --out: clamp(0, (var(--p) - 0.12) * 7, 1);
  position: absolute;
  width: min(62rem, 100%);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(3, 42, 75, 0.05), 0 40px 80px -40px rgba(3, 42, 75, 0.45);
  overflow: hidden;
  opacity: calc(1 - var(--out));
  transform: translateY(calc(var(--out) * -4vh)) scale(calc((1 - var(--out) * 0.12) * clamp(0.75, (100vh - 13rem) / 27rem, 1)));
  pointer-events: none;
  will-change: opacity, transform;
}

.win-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  padding: 0.45rem 0.6rem 0;
  background: #eaf0f5;
}
.tab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 17rem;
  padding: 0.4rem 0.75rem;
  background: var(--c-surface);
  border-radius: 8px 8px 0 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--c-ink);
}
.tab-fav { width: 0.65rem; height: 0.65rem; border-radius: 2px; background: var(--c-brand); flex-shrink: 0; }
.tab-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-ghost { width: 4.5rem; height: 1.55rem; background: rgba(255, 255, 255, 0.45); padding: 0; }

.win-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--c-line-soft);
  background: var(--c-surface-2);
}
.win-bar.mini { padding: 0.4rem 0.55rem; gap: 0.45rem; }
.win-tabs.mini { padding: 0.3rem 0.4rem 0; }
.win-tabs.mini .tab {
  max-width: 100%;
  padding: 0.25rem 0.45rem;
  font-size: 0.56rem;
  border-radius: 6px 6px 0 0;
}
.win-tabs.mini .tab-fav { width: 0.45rem; height: 0.45rem; }
/* The highlight has to cover the whole tab, which is a flex box rather than a
   run of text, so it paints as a background layer instead of behind glyphs. */
.win-tabs.mini .tab.hit { background-color: transparent; }
.cine-dots { display: flex; gap: 0.3rem; flex-shrink: 0; }
.cine-dots i { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--c-line); display: block; }
.cine-url {
  flex: 1;
  min-width: 0;
  font-family: var(--c-mono);
  font-size: 0.68rem;
  color: var(--c-ink-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: 6px;
  padding: 0.25rem 0.55rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win-bar.mini .cine-url { font-size: 0.55rem; padding: 0.18rem 0.4rem; }

.cine-page { padding: 2rem 2.5rem 2.5rem; }
.cine-title {
  font-size: clamp(1.3rem, 2.3vw, 1.85rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 0.9rem;
}
.cine-para {
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--c-ink-2);
  margin-bottom: 1rem;
}
.cine-lines { display: flex; flex-direction: column; gap: 0.5rem; }
.cine-lines span { display: block; height: 0.5rem; border-radius: 999px; background: var(--c-line-soft); }
.cine-lines span:nth-child(2) { width: 88%; }
.cine-lines span:nth-child(3) { width: 76%; }

/* ---------- acts 2 & 3: the two lanes ---------- */
.cine-lanes {
  --in: clamp(0, (var(--p) - 0.15) * 7, 1);
  /* One grid for both lanes, with the rows named. Each row then sizes to the
     taller of the two panels in it, so the columns stay level instead of
     drifting out of step because one side has an extra line of text. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 7.6rem auto;
  column-gap: 3rem;
  width: min(70rem, 100%);
  --settle: clamp(0, (var(--p) - 0.6) * 5, 1);
  /* 1 when there is room, shrinking towards 0.72 as the viewport gets shorter. */
  --fit: clamp(0.72, (100vh - 15rem) / 31rem, 1);
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * 20px + (1 - var(--settle)) * 6.5rem)) scale(calc((1 - var(--settle) * 0.08) * var(--fit)));
  will-change: opacity, transform;
}
/* The lane is a grouping in the markup only; its children are placed straight
   into the shared grid so both columns line up row for row. */
.lane { display: contents; }
.lane-a > * { grid-column: 1; }
.lane-b > * { grid-column: 2; }
.lane-label { grid-row: 1; }
.lane-src { grid-row: 2; }
.lane-clip { grid-row: 3; }
.lane-dst { grid-row: 4; }
.lane-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-ink-3);
  text-transform: uppercase;
  margin-bottom: 0.55rem;
  text-align: center;
}

/* The source shrinks and steps back once the paste phase begins, the same way
   the hero handed over to it. */
.lane-src {
  --recede: clamp(0, (var(--p) - 0.62) * 5, 1);
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(3, 42, 75, 0.05), 0 18px 36px -22px rgba(3, 42, 75, 0.35);
  transform: scale(calc(1 - var(--recede) * 0.12));
  transform-origin: center top;
  opacity: calc(1 - var(--recede) * 0.45);
  will-change: transform, opacity;
}
.lane-page { padding: 0.6rem 0.9rem 1.8rem; }
.lane-para { font-size: 0.66rem; line-height: 1.7; color: var(--c-ink-2); margin-bottom: 0.6rem; }
.lane .cine-lines { margin-top: 0.7rem; }
.lane .cine-lines span { height: 0.38rem; }

/* The highlight sweeps across whatever that lane actually copies. */
.hit {
  background-image: linear-gradient(#b9dcf5, #b9dcf5);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: calc(clamp(0, (var(--p) - 0.2) * 7, 1) * 100%) 100%;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.lane-keys {
  --in: clamp(0, (var(--p) - 0.26) * 14, 1);
  --out: clamp(0, (var(--p) - 0.4) * 16, 1);
  position: absolute;
  left: 50%;
  bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.35rem 0.55rem;
  border-radius: 9px;
  background: var(--c-ink);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 24px -10px rgba(3, 42, 75, 0.7);
  opacity: calc(var(--in) - var(--out));
  transform: translate(-50%, calc((1 - var(--in)) * 6px));
  will-change: opacity, transform;
}
.lane-keys kbd {
  font-family: var(--c-mono);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--c-ink);
  background: linear-gradient(180deg, #fff, #dfe8f0);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  padding: 0.12rem 0.34rem;
}
.lane-keys span { color: rgba(255, 255, 255, 0.5); font-size: 0.52rem; }


/* The clipboard readout is the extension's own toast, shown where the content
   is between leaving the page and arriving at its destination. It travels down
   the guide line and fades as it lands, which is the paste. */
.lane-clip {
  --in: clamp(0, (var(--p) - 0.47) * 16, 1);
  --travel: clamp(0, (var(--p) - 0.66) * 6, 1);
  align-self: start;
  justify-self: stretch;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 0.45rem;
  row-gap: 0.15rem;
  max-width: 100%;
  margin: 2.6rem 0 0;
  padding: 0.45rem 0.65rem;
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.55);
  color: #fff;
  opacity: calc(var(--in) * (1 - var(--travel)));
  transform: translateY(calc(var(--travel) * 1.6rem)) scale(calc(1 - var(--travel) * 0.1));
  will-change: opacity, transform;
}
.lane-clip svg { width: 0.8rem; height: 0.8rem; color: #4ade80; margin-top: 0.08rem; }
.clip-label {
  grid-column: 2;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.clip-body {
  grid-column: 2;
  font-family: var(--c-mono);
  font-size: 0.53rem;
  line-height: 1.45;
  white-space: pre-wrap;
  color: rgba(255, 255, 255, 0.62);
  overflow-wrap: anywhere;
  word-break: normal;
  padding-top: 0.12rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lane-dst::before,
.lane-dst::after {
  content: "";
  position: absolute;
  left: 50%;
  opacity: var(--in);
}
.lane-dst::before {
  bottom: 100%;
  width: 2px;
  margin-left: -1px;
  height: calc(clamp(0, (var(--p) - 0.62) * 7, 1) * 2.2rem);
  background: linear-gradient(to bottom, rgba(12, 124, 149, 0.25), var(--c-ok));
  border-radius: 2px;
}
.lane-dst::after {
  bottom: calc(100% - 2px);
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--c-ok);
}

.lane-dst {
  position: relative;
  --in: clamp(0, (var(--p) - 0.66) * 6, 1);
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * 14px));
  will-change: opacity, transform;
}

/* Realistic destination mock-ups. Skeleton bars stand in for the surrounding
   content so the pasted line reads as one real item inside a real app, rather
   than a code sample on a card. Notes and chat get the space because those are
   where people actually put these links. */
.cine-app {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(3, 42, 75, 0.05), 0 16px 34px -20px rgba(3, 42, 75, 0.32);
  text-align: left;
}

.app-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--c-line-soft);
  background: var(--c-surface-2);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--c-ink);
}
.app-ico {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 3px;
  background: var(--c-ink);
  flex-shrink: 0;
}
.app-ico.is-chat { background: var(--c-ok); }
.app-fmt {
  margin-left: auto;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-ok);
  background: rgba(12, 124, 149, 0.1);
  border-radius: 999px;
  padding: 0.08rem 0.4rem;
  white-space: nowrap;
}
.app-body { padding: 0.75rem 0.9rem 0.85rem; }

/* skeleton bars */
.sk { display: block; height: 0.42rem; border-radius: 999px; background: var(--c-line-soft); margin-bottom: 0.4rem; }
.sk-h { height: 0.62rem; width: 58%; background: #dde5ec; margin-bottom: 0.7rem; }
.w70 { width: 70%; } .w60 { width: 60%; } .w55 { width: 55%; } .w45 { width: 45%; } .w35 { width: 35%; }

.lk {
  font-family: inherit;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

/* notes: a bulleted list where the last item is the paste */
.note-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.note-list li { display: flex; align-items: center; gap: 0.45rem; }
.note-list .bullet {
  width: 0.28rem; height: 0.28rem; border-radius: 999px;
  background: var(--c-ink-3); flex-shrink: 0;
}
.note-list li .sk { margin: 0; }
.note-list li.is-new {
  background: rgba(12, 124, 149, 0.08);
  border-radius: 5px;
  margin: 0 -0.3rem;
  padding: 0.2rem 0.3rem;
}

/* chat: two messages, the second one is the paste plus a link preview */
.msg { display: flex; gap: 0.45rem; margin-bottom: 0.6rem; }
.msg:last-child { margin-bottom: 0; }
.ava { width: 1.15rem; height: 1.15rem; border-radius: 5px; background: var(--c-line); flex-shrink: 0; }
.ava.me { background: var(--c-ok); }
.msg-body { flex: 1; min-width: 0; }
.msg-name { height: 0.42rem; width: 32%; border-radius: 999px; background: #dde5ec; margin-bottom: 0.45rem; }

.bubble {
  background: rgba(12, 124, 149, 0.07);
  border: 1px solid rgba(12, 124, 149, 0.16);
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
}

/* the compact "any other format" stack */

/* notes: source on the left, rendered preview on the right — the split is the
   point, since it shows the paste arriving as Markdown rather than as text that
   merely looks like a link. */
.note-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--c-line-soft);
  border-radius: 8px;
  overflow: hidden;
}
.note-col { padding: 0.6rem 0.65rem 0.7rem; min-width: 0; }
.note-col + .note-col { border-left: 1px solid var(--c-line-soft); background: var(--c-surface-2); }
.note-col-tag {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: 0.45rem;
}
.md-src {
  font-family: var(--c-mono);
  font-size: 0.58rem;
  line-height: 1.55;
  color: var(--c-ink-2);
  word-break: break-all;
}
.md-src .md-b { color: var(--c-ink-3); }
.md-src .md-t { color: var(--c-ink); font-weight: 600; }
.md-src .md-u { color: var(--c-ok); }
.md-hit { background: rgba(12, 124, 149, 0.1); border-radius: 4px; padding: 0.15rem 0.2rem; display: inline-block; }

/* chat: a composer under the thread does more for believability than any amount
   of chrome above it. */
.chat-input {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-surface-2);
}
.chat-input .ph {
  flex: 1;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--c-line-soft);
}
.chat-input .send {
  flex-shrink: 0;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-surface);
  background: var(--c-ok);
  line-height: 1.4;
}
.bubble-line { font-size: 0.63rem; line-height: 1.55; color: var(--c-ink); }
.bubble-url {
  display: block;
  font-family: var(--c-mono);
  font-size: 0.6rem;
  line-height: 1.5;
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

/* ---------- act 3b: what you actually do after pasting ---------- */
/* Pasting is only half the action. The note gets previewed; the message gets
   sent. Two extra beats, both driven off the same progress value.
     --paste  the clipboard has landed
     --render the preview is open / the message is away */
.lane-dst {
  --paste: clamp(0, (var(--p) - 0.7) * 12, 1);
  --render: clamp(0, (var(--p) - 0.85) * 12, 1);
}

.on-paste { opacity: var(--paste); transition: opacity 0.2s linear; }
.on-render { opacity: var(--render); }
/* The composer empties as the message goes out. */
.off-render { opacity: calc(var(--paste) * (1 - var(--render))); }

/* The preview column stays blank until the control is used. */
.note-col-tag.is-toggle {
  display: inline-block;
  border-radius: 999px;
  padding: 0.05rem 0.35rem;
  margin: -0.05rem -0.35rem 0.4rem;
  color: color-mix(in srgb, var(--c-ok) calc(var(--render) * 100%), var(--c-ink-3));
  background: rgba(12, 124, 149, calc(var(--render) * 0.12));
}

/* Composer holding the pasted text before it is sent. */
.chat-input { position: relative; align-items: center; min-height: 2.8rem; }
.chat-input .ph { opacity: calc(1 - var(--paste)); }
.typed {
  position: absolute;
  left: 0.5rem;
  right: 3.2rem;
  font-size: 0.56rem;
  line-height: 1.45;
  color: var(--c-ink);
  text-align: left;
  white-space: normal;
  overflow: hidden;
}
.typed-url { font-family: var(--c-mono); font-size: 0.55rem; color: var(--c-accent); }
/* The send button lights up once there is something to send. */
.chat-input .send {
  background: color-mix(in srgb, var(--c-ok) calc(var(--paste) * 100%), var(--c-line));
  color: color-mix(in srgb, var(--c-surface) calc(var(--paste) * 100%), var(--c-ink-3));
  transform: scale(calc(1 + var(--render) * 0.12));
  transition: transform 0.2s ease;
}

/* ---------- captions ---------- */
.cine-caption {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.4rem;
  width: min(46rem, 100%);
  min-height: 5.5rem;
  text-align: center;
}
.cine-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.cine-cap.on { opacity: 1; transform: translateY(0); }

.cine-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-ok);
  background: rgba(12, 124, 149, 0.1);
  border: 1px solid rgba(12, 124, 149, 0.22);
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
}
.cine-cap h3 {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: var(--c-ink);
}
.cine-cap p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-ink-2);
  max-width: 34rem;
}

/* Progress rail, so the reader can see how far the sequence has to run. */

/* =============================================================================
 * Static fallback.
 *
 * Below the breakpoint, or when the visitor asks for reduced motion, the track
 * collapses, nothing pins, and every element sits in its finished state as an
 * ordinary stacked block. All copy is real DOM text in both modes, so crawlers
 * and screen readers get identical content.
 * ========================================================================== */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .cine-track { height: auto; }

  .cine-stage {
    position: static;
    height: auto;
    overflow: visible;
    contain: none;
    gap: 2.5rem;
    padding: 1rem 0 0;
  }

  /* Act 1 sits in the flow instead of being cross-faded out. */
  .cine-hero {
    position: static;
    opacity: 1;
    transform: none;
    width: 100%;
  }

  /* Lanes stack, each reading source → paste → destination top to bottom. */
  .cine-lanes {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    width: 100%;
    opacity: 1;
    transform: none;
  }
  .lane { display: flex; flex-direction: column; gap: 0.6rem; }
  .lane-a > *, .lane-b > * { grid-column: auto; }
  .lane-label, .lane-src, .lane-clip, .lane-dst { grid-row: auto; }

  .lane-src { transform: none; opacity: 1; }
  .lane-keys { position: static; transform: none; opacity: 1; align-self: center; }
  .lane-clip {
    transform: none;
    opacity: 1;
    align-self: center;
    white-space: normal;
    word-break: break-all;
  }
  .lane-dst { opacity: 1; transform: none; }
  .on-paste, .on-render, .off-render { opacity: 1; }
  .typed { position: static; }
  .lane-dst::before, .lane-dst::after { display: none; }

  /* Selections are already made — no sweep to run. */
  .hit { background-size: 100% 100%; }

  .cine-caption {
    position: static;
    transform: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
  }
  .cine-cap { position: static; opacity: 1; transform: none; }
}

/* =============================================================================
 * Batch copy.
 *
 * The one capability the scroll demo doesn't cover, and one the page never
 * mentioned at all before. Kept as a still panel rather than another animation —
 * a second scroll sequence would compete with the first.
 * ========================================================================== */
.bulk {
  --b-surface: #ffffff;
  --b-surface-2: #f8fafc;
  --b-line: #dce3ea;
  --b-line-soft: #ebf0f5;
  --b-ink: #032a4b;
  --b-ink-2: #55677a;
  --b-ink-3: #667584;
  --b-accent: #0b3c63;
  --b-ok: #0c7c95;
  --b-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  color: var(--b-ink);
}

.bulk-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--b-ok);
  background: rgba(12, 124, 149, 0.1);
  border: 1px solid rgba(12, 124, 149, 0.22);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.bulk-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 1rem;
  text-wrap: balance;
}
.bulk-desc { font-size: 1.05rem; line-height: 1.75; color: var(--b-ink-2); }

.bulk-panel {
  background: var(--b-surface);
  border: 1px solid var(--b-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(3, 42, 75, 0.05), 0 24px 48px -28px rgba(3, 42, 75, 0.35);
}
.bulk-head {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--b-line-soft);
  background: var(--b-surface-2);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--b-ink-2);
}
.bulk-list { list-style: none; margin: 0; padding: 0.5rem 0.6rem; }
.bulk-list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.35rem;
  border-radius: 7px;
}
.bulk-list li:nth-child(odd) { background: rgba(12, 124, 149, 0.04); }
.bulk-check {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 4px;
  background: var(--b-ok);
  flex-shrink: 0;
  position: relative;
}
.bulk-check::after {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.12rem;
  width: 0.2rem;
  height: 0.38rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.bulk-fav { width: 0.7rem; height: 0.7rem; border-radius: 3px; background: #fc686d; flex-shrink: 0; }
.bulk-fav.b { background: #fad176; }
.bulk-fav.c { background: #0c7c95; }
.bulk-fav.d { background: #8795a3; }
.bulk-fav.e { background: #0b3c63; }
.bulk-t {
  font-size: 0.72rem;
  color: var(--b-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bulk-cta {
  margin: 0.3rem 0.6rem 0.75rem;
  padding: 0.55rem;
  border-radius: 9px;
  background: var(--b-accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 900px) {
  .bulk { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* =============================================================================
 * Use cases, each showing the output that audience would reach for.
 * ========================================================================== */
.uc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.uc {
  background: #fff;
  border: 1px solid #dce3ea;
  border-radius: 14px;
  padding: 1.25rem 1.15rem 1.15rem;
  display: flex;
  flex-direction: column;
}
.uc-title { font-size: 1.02rem; font-weight: 700; color: #032a4b; margin-bottom: 0.45rem; }
.uc-desc { font-size: 0.85rem; line-height: 1.65; color: #55677a; margin-bottom: 1rem; }
.uc-out {
  margin-top: auto;
  background: #f8fafc;
  border: 1px solid #ebf0f5;
  border-radius: 9px;
  padding: 0.6rem 0.65rem;
}
.uc-fmt {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0c7c95;
  margin-bottom: 0.4rem;
}
.uc-out code {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
  line-height: 1.55;
  color: #55677a;
  overflow-wrap: anywhere;
}
.uc-dirty { color: #a8b3bd !important; text-decoration: line-through; margin-bottom: 0.3rem; }
.uc-clean { color: #032a4b !important; font-weight: 600; }
.uc-note {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.58rem;
  font-weight: 700;
  color: #0c7c95;
}

@media (max-width: 1100px) { .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .uc-grid { grid-template-columns: 1fr; } }

/* =============================================================================
 * The factual strip after the demo. Deliberately plain: the demo carries the
 * argument, this only states what it can't show.
 * ========================================================================== */
.more { max-width: 64rem; margin: 5rem auto 0; }
.more-title {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #032a4b;
  text-align: center;
  margin-bottom: 2.5rem;
}
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.more-card {
  background: #f8fafc;
  border: 1px solid #ebf0f5;
  border-radius: 14px;
  padding: 1.5rem 1.4rem;
}
.more-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #032a4b;
  margin-bottom: 0.55rem;
  letter-spacing: -0.01em;
}
.more-card p { font-size: 0.9rem; line-height: 1.7; color: #55677a; }

@media (max-width: 900px) { .more-grid { grid-template-columns: 1fr; } }

/* =============================================================================
 * Real product screenshots.
 * ========================================================================== */
.shots { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }
.shots-title {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #032a4b;
  text-align: center;
  margin-bottom: 2.75rem;
}
.shots-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 3rem;
}
.shot { margin: 0; }
/* The popup is 350px wide in the browser. Stretching the capture to fill a
   column blows it up past life size and it stops reading as the real thing —
   so it is shown at the size it actually is, and only shrinks below that. */
.shot-popup { width: 350px; max-width: 100%; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid #dce3ea;
  background: #fff;
  box-shadow: 0 1px 2px rgba(3, 42, 75, 0.05), 0 24px 48px -28px rgba(3, 42, 75, 0.35);
}
.shot figcaption {
  margin-top: 0.85rem;
  text-align: center;
  font-size: 0.88rem;
  color: #55677a;
}
/* The settings page is genuinely wide; it takes the full row. */
.shot-wide { width: 100%; margin-top: 1.5rem; }

@media (max-width: 760px) {
  .shots-grid { gap: 2rem; }
}

/* Available to assistive tech and crawlers, absent visually. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}