/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ── Blog prose typography ──────────────────────────────── */

.blog-prose {
  font-size: 1.15rem;
  line-height: 1.72;
  color: #2c2722;
}

.blog-prose > *:first-child {
  margin-top: 0;
}

.blog-prose > p:first-child {
  font-size: 1.25rem;
  color: #1c1815;
  line-height: 1.65;
}

.blog-prose h2 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  color: #1c1815;
  font-size: 1.72em;
  margin-top: 1.9em;
  margin-bottom: 0.5em;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.blog-prose h3, .blog-prose h4 {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 600;
  color: #1c1815;
  margin-top: 1.7em;
  margin-bottom: 0.45em;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.blog-prose h3 { font-size: 1.2em; }
.blog-prose h4 { font-size: 1.05em; }

.blog-prose p {
  margin-bottom: 1.35em;
}

.blog-prose a {
  color: #8f3f06;
  text-decoration: underline;
  text-decoration-color: #b5510a59;
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s;
}

.blog-prose a:hover {
  text-decoration-color: #b5510a;
}

/* The signup CTA is relocated into the article body (just after the first h2)
   by the signup-cta controller, so the prose link rule above would otherwise
   repaint its amber button text dark and underline it. Keep it legible. */
.blog-prose [data-signup-cta-target="inline"] a {
  color: #fff;
  text-decoration: none;
}

.blog-prose img, .blog-prose video {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 2em 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
}

.blog-prose ul, .blog-prose ol {
  padding-left: 1.25em;
  margin-bottom: 1.4em;
}

.blog-prose ul { list-style-type: disc; }
.blog-prose ol { list-style-type: decimal; }

.blog-prose li {
  margin-bottom: 0.4em;
}

.blog-prose li strong {
  color: #1c1815;
}

.blog-prose blockquote {
  border-left: 2px solid #b5510a;
  padding-left: 1.25em;
  margin: 2em 0;
  color: #3a332d;
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: 1.15em;
  line-height: 1.45;
}

/* Featured-snippet "Quick answer" box: a short, self-contained answer to the
   page's head query, set apart from the prose. Full border + rounded corners
   so it reads distinctly from the italic, left-bordered blockquotes above. */
.blog-prose .quick-answer {
  margin: 2.5em 0;
  padding: 1.25em 1.5em;
  background: #faf6ef;
  border: 1px solid #e7ddcd;
  border-radius: 1rem;
}

.blog-prose .quick-answer p:first-child {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.05em;
  color: #1c1815;
  margin-bottom: 0.5em;
}

.blog-prose .quick-answer p:last-child {
  margin-bottom: 0;
}

.blog-prose code {
  font-size: 0.84em;
  background: #f5f1e9;
  border: 1px solid #e7e0d4;
  padding: 0.1em 0.4em;
  border-radius: 0.3rem;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #8f3f06;
}

.blog-prose pre {
  background: #1c1815;
  color: #f3eee5;
  padding: 1.25em 1.4em;
  border-radius: 0.75rem;
  overflow-x: auto;
  margin: 2em 0;
  font-size: 0.84em;
  line-height: 1.7;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.blog-prose pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  /* The inline <code> border/radius from .blog-prose code would otherwise be
     drawn around every wrapped line fragment inside the <pre>. Reset them. */
  border: none;
  border-radius: 0;
}

/* On narrow screens, wrap long code lines instead of scrolling them off the
   edge. These blocks are config/markdown meant to be read and copied, not
   width-sensitive source, so wrapping reads better than a hidden scroll. */
@media (max-width: 640px) {
  .blog-prose pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

/* Copy-to-clipboard control wrapping each fenced code block. The wrapper owns
   the vertical rhythm so the inner <pre> can sit flush against the button. */
.blog-prose .code-block {
  position: relative;
  margin: 2em 0;
}

.blog-prose .code-block > pre {
  margin: 0;
}

.blog-prose .code-copy-btn {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.55rem;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  color: #d8cfc0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.4rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.blog-prose .code-copy-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.blog-prose .code-copy-btn svg {
  width: 0.85rem;
  height: 0.85rem;
}

.blog-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: 0.9375em;
}

/* On phones, let wide comparison tables scroll horizontally instead of
   crushing their columns. Desktop keeps normal table layout. */
@media (max-width: 640px) {
  .blog-prose table {
    display: block;
    overflow-x: auto;
  }
}

.blog-prose th, .blog-prose td {
  border: 1px solid #e7e0d4;
  padding: 0.5em 0.75em;
  text-align: left;
}

.blog-prose th {
  background: #f5f1e9;
  font-weight: 600;
  color: #1c1815;
}

.blog-prose hr {
  border: none;
  border-top: 1px solid #e7e0d4;
  margin: 3em 0;
}

.blog-prose strong {
  color: #1c1815;
  font-weight: 600;
}

/* ── Use-case article body ──────────────────────────────── */

.uc-article > blockquote {
  border-radius: 0.75rem;
  background: rgba(255, 243, 224, 0.4);
  padding: 1.25rem 1.5rem;
  font-size: 1.125rem;
  line-height: 1.75;
  color: #78716c;
  font-style: italic;
  font-family: Georgia, serif;
}

/* ── Feature grid staggered reveal ───────────────────────── */

.feat-item {
  opacity: 0;
  transform: translateY(0.75rem);
}

.in-view .feat-item {
  animation: feat-reveal 0.5s ease forwards;
}

.in-view .feat-item:nth-child(1)  { animation-delay: 0s; }
.in-view .feat-item:nth-child(2)  { animation-delay: 0.06s; }
.in-view .feat-item:nth-child(3)  { animation-delay: 0.12s; }
.in-view .feat-item:nth-child(4)  { animation-delay: 0.18s; }
.in-view .feat-item:nth-child(5)  { animation-delay: 0.24s; }
.in-view .feat-item:nth-child(6)  { animation-delay: 0.3s; }
.in-view .feat-item:nth-child(7)  { animation-delay: 0.36s; }
.in-view .feat-item:nth-child(8)  { animation-delay: 0.42s; }
.in-view .feat-item:nth-child(9)  { animation-delay: 0.48s; }
.in-view .feat-item:nth-child(10) { animation-delay: 0.54s; }

@keyframes feat-reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Demo: Claude-style chat ─────────────────────────────── */

.demo-claude {
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid #d8cfc0;
  box-shadow: 0 6px 24px -8px rgba(28,24,21,.16), 0 2px 6px rgba(28,24,21,.05);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ── Header ───────────────────────────────────────────────── */

.demo-claude-header {
  background: #f5f1e9;
  border-bottom: 1px solid #e7e0d4;
  padding: 0.55rem 0.85rem;
  display: flex;
  align-items: center;
}

.demo-claude-dots {
  display: flex;
  gap: 0.4rem;
  width: 2.5rem;
}

.demo-claude-dots span {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #d8cfc0;
}

.demo-claude-model {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: #57534e;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.demo-claude-model svg {
  color: #a8a29e;
}

/* ── Chat body ────────────────────────────────────────────── */

.demo-claude-body {
  background: #fbf9f5;
  height: 15rem;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.demo-claude-body--two-turn {
  height: 22rem;
}

/* Two-turn variant where turn two is a write (extra tool row).
   Taller on phones, where the bubbles wrap to more lines. */
.demo-claude-body--two-turn-write {
  height: 30rem;
}

/* Narrow phones wrap the bubbles hardest: measured content reaches ~450px at a
   320px viewport, leaving only ~30px under the 30rem window. Give the smallest
   screens a notch more so a line of copy can grow without clipping the last
   row. Content is bottom-aligned, so the extra height reads as breathing room
   above the chat, and only below 360px. */
@media (max-width: 359px) {
  .demo-claude-body--two-turn-write {
    height: 32rem;
  }
}

@media (min-width: 640px) {
  .demo-claude-body--two-turn-write {
    height: 24rem;
  }
}

.demo-cl-scroll {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.in-view .demo-cl-scroll {
  animation: cl-scroll 30s ease-in-out infinite;
}

/*
  Scroll: content height vs 20rem body (minus 2.5rem padding = 17.5rem usable).
  Phase 1 (~9rem) + Phase 2 (~10rem) = ~19rem → barely overflows.
  Phase 3 adds ~10rem more → needs real scrolling.
  Each scroll step completes just before its message expands.
*/
@keyframes cl-scroll {
  0%, 44%   { transform: translateY(0); }
  46%       { transform: translateY(-2rem); }
  52%       { transform: translateY(-2rem); }
  54%       { transform: translateY(-5.5rem); }
  58%       { transform: translateY(-5.5rem); }
  59.5%     { transform: translateY(-7.5rem); }
  63%       { transform: translateY(-7.5rem); }
  64.5%     { transform: translateY(-8.5rem); }
  70%       { transform: translateY(-8.5rem); }
  71.5%     { transform: translateY(-12rem); }
  83.3%     { transform: translateY(-12rem); }
  86.7%     { transform: translateY(0); }
  100%      { transform: translateY(0); }
}

/* ── Message row ──────────────────────────────────────────── */

.demo-cl-row {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}

.demo-cl-row-user {
  justify-content: flex-end;
}

/* ── Claude icon ──────────────────────────────────────────── */

.demo-cl-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
}

.demo-cl-icon svg {
  width: 100%;
  height: 100%;
}

/* ── User bubble ──────────────────────────────────────────── */

.demo-cl-user-bubble {
  background: #fbf3e6;
  border: 1px solid #efd9bb;
  border-radius: 1.25rem;
  padding: 0.6rem 1rem;
  color: #3a332d;
  max-width: 85%;
}

/* ── Claude text ──────────────────────────────────────────── */

.demo-cl-body {
  min-width: 0;
  flex: 1;
}

.demo-cl-text {
  color: #2c2722;
  padding-top: 0.1rem;
}

.demo-cl-body .demo-cl-tool + .demo-cl-text {
  margin-top: 0.5rem;
}

.demo-cl-text code {
  display: inline;
  background: #e7e5e4;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.8em;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: #44403c;
}

.demo-cl-text strong {
  font-weight: 600;
}

/* ── Tool use block ───────────────────────────────────────── */

.demo-cl-tool {
  display: flex;
  align-items: center;
  background: #f4ecdf;
  border: 1px solid #ecd8b8;
  border-radius: 0.625rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.78rem;
}

.demo-cl-tool-left {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}

.demo-cl-tool-svg {
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
  color: #b5510a;
}

.demo-cl-tool-label {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 0.76rem;
  color: #8f3f06;
  white-space: nowrap;
}

/* ── Spinner + check ──────────────────────────────────────── */

.demo-cl-spinner {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border: 1.5px solid #e7e5e4;
  border-top-color: #a8a29e;
  border-radius: 50%;
  opacity: 0;
  flex-shrink: 0;
}

.demo-cl-check {
  color: #3f7d5b;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0;
  flex-shrink: 0;
}

/* ── Typing indicator ─────────────────────────────────────── */

.demo-cl-typing {
  display: flex;
  gap: 0.3rem;
  padding: 0.45rem 0;
}

.demo-cl-typing span {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: #a8a29e;
}

/* ── Keyframes ────────────────────────────────────────────── */

@keyframes demo-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-3px); }
}

@keyframes demo-spin {
  to { transform: rotate(360deg); }
}

/*
  30s loop. Messages use max-height + margin-top to collapse/expand.
  The scroll container is bottom-anchored, so expanding messages
  push content upward — older messages scroll out of view naturally.

  Phase 1 — save a trip recommendation
    0.5s  (1.7%)  — user msg 1 in
    2.5s  (8.3%)  — typing 1 in
    4.0s  (13.3%) — typing 1 out
    4.2s  (14%)   — tool create_note in
    5.8s  (19.3%) — check in
    6.3s  (21%)   — claude response 1 in

  Phase 2 — what trips do I have?
    8.5s  (28.3%) — user msg 2 in
   10.2s  (34%)   — typing 2 in
   11.5s  (38.3%) — typing 2 out
   11.7s  (39%)   — tool search_notes in
   13.2s  (44%)   — check in
   13.7s  (45.7%) — claude response 2 in

  Phase 3 — tell me about Norway
   16.0s  (53.3%) — user msg 3 in
   17.7s  (59%)   — typing 3 in
   19.0s  (63.3%) — typing 3 out
   19.2s  (64%)   — tool get_note in
   20.7s  (69%)   — check in
   21.2s  (70.7%) — claude response 3 in

  Fade out
   25.0s  (83.3%) — start fade
   26.0s  (86.7%) — fully hidden
   30.0s  (100%)  — loop
*/

/* ── Persistent messages (expand in, collapse at end) ─────── */

/* mt = margin-top when visible. First msg gets 0, rest get 0.75rem */

@keyframes cl-a1 {
  0%        { max-height: 0; opacity: 0; margin-top: 0; }
  1.7%      { max-height: 10rem; opacity: 1; margin-top: 0; }
  83.3%     { max-height: 10rem; opacity: 1; margin-top: 0; }
  86.7%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a3 {
  0%, 13%   { max-height: 0; opacity: 0; margin-top: 0; }
  14%       { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  83.3%     { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  86.7%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a4 {
  0%, 20%   { max-height: 0; opacity: 0; margin-top: 0; }
  21%       { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  83.3%     { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  86.7%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a5 {
  0%, 27.3% { max-height: 0; opacity: 0; margin-top: 0; }
  28.3%     { max-height: 6rem; opacity: 1; margin-top: 1.25rem; }
  83.3%     { max-height: 6rem; opacity: 1; margin-top: 1.25rem; }
  86.7%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a7 {
  0%, 38%   { max-height: 0; opacity: 0; margin-top: 0; }
  39%       { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  83.3%     { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  86.7%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a8 {
  0%, 44.7% { max-height: 0; opacity: 0; margin-top: 0; }
  45.7%     { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  83.3%     { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  86.7%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a9 {
  0%, 52.3% { max-height: 0; opacity: 0; margin-top: 0; }
  53.3%     { max-height: 6rem; opacity: 1; margin-top: 1.25rem; }
  83.3%     { max-height: 6rem; opacity: 1; margin-top: 1.25rem; }
  86.7%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a11 {
  0%, 63%   { max-height: 0; opacity: 0; margin-top: 0; }
  64%       { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  83.3%     { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  86.7%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a12 {
  0%, 70%   { max-height: 0; opacity: 0; margin-top: 0; }
  70.7%     { max-height: 8rem; opacity: 1; margin-top: 0.75rem; }
  83.3%     { max-height: 8rem; opacity: 1; margin-top: 0.75rem; }
  86.7%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

/* ── Typing indicators (expand in, collapse out) ──────────── */

@keyframes cl-a2 {
  0%, 7.5%  { max-height: 0; opacity: 0; margin-top: 0; }
  8.3%      { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  12.5%     { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  13.3%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a6 {
  0%, 33%   { max-height: 0; opacity: 0; margin-top: 0; }
  34%       { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  37.5%     { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  38.3%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a10 {
  0%, 58%   { max-height: 0; opacity: 0; margin-top: 0; }
  59%       { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  62.5%     { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  63.3%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

/* ── Spinners + checks ────────────────────────────────────── */

@keyframes cl-a3s {
  0%, 13.5% { opacity: 0; }
  14.5%     { opacity: 1; }
  18.7%     { opacity: 1; }
  19.3%     { opacity: 0; }
  100%      { opacity: 0; }
}

@keyframes cl-a3c {
  0%, 18.7% { opacity: 0; transform: scale(0.5); }
  19.7%     { opacity: 1; transform: scale(1); }
  83.3%     { opacity: 1; transform: scale(1); }
  86.7%     { opacity: 0; transform: scale(1); }
  100%      { opacity: 0; }
}

@keyframes cl-a7s {
  0%, 38.5% { opacity: 0; }
  39.5%     { opacity: 1; }
  43.5%     { opacity: 1; }
  44%       { opacity: 0; }
  100%      { opacity: 0; }
}

@keyframes cl-a7c {
  0%, 43.5% { opacity: 0; transform: scale(0.5); }
  44.5%     { opacity: 1; transform: scale(1); }
  83.3%     { opacity: 1; transform: scale(1); }
  86.7%     { opacity: 0; transform: scale(1); }
  100%      { opacity: 0; }
}

@keyframes cl-a11s {
  0%, 63.5% { opacity: 0; }
  64.5%     { opacity: 1; }
  68.5%     { opacity: 1; }
  69%       { opacity: 0; }
  100%      { opacity: 0; }
}

@keyframes cl-a11c {
  0%, 68.5% { opacity: 0; transform: scale(0.5); }
  69.5%     { opacity: 1; transform: scale(1); }
  83.3%     { opacity: 1; transform: scale(1); }
  86.7%     { opacity: 0; transform: scale(1); }
  100%      { opacity: 0; }
}

/* ── Apply animations ─────────────────────────────────────── */

.in-view .demo-cl-a1   { animation: cl-a1 30s ease-out infinite; }
.in-view .demo-cl-a2   { animation: cl-a2 30s ease-out infinite; }
.in-view .demo-cl-a3   { animation: cl-a3 30s ease-out infinite; }
.in-view .demo-cl-a3s  { animation: cl-a3s 30s ease infinite, demo-spin 0.6s linear infinite; }
.in-view .demo-cl-a3c  { animation: cl-a3c 30s ease infinite; }
.in-view .demo-cl-a4   { animation: cl-a4 30s ease-out infinite; }
.in-view .demo-cl-a5   { animation: cl-a5 30s ease-out infinite; }
.in-view .demo-cl-a6   { animation: cl-a6 30s ease-out infinite; }
.in-view .demo-cl-a7   { animation: cl-a7 30s ease-out infinite; }
.in-view .demo-cl-a7s  { animation: cl-a7s 30s ease infinite, demo-spin 0.6s linear infinite; }
.in-view .demo-cl-a7c  { animation: cl-a7c 30s ease infinite; }
.in-view .demo-cl-a8   { animation: cl-a8 30s ease-out infinite; }
.in-view .demo-cl-a9   { animation: cl-a9 30s ease-out infinite; }
.in-view .demo-cl-a10  { animation: cl-a10 30s ease-out infinite; }
.in-view .demo-cl-a11  { animation: cl-a11 30s ease-out infinite; }
.in-view .demo-cl-a11s { animation: cl-a11s 30s ease infinite, demo-spin 0.6s linear infinite; }
.in-view .demo-cl-a11c { animation: cl-a11c 30s ease infinite; }
.in-view .demo-cl-a12  { animation: cl-a12 30s ease-out infinite; }

.in-view .demo-cl-a2 .demo-cl-typing span:nth-child(1),
.in-view .demo-cl-a6 .demo-cl-typing span:nth-child(1),
.in-view .demo-cl-a10 .demo-cl-typing span:nth-child(1) { animation: demo-bounce 0.9s ease infinite 0s; }
.in-view .demo-cl-a2 .demo-cl-typing span:nth-child(2),
.in-view .demo-cl-a6 .demo-cl-typing span:nth-child(2),
.in-view .demo-cl-a10 .demo-cl-typing span:nth-child(2) { animation: demo-bounce 0.9s ease infinite 0.15s; }
.in-view .demo-cl-a2 .demo-cl-typing span:nth-child(3),
.in-view .demo-cl-a6 .demo-cl-typing span:nth-child(3),
.in-view .demo-cl-a10 .demo-cl-typing span:nth-child(3) { animation: demo-bounce 0.9s ease infinite 0.3s; }

/* ── Demo carousel slides (10s one-shot; animate on any visible .demo-slide) ── */

.ds-scroll {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

/*
  10s one-shot reveal for a two-turn exchange:
  user → typing → tool → response → user → typing → response.
  Plays once and holds (forwards) so the full conversation stays visible.

  0.3s  (3%)  — user 1
  0.9s  (9%)  — typing 1
  1.9s  (19%) — typing out, tool + spinner in
  3.3s  (33%) — spinner out, check in
  3.9s  (39%) — response 1
  5.0s  (50%) — user 2
  5.6s  (56%) — typing 2
  6.7s  (67%) — typing out, response 2 in
  10s  (100%) — final state held
*/

@keyframes ds-a1 {
  0%        { max-height: 0; opacity: 0; margin-top: 0; }
  3%        { max-height: 10rem; opacity: 1; margin-top: 0; }
  100%      { max-height: 10rem; opacity: 1; margin-top: 0; }
}

@keyframes ds-a2 {
  0%, 8%    { max-height: 0; opacity: 0; margin-top: 0; }
  9%        { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  18%       { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  19%, 100% { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes ds-a3 {
  0%, 18%   { max-height: 0; opacity: 0; margin-top: 0; }
  19%       { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  100%      { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
}

@keyframes ds-a3s {
  0%, 19%   { opacity: 0; }
  20%       { opacity: 1; }
  32%       { opacity: 1; }
  33%, 100% { opacity: 0; }
}

@keyframes ds-a3c {
  0%, 32%   { opacity: 0; transform: scale(0.5); }
  33%       { opacity: 1; transform: scale(1); }
  100%      { opacity: 1; transform: scale(1); }
}

@keyframes ds-a4 {
  0%, 38%   { max-height: 0; opacity: 0; margin-top: 0; }
  39%       { max-height: 8rem; opacity: 1; margin-top: 0.75rem; }
  100%      { max-height: 8rem; opacity: 1; margin-top: 0.75rem; }
}

@keyframes ds-a5 {
  0%, 49%   { max-height: 0; opacity: 0; margin-top: 0; }
  50%       { max-height: 10rem; opacity: 1; margin-top: 1rem; }
  100%      { max-height: 10rem; opacity: 1; margin-top: 1rem; }
}

@keyframes ds-a6 {
  0%, 55%   { max-height: 0; opacity: 0; margin-top: 0; }
  56%       { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  66%       { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  67%, 100% { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes ds-a7 {
  0%, 66%   { max-height: 0; opacity: 0; margin-top: 0; }
  67%       { max-height: 8rem; opacity: 1; margin-top: 0.75rem; }
  100%      { max-height: 8rem; opacity: 1; margin-top: 0.75rem; }
}

/*
  Write variant for turn two (hero slide): shares ds-a1 to ds-a6 above,
  then reveals a tool call before the closing response.

  6.7s (67%) — typing out, notes-update tool + spinner in
  8.0s (80%) — spinner out, check in
  8.5s (85%) — response 2
*/

@keyframes ds-w6t {
  0%, 66%   { max-height: 0; opacity: 0; margin-top: 0; }
  67%       { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  100%      { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
}

@keyframes ds-w6ts {
  0%, 67%   { opacity: 0; }
  68%       { opacity: 1; }
  79%       { opacity: 1; }
  80%, 100% { opacity: 0; }
}

@keyframes ds-w6tc {
  0%, 79%   { opacity: 0; transform: scale(0.5); }
  80%       { opacity: 1; transform: scale(1); }
  100%      { opacity: 1; transform: scale(1); }
}

@keyframes ds-w7 {
  0%, 84%   { max-height: 0; opacity: 0; margin-top: 0; }
  85%       { max-height: 8rem; opacity: 1; margin-top: 0.75rem; }
  100%      { max-height: 8rem; opacity: 1; margin-top: 0.75rem; }
}

/* Homepage role switcher (pure CSS, no JS). Radios are the source of truth:
   exactly one is always :checked, so the ~ combinator reveals its matching
   slide. display:none on the rest keeps only one slide animating and restarts
   its keyframes on switch (display none->block resets CSS animations). Scoped
   to .demo-switch; the single-slide demo windows on other pages are untouched.

   The radios are sr-only INSIDE .demo-switch, adjacent to their labels:
   focusing one (click or Tab) keeps scroll at the tabs and puts the focus
   ring on a visible label. Surfaces outside the hero section (persona
   use-case link, template gallery card) are reached with
   `main:has(#hero-demo-N:checked)` rules further down, so they don't
   constrain where the radios live. On browsers without :has() those
   surfaces degrade quietly: no persona link (the All use cases fallback
   still renders) and no card highlight; the demo switcher itself never
   depends on :has(). */
.demo-switch .demo-slide { display: none; }
#hero-demo-0:checked ~ .demo-switch-body .demo-slide--0,
#hero-demo-1:checked ~ .demo-switch-body .demo-slide--1,
#hero-demo-2:checked ~ .demo-switch-body .demo-slide--2,
#hero-demo-3:checked ~ .demo-switch-body .demo-slide--3,
#hero-demo-4:checked ~ .demo-switch-body .demo-slide--4,
#hero-demo-5:checked ~ .demo-switch-body .demo-slide--5 { display: block; }

/* Height per persona. The Personal slide is a two-turn *write* demo and needs
   the taller window; the other five are shorter, so shrink the window for them
   to avoid a large empty gap above the chat. Matches
   .demo-claude-body--two-turn-write, which the same demo uses off the hero. */
.demo-switch-body .demo-claude-body { height: 22rem; }
#hero-demo-0:checked ~ .demo-switch-body .demo-claude-body { height: 30rem; }
/* Same narrow-phone allowance as .demo-claude-body--two-turn-write above: the
   hero runs the identical demo, so the two must move together. */
@media (max-width: 359px) {
  #hero-demo-0:checked ~ .demo-switch-body .demo-claude-body { height: 32rem; }
}
@media (min-width: 640px) {
  #hero-demo-0:checked ~ .demo-switch-body .demo-claude-body { height: 24rem; }
}

/* Tab labels: inactive by default, the checked radio's label goes dark. */
.demo-switch .demo-tab { color: var(--color-muted); background: transparent; }
.demo-switch .demo-tab:hover { color: var(--color-ink); }
#hero-demo-0:checked ~ .demo-tabs label[for="hero-demo-0"],
#hero-demo-1:checked ~ .demo-tabs label[for="hero-demo-1"],
#hero-demo-2:checked ~ .demo-tabs label[for="hero-demo-2"],
#hero-demo-3:checked ~ .demo-tabs label[for="hero-demo-3"],
#hero-demo-4:checked ~ .demo-tabs label[for="hero-demo-4"],
#hero-demo-5:checked ~ .demo-tabs label[for="hero-demo-5"] { color: var(--color-paper); background: var(--color-ink); }
/* Keyboard focus on the sr-only radio shows a ring on its visible label. */
#hero-demo-0:focus-visible ~ .demo-tabs label[for="hero-demo-0"],
#hero-demo-1:focus-visible ~ .demo-tabs label[for="hero-demo-1"],
#hero-demo-2:focus-visible ~ .demo-tabs label[for="hero-demo-2"],
#hero-demo-3:focus-visible ~ .demo-tabs label[for="hero-demo-3"],
#hero-demo-4:focus-visible ~ .demo-tabs label[for="hero-demo-4"],
#hero-demo-5:focus-visible ~ .demo-tabs label[for="hero-demo-5"] { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Persona use-case link under the hero demo: one deep link per persona,
   only the checked one shows. Reached with :has() because the links sit
   outside .demo-switch; without :has() support none show and the adjacent
   "All use cases" link carries the row. */
.uc-for { display: none; }
main:has(#hero-demo-0:checked) .uc-for--0,
main:has(#hero-demo-1:checked) .uc-for--1,
main:has(#hero-demo-2:checked) .uc-for--2,
main:has(#hero-demo-3:checked) .uc-for--3,
main:has(#hero-demo-4:checked) .uc-for--4,
main:has(#hero-demo-5:checked) .uc-for--5 { display: inline-flex; }

/* Template gallery sync: the checked persona's card jumps to the front of
   the grid, picks up the accent border, and reveals its "For …" chip. Cards
   are rendered in persona order, so the default (Personal, index 0) keeps
   the grid in its authored order. Progressive enhancement via :has():
   without it the grid simply stays in authored order with no highlight. */
.tpl-match { display: none; }
/* Team (slot 5) maps to no template, so hide the "your role's template leads
   the grid" sentence while it is picked; it would promise a card that is not
   there. Keep the slot number in step with the registry in home.html.erb. */
main:has(#hero-demo-5:checked) .tpl-hint { display: none; }
main:has(#hero-demo-0:checked) .tpl-card--0,
main:has(#hero-demo-1:checked) .tpl-card--1,
main:has(#hero-demo-2:checked) .tpl-card--2,
main:has(#hero-demo-3:checked) .tpl-card--3,
main:has(#hero-demo-4:checked) .tpl-card--4,
main:has(#hero-demo-5:checked) .tpl-card--5 { order: -1; border-color: var(--color-accent); }
main:has(#hero-demo-0:checked) .tpl-card--0 .tpl-match,
main:has(#hero-demo-1:checked) .tpl-card--1 .tpl-match,
main:has(#hero-demo-2:checked) .tpl-card--2 .tpl-match,
main:has(#hero-demo-3:checked) .tpl-card--3 .tpl-match,
main:has(#hero-demo-4:checked) .tpl-card--4 .tpl-match,
main:has(#hero-demo-5:checked) .tpl-card--5 .tpl-match { display: inline-flex; }

/* Animation runs on ANY visible .demo-slide (display:none gates the hidden ones).
   INVARIANT: a page must never stack multiple .demo-slide elements that should
   animate independently unless they live inside .demo-switch (which display:none-
   gates all but the :checked one). Every non-switch usage renders exactly one
   slide, so a single always-visible slide animates as intended. */
.demo-slide .ds-a1     { animation: ds-a1 10s ease-out forwards; }
.demo-slide .ds-a2     { animation: ds-a2 10s ease-out forwards; }
.demo-slide .ds-a3     { animation: ds-a3 10s ease-out forwards; }
.demo-slide .ds-a3s    { animation: ds-a3s 10s ease forwards, demo-spin 0.6s linear infinite; }
.demo-slide .ds-a3c    { animation: ds-a3c 10s ease forwards; }
.demo-slide .ds-a4     { animation: ds-a4 10s ease-out forwards; }
.demo-slide .ds-a5     { animation: ds-a5 10s ease-out forwards; }
.demo-slide .ds-a6     { animation: ds-a6 10s ease-out forwards; }
.demo-slide .ds-a7     { animation: ds-a7 10s ease-out forwards; }
.demo-slide .ds-w6t    { animation: ds-w6t 10s ease-out forwards; }
.demo-slide .ds-w6ts   { animation: ds-w6ts 10s ease forwards, demo-spin 0.6s linear infinite; }
.demo-slide .ds-w6tc   { animation: ds-w6tc 10s ease forwards; }
.demo-slide .ds-w7     { animation: ds-w7 10s ease-out forwards; }

.demo-slide .ds-a2 .demo-cl-typing span:nth-child(1),
.demo-slide .ds-a6 .demo-cl-typing span:nth-child(1) { animation: demo-bounce 0.9s ease infinite 0s; }
.demo-slide .ds-a2 .demo-cl-typing span:nth-child(2),
.demo-slide .ds-a6 .demo-cl-typing span:nth-child(2) { animation: demo-bounce 0.9s ease infinite 0.15s; }
.demo-slide .ds-a2 .demo-cl-typing span:nth-child(3),
.demo-slide .ds-a6 .demo-cl-typing span:nth-child(3) { animation: demo-bounce 0.9s ease infinite 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .demo-slide .ds-a1,
  .demo-slide .ds-a2,
  .demo-slide .ds-a3,
  .demo-slide .ds-a3c,
  .demo-slide .ds-a4,
  .demo-slide .ds-a5,
  .demo-slide .ds-a6,
  .demo-slide .ds-a7,
  .demo-slide .ds-w6t,
  .demo-slide .ds-w6tc,
  .demo-slide .ds-w7 {
    animation-duration: 0.01ms;
  }

  .demo-slide .ds-a3s {
    animation: ds-a3s 0.01ms ease forwards;
  }

  .demo-slide .ds-w6ts {
    animation: ds-w6ts 0.01ms ease forwards;
  }

  .demo-slide .demo-cl-typing span {
    animation: none;
  }
}

/* ── Meeting Prep template demo (20s loop) ────────────────── */
/*
  Phase 1 — Before meeting (briefing)
    0.5s  (2.5%)  — user: "Brief me for my 2pm with Sarah"
    2.0s  (10%)   — typing
    3.5s  (17.5%) — typing out
    3.7s  (18.5%) — tool: search + spinner
    5.0s  (25%)   — check
    5.5s  (27.5%) — response

  Phase 2 — After meeting (capture)
    8.0s  (40%)   — user: "We decided to push launch to May..."
    9.5s  (47.5%) — typing
   11.0s  (55%)   — typing out
   11.2s  (56%)   — tool: notes-create + spinner
   12.5s  (62.5%) — check
   13.0s  (65%)   — response

  Fade out
   17.0s  (85%)   — start fade
   18.0s  (90%)   — hidden
   20.0s  (100%)  — loop
*/

.mp-scroll {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.in-view .mp-scroll {
  animation: mp-scroll 20s ease-in-out infinite;
}

@keyframes mp-scroll {
  0%, 38%   { transform: translateY(0); }
  40%       { transform: translateY(-2rem); }
  54%       { transform: translateY(-2rem); }
  56%       { transform: translateY(-5rem); }
  63%       { transform: translateY(-5rem); }
  65%       { transform: translateY(-6rem); }
  85%       { transform: translateY(-6rem); }
  90%       { transform: translateY(0); }
  100%      { transform: translateY(0); }
}

/* Messages */
@keyframes mp-a1 {
  0%        { max-height: 0; opacity: 0; margin-top: 0; }
  2.5%      { max-height: 10rem; opacity: 1; margin-top: 0; }
  85%       { max-height: 10rem; opacity: 1; margin-top: 0; }
  90%       { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes mp-a2 {
  0%, 9%    { max-height: 0; opacity: 0; margin-top: 0; }
  10%       { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  16.5%     { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  17.5%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes mp-a3 {
  0%, 17.5% { max-height: 0; opacity: 0; margin-top: 0; }
  18.5%     { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  85%       { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  90%       { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes mp-a4 {
  0%, 26.5% { max-height: 0; opacity: 0; margin-top: 0; }
  27.5%     { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  85%       { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  90%       { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes mp-a5 {
  0%, 39%   { max-height: 0; opacity: 0; margin-top: 0; }
  40%       { max-height: 6rem; opacity: 1; margin-top: 1.25rem; }
  85%       { max-height: 6rem; opacity: 1; margin-top: 1.25rem; }
  90%       { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes mp-a6 {
  0%, 46.5% { max-height: 0; opacity: 0; margin-top: 0; }
  47.5%     { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  54%       { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  55%       { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes mp-a7 {
  0%, 55%   { max-height: 0; opacity: 0; margin-top: 0; }
  56%       { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  85%       { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  90%       { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes mp-a8 {
  0%, 64%   { max-height: 0; opacity: 0; margin-top: 0; }
  65%       { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  85%       { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  90%       { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

/* Spinners + checks */
@keyframes mp-a3s {
  0%, 19%   { opacity: 0; }
  19.5%     { opacity: 1; }
  24%       { opacity: 1; }
  25%       { opacity: 0; }
  100%      { opacity: 0; }
}

@keyframes mp-a3c {
  0%, 24%   { opacity: 0; transform: scale(0.5); }
  25%       { opacity: 1; transform: scale(1); }
  85%       { opacity: 1; transform: scale(1); }
  90%       { opacity: 0; transform: scale(1); }
  100%      { opacity: 0; }
}

@keyframes mp-a7s {
  0%, 56.5% { opacity: 0; }
  57%       { opacity: 1; }
  61.5%     { opacity: 1; }
  62.5%     { opacity: 0; }
  100%      { opacity: 0; }
}

@keyframes mp-a7c {
  0%, 61.5% { opacity: 0; transform: scale(0.5); }
  62.5%     { opacity: 1; transform: scale(1); }
  85%       { opacity: 1; transform: scale(1); }
  90%       { opacity: 0; transform: scale(1); }
  100%      { opacity: 0; }
}

/* Apply animations */
.in-view .mp-a1   { animation: mp-a1 20s ease-out infinite; }
.in-view .mp-a2   { animation: mp-a2 20s ease-out infinite; }
.in-view .mp-a3   { animation: mp-a3 20s ease-out infinite; }
.in-view .mp-a3s  { animation: mp-a3s 20s ease infinite, demo-spin 0.6s linear infinite; }
.in-view .mp-a3c  { animation: mp-a3c 20s ease infinite; }
.in-view .mp-a4   { animation: mp-a4 20s ease-out infinite; }
.in-view .mp-a5   { animation: mp-a5 20s ease-out infinite; }
.in-view .mp-a6   { animation: mp-a6 20s ease-out infinite; }
.in-view .mp-a7   { animation: mp-a7 20s ease-out infinite; }
.in-view .mp-a7s  { animation: mp-a7s 20s ease infinite, demo-spin 0.6s linear infinite; }
.in-view .mp-a7c  { animation: mp-a7c 20s ease infinite; }
.in-view .mp-a8   { animation: mp-a8 20s ease-out infinite; }

.in-view .mp-a2 .demo-cl-typing span:nth-child(1),
.in-view .mp-a6 .demo-cl-typing span:nth-child(1) { animation: demo-bounce 0.9s ease infinite 0s; }
.in-view .mp-a2 .demo-cl-typing span:nth-child(2),
.in-view .mp-a6 .demo-cl-typing span:nth-child(2) { animation: demo-bounce 0.9s ease infinite 0.15s; }
.in-view .mp-a2 .demo-cl-typing span:nth-child(3),
.in-view .mp-a6 .demo-cl-typing span:nth-child(3) { animation: demo-bounce 0.9s ease infinite 0.3s; }