/* CLAUDE 10-19 (owner: "why are we not promoting the ai usage on the main page"): the AI story of the two marketing
   surfaces, the app's signed-out landing (#lp) and ripclip.org (tools/build_site.py ships this file and landing-ai.js
   there). Same tokens as landing-wow.css (each page defines --ink, --soft, --dim, --hair, --panel, --sig, --ease-out).

   Pieces, in page order:
     .ai-row    the AI chip row under the hero, grouped by job (Clip / Edit / Post / With your AI)
     .ai-rt     Riptide, the named clip model: two signal lanes are read by a scan, three moments light up, the clip
                comes out (an illustration around a real exported clip; labelled on the page)
     .ai-clean  speech cleanup: filler words, pauses and a bad take are struck from a transcript line
     .ai-type   AI titles: the title, caption and hashtags write themselves in, line by line
     .ai-rf     auto reframe on ripclip.org: the 9:16 crop finds the face on the wide shot (the app has its own, #lpFFrame)
     .ai-more   the rest of the AI tools as plain rows
     .ai-chat   RipClip inside an AI assistant: the real tool flow (import_video, estimate_hu, find_clips, draft_post)

   Every motion has one reason: the row lands after the headline (what the product is, right under it), the scan reads
   the stream (what Riptide does), the strikes cut (what cleanup does), the lines write in (what the titles model does),
   the chat plays the order the tools run in (what the assistant does). Each plays once, when it is reached
   (landing-wow-style: landing-ai.js adds .in from an IntersectionObserver). Only transform, opacity and clip-path move.
   Reduced motion (plan 3.5): no movement, the final state at once with a short fade. Without JavaScript everything is
   simply shown (the hidden states hang on .ai-js, set by landing-ai.js). */

/* ===== tokens (tools/style_drift.py: no literal radius, colour or duration below). The system's scale (4 / 6 / 10 / 14 /
   999 px, --d-hover, --d-ui, --ease-out, --go-ink) is used where it fits; the marketing sizes the landing may bend to
   (plan 5.4) and the AI layer's own timings are named once here, so every value has one home. ===== */
:root {
  --ai-r-line: 2px; /* the scan line, the strike */
  --ai-r-logo: 5px; /* the 18 px R mark in the conversation's bar */
  --ai-r-win: 7px; /* a found window on Riptide's lanes */
  --ai-r-panel: 16px; /* the lanes, the clip, a chat bubble */
  --ai-r-phone: 18px; /* the captions clip */
  --ai-r-card: 20px; /* a ripclip.org AI card */
  --ai-r-chat: 22px; /* the conversation */
  --ai-r-feature: 24px; /* Riptide's card */
  --d-ai-rise: 620ms; /* a chip landing */
  --d-ai-glint: 900ms; /* the light across the chips */
  --d-ai-fade: 200ms; /* the reduced-motion fade */
  --d-ai-light: 260ms; /* a found window lighting */
  --d-ai-turn: 480ms; /* a pick or a conversation turn rising */
  --d-ai-phone: 700ms; /* Riptide's clip rising */
  --d-ai-phone-fade: 500ms;
  --d-ai-strike: 360ms; /* a strike drawing */
  --d-ai-dim: 400ms; /* a struck word dimming */
  --d-ai-write: 900ms; /* a title line writing in */
  --d-ai-crop: 1100ms; /* the crop gliding to the face */
  --d-ai-check: 320ms; /* a tool's check drawing */
}

/* ===== the AI chip row ===== */
.ai-row {
  list-style: none;
  margin: 26px auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: min(920px, 64vw); /* clear of the hero scene's phones at the sides (landing-scene.css) */
}
.home .ai-row {
  margin-bottom: 40px; /* ripclip.org: the row sits between the hero and the Find / Edit / Post / Track row */
}
.ai-row .ai-job {
  padding: 0 2px 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--dim);
}
.ai-row .ai-job:first-child {
  padding-left: 0;
}
.ai-row a {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 0 0 1px var(--hair2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--soft);
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color var(--d-hover, 140ms) ease,
    color var(--d-hover, 140ms) ease,
    transform var(--d-ui, 180ms) var(--ease-out);
}
.ai-row svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.ai-row small {
  margin-left: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hair2);
  color: var(--dim);
  font-size: 11.5px;
  font-weight: 550;
}
.ai-row a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .ai-row a:hover {
    background: rgba(255, 255, 255, 0.085);
    color: var(--ink);
    transform: translateY(-1px);
  }
}
.ai-row a:active {
  transform: scale(var(--press, 0.97));
}
/* a phone: one row that scrolls sideways, edges faded, never a wall of wrapped pills */
@media (max-width: 767.98px) {
  .ai-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    margin-inline: calc(50% - 50vw); /* full bleed from a centred column, on either page */
    padding: 2px 16px 4px;
    max-width: none;
    width: 100vw;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 14px, black calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent, black 14px, black calc(100% - 28px), transparent);
  }
  .ai-row::-webkit-scrollbar {
    display: none;
  }
  .ai-row > li {
    flex: none;
    scroll-snap-align: start;
  }
  .home .ai-row {
    margin-bottom: 20px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  /* the chips land after the headline (its last word starts at about 0.6 s), 45 ms apart; then one light passes across
     them, left to right, once: the row reads as one thing */
  body:not(.booting) .ai-row > li {
    animation: ai-rise var(--d-ai-rise) var(--ease-out) calc(var(--ai-wait, 980ms) + var(--i, 0) * 45ms) both;
  }
  .ai-row a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.14) 50%, transparent 70%);
    transform: translateX(-120%);
    pointer-events: none;
  }
  body:not(.booting) .ai-row a::after {
    animation: ai-glint var(--d-ai-glint) ease-in-out
      calc(var(--ai-wait, 980ms) + var(--d-ai-glint) + var(--i, 0) * 70ms) both;
  }
}
@keyframes ai-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes ai-glint {
  to {
    transform: translateX(120%);
  }
}
@keyframes ai-fade {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* !important: the app's editor.css ends with a blanket animation kill for this setting; the policy keeps the fade */
  body:not(.booting) .ai-row > li {
    animation: ai-fade var(--d-ai-fade) ease both !important;
  }
}

/* ===== the section frame (both pages) ===== */
.ai-head {
  display: grid;
  gap: 16px;
  justify-items: start;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.ai-head h2 {
  margin: 0;
}
.ai-head p {
  margin: 0;
  max-width: 52ch;
  color: var(--soft);
}
.ai-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--dim);
}
.ai-prem {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hair2);
  color: var(--soft);
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}
.ai-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--dim);
}

/* ===== Riptide ===== */
.ai-rt {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(22px, 3.4vw, 40px);
  border-radius: var(--ai-r-feature);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(118, 150, 196, 0.1), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, rgba(83, 252, 24, 0.035), transparent 70%), var(--panel);
  box-shadow:
    inset 0 0 0 1px var(--hair),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 5px rgba(0, 0, 0, 0.3),
    0 40px 80px -40px rgba(0, 0, 0, 0.9);
  margin-bottom: 14px;
}
.ai-rt .rt-txt {
  display: grid;
  gap: 14px;
  align-content: start;
}
.ai-rt h3 {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 820;
  font-stretch: 115%;
  letter-spacing: -0.045em;
  line-height: 0.95;
}
.ai-rt .rt-role {
  margin: -4px 0 0;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ai-rt .rt-txt > p:not(.rt-role):not(.ai-meta) {
  margin: 0;
  color: var(--soft);
  max-width: 44ch;
}
.ai-rt .rt-facts {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.ai-rt .rt-facts li {
  padding: 10px 0;
  border-top: 1px solid var(--hair);
  font-size: 14.5px;
  color: var(--soft);
}
.ai-rt .rt-facts b {
  color: var(--ink);
  font-weight: 620;
}
/* the visual: two lanes read by a scan, three found windows, the picks, the clip */
.rt-vis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 0.36fr);
  grid-template-rows: auto auto;
  gap: 16px 18px;
  margin: 0;
}
.rt-lanes {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 6px;
  padding: 14px 14px 30px;
  border-radius: var(--ai-r-panel);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.rt-lane {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  height: 46px;
}
.rt-lane > span {
  font-size: 12px;
  color: var(--dim);
}
.rt-lane svg {
  width: 100%;
  height: 100%;
  display: block;
}
.rt-lane .rt-base {
  fill: rgba(242, 240, 235, 0.22);
}
.rt-lane .rt-hot {
  fill: var(--sig);
}
.rt-track {
  position: absolute;
  top: 14px;
  bottom: 30px;
  left: calc(14px + 74px + 10px);
  right: 14px;
  pointer-events: none;
}
.rt-win {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: calc(var(--x) * 100%);
  width: calc(var(--w) * 100%);
  border-radius: var(--ai-r-win);
  background: rgba(83, 252, 24, 0.07);
  box-shadow: inset 0 0 0 1px rgba(83, 252, 24, 0.55);
}
.rt-win time {
  position: absolute;
  left: 50%;
  bottom: -24px;
  transform: translateX(-50%);
  font: 500 11.5px var(--mono, ui-monospace, monospace);
  color: var(--sig);
  white-space: nowrap;
}
.rt-sweep {
  position: absolute;
  inset: 0;
}
.rt-sweep::after {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  right: 0;
  width: 2px;
  border-radius: var(--ai-r-line);
  background: var(--ink);
  box-shadow: 0 0 14px rgba(242, 240, 235, 0.35);
}
.rt-sweep::before {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  right: 0;
  width: 90px;
  background: linear-gradient(90deg, transparent, rgba(242, 240, 235, 0.07));
}
.rt-picks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  align-content: center;
}
.rt-picks li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--hair);
  font-size: 14.5px;
}
.rt-picks li:first-child {
  border-top: 0;
}
.rt-picks time {
  font: 500 12px var(--mono, ui-monospace, monospace);
  color: var(--sig);
}
.rt-picks q {
  color: var(--ink);
  quotes: '\201C' '\201D';
}
.rt-phone {
  position: relative;
  align-self: center;
  aspect-ratio: 9 / 16;
  border-radius: var(--ai-r-panel);
  overflow: hidden;
  background: black;
  box-shadow:
    0 0 0 1px var(--hair2),
    0 24px 50px -20px rgba(0, 0, 0, 0.9);
}
.rt-phone video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rt-cap {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  font-size: 12.5px;
  color: var(--dim);
}
/* the reading, once, when it is reached: the scan runs left to right in 2.6 s; each window lights as the scan passes its
   middle; its pick line follows; the clip rises last */
.ai-js .ai-rt {
  --scan: 2600ms;
  --d0: 250ms;
}
.ai-js .ai-rt:not(.in) .rt-sweep {
  transform: translateX(-100%);
}
.ai-js .ai-rt:not(.in) :is(.rt-win, .rt-picks li, .rt-phone) {
  opacity: 0;
}
/* a found moment's bars are there from the start, in the lane's grey; they turn green as the scan reaches them */
.ai-js .ai-rt:not(.in) .rt-hot {
  fill: rgba(242, 240, 235, 0.22);
}
@keyframes rt-light {
  from {
    fill: rgba(242, 240, 235, 0.22);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .ai-js .ai-rt:not(.in) .rt-phone {
    transform: translateY(18px) scale(0.96);
  }
  .ai-js .ai-rt.in .rt-sweep {
    animation: rt-scan var(--scan) linear var(--d0) both;
  }
  /* the scan line leaves once it has read the whole stream */
  @keyframes rt-scan {
    from {
      transform: translateX(-100%);
    }
    94% {
      opacity: 1;
    }
    to {
      transform: translateX(0);
      opacity: 0;
    }
  }
  .ai-js .ai-rt.in .rt-win {
    animation: ai-fade var(--d-ai-light) ease calc(var(--d0) + var(--scan) * (var(--x) + var(--w) / 2)) both;
  }
  .ai-js .ai-rt.in .rt-hot {
    animation: rt-light var(--d-ai-light) ease calc(var(--d0) + var(--scan) * var(--x)) both;
  }
  .ai-js .ai-rt.in .rt-picks li {
    animation: ai-rise var(--d-ai-turn) var(--ease-out)
      calc(var(--d0) + var(--scan) * (var(--x) + var(--w) / 2) + 140ms) both;
  }
  .ai-js .ai-rt.in .rt-phone {
    transition:
      opacity var(--d-ai-phone-fade) ease,
      transform var(--d-ai-phone) var(--ease-out);
    transition-delay: calc(var(--d0) + var(--scan) + 120ms);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-js .ai-rt:not(.in) .rt-sweep {
    transform: none;
  }
  .ai-js .ai-rt .rt-sweep {
    display: none;
  }
  .ai-js .ai-rt.in :is(.rt-win, .rt-picks li, .rt-phone) {
    animation: ai-fade var(--d-ai-fade) ease both !important;
  }
}
@media (max-width: 860px) {
  .ai-rt {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 520px) {
  .rt-lane {
    grid-template-columns: 52px minmax(0, 1fr);
    height: 38px;
  }
  .rt-lanes {
    padding-bottom: 14px;
  }
  .rt-track {
    bottom: 14px;
  }
  .rt-win time {
    display: none; /* the picks under the lanes carry the times; three labels collide at this width */
  }
  .rt-track {
    left: calc(14px + 52px + 10px);
  }
  .rt-vis {
    grid-template-columns: minmax(0, 1fr) 96px;
  }
  .rt-picks li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 8px 0;
    font-size: 13.5px;
  }
}

/* ===== speech cleanup: the struck words ===== */
.ai-clean {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--panel2);
}
.ai-clean p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}
.ai-clean s {
  position: relative;
  text-decoration: none;
  color: var(--soft);
  transition: opacity var(--d-ai-dim) ease;
}
.ai-clean s::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 2px;
  border-radius: var(--ai-r-line);
  background: var(--sig);
  transform-origin: left center;
}
.ai-clean s.pause {
  display: inline-block;
  min-width: 2.6em;
  font-size: 12px;
  color: var(--dim);
  font-family: var(--mono, ui-monospace, monospace);
}
.ai-clean .ai-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--dim);
}
.ai-clean .ai-kinds b {
  color: var(--soft);
  font-weight: 600;
}
.ai-js .ai-clean.in s {
  opacity: 0.45;
}
.ai-js .ai-clean:not(.in) s::after {
  transform: scaleX(0);
}
@media (prefers-reduced-motion: no-preference) {
  .ai-js .ai-clean.in s::after {
    animation: ai-strike var(--d-ai-strike) var(--ease-out) calc(300ms + var(--i, 0) * 260ms) both;
  }
  .ai-js .ai-clean.in s {
    transition-delay: calc(500ms + var(--i, 0) * 260ms);
  }
  @keyframes ai-strike {
    from {
      transform: scaleX(0);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-js .ai-clean:not(.in) s::after {
    transform: none;
  }
}

/* ===== AI titles: the lines write in ===== */
.ai-js .ai-type:not(.in) > * {
  clip-path: inset(0 100% 0 0);
}
@media (prefers-reduced-motion: no-preference) {
  .ai-js .ai-type > * {
    transition: clip-path var(--d-ai-write) var(--ease-out);
  }
  .ai-js .ai-type.in > :nth-child(2) {
    transition-delay: 150ms;
  }
  .ai-js .ai-type.in > :nth-child(3),
  .ai-js .ai-type.in > :nth-child(4) {
    transition-delay: 700ms;
  }
  .ai-js .ai-type.in > :nth-child(5) {
    transition-delay: 1300ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-js .ai-type:not(.in) > * {
    clip-path: none;
    opacity: 0;
  }
  .ai-js .ai-type > * {
    transition: opacity var(--d-ai-fade) ease;
  }
}

/* ===== the rest of the AI tools, as rows ===== */
.ai-more {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}
.ai-more li {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 14px 0;
  border-top: 1px solid var(--hair);
}
.ai-more li:nth-child(-n + 2) {
  border-top: 0;
  padding-top: 0;
}
.ai-more b {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ai-more span {
  font-size: 14px;
  color: var(--soft);
}
@media (max-width: 520px) {
  .ai-more {
    grid-template-columns: minmax(0, 1fr);
  }
  .ai-more li:nth-child(2) {
    border-top: 1px solid var(--hair);
    padding-top: 14px;
  }
}

/* ===== ripclip.org's cards (the app's live in landing.css's .bento) ===== */
.home .ai-sec {
  width: var(--wrap);
  margin: clamp(72px, 10vw, 120px) auto 0;
}
.ai-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}
.ai-card {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 20px;
  border-radius: var(--ai-r-card);
  background: var(--panel);
  box-shadow:
    inset 0 0 0 1px var(--hair),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 30px 60px -34px rgba(0, 0, 0, 0.85);
}
.ai-card h3 {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 700;
  font-stretch: 110%;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.ai-card .ai-txt {
  display: grid;
  gap: 8px;
}
.ai-card .ai-txt p:not(.ai-meta) {
  margin: 0;
  font-size: 14.5px;
  color: var(--soft);
}
.ai-c-cap {
  grid-column: span 5;
  grid-row: span 2;
}
.ai-c-rf {
  grid-column: span 7;
}
.ai-c-clean {
  grid-column: span 7;
}
.ai-c-more {
  grid-column: span 7;
}
.ai-c-title {
  grid-column: span 5;
}
.ai-cap-phone {
  position: relative;
  width: min(100%, 300px);
  justify-self: center;
  aspect-ratio: 9 / 16;
  border-radius: var(--ai-r-phone);
  overflow: hidden;
  background: black;
  box-shadow: 0 0 0 1px var(--hair2);
}
.ai-cap-phone video,
.ai-rf video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ai-gen {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--panel2);
  font-size: 14px;
}
.ai-gen .k {
  font-size: 11.5px;
  color: var(--dim);
}
.ai-gen b {
  font-size: 16px;
  font-weight: 650;
}
.ai-gen .tags {
  color: var(--soft);
}
/* auto reframe: the 9:16 crop finds the face (the app's own is #lpFFrame in landing.css) */
.ai-rf {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: black;
}
.ai-rf .crop {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 31.64%;
  left: 18.3%;
  border-radius: 6px;
  box-shadow:
    0 0 0 1.5px var(--ink),
    0 0 0 999px rgba(6, 6, 8, 0.55);
}
.ai-rf .crop span {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--go-ink);
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
}
.ai-js .ai-rf:not(.in) .crop {
  transform: translateX(50%);
}
@media (prefers-reduced-motion: no-preference) {
  .ai-js .ai-rf .crop {
    transition: transform var(--d-ai-crop) var(--ease-out) 300ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-js .ai-rf:not(.in) .crop {
    transform: none;
  }
}
@media (max-width: 980px) {
  .ai-grid > * {
    grid-column: span 12;
    grid-row: auto;
  }
}

/* ===== RipClip inside an AI assistant ===== */
.ai-agent {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.home .ai-agent {
  width: var(--wrap);
  margin: clamp(72px, 10vw, 120px) auto 0;
}
.ai-agent .ag-txt {
  display: grid;
  gap: 18px;
  justify-items: start;
}
.ai-agent .ag-txt h2 {
  margin: 0;
}
.ai-agent .ag-txt > p {
  margin: 0;
  max-width: 46ch;
  color: var(--soft);
}
.ai-agent .ag-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ai-agent .ag-apps li {
  height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hair2);
  font-size: 13.5px;
  font-weight: 550;
  color: var(--ink);
}
.ai-agent .ag-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  width: 100%;
  counter-reset: ag;
}
.ai-agent .ag-steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 2px 12px;
  padding: 13px 0;
  border-top: 1px solid var(--hair);
  counter-increment: ag;
}
.ai-agent .ag-steps li::before {
  content: counter(ag);
  grid-row: span 2;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hair2);
  font-size: 12px;
  font-weight: 650;
  color: var(--soft);
}
.ai-agent .ag-steps b {
  font-size: 15.5px;
  font-weight: 650;
}
.ai-agent .ag-steps span {
  font-size: 14px;
  color: var(--soft);
}
.ai-agent .ag-trust {
  margin: 0;
  font-size: 14px;
  color: var(--soft);
}
.ai-agent .ag-trust b {
  color: var(--ink);
  font-weight: 620;
}
/* the conversation: our own neutral styling, an illustration of the real tools (never a copy of any assistant's UI) */
.ai-chat {
  position: relative;
  margin: 0;
  border-radius: var(--ai-r-chat);
  background: radial-gradient(60% 60% at 100% 0%, rgba(118, 150, 196, 0.09), transparent 70%), var(--panel);
  box-shadow:
    inset 0 0 0 1px var(--hair),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 5px rgba(0, 0, 0, 0.3),
    0 50px 90px -40px rgba(0, 0, 0, 0.95);
  overflow: hidden;
}
.ai-chat .ch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hair);
  font-size: 13px;
  color: var(--dim);
}
.ai-chat .ch-conn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--soft);
  font-weight: 550;
}
.ai-chat .ch-conn img {
  width: 18px;
  height: 18px;
  border-radius: var(--ai-r-logo);
}
.ai-chat .ch-log {
  list-style: none;
  margin: 0;
  padding: 18px 16px 56px; /* room for Play again under the last turn */
  display: grid;
  gap: 10px;
  min-height: 470px;
  align-content: start;
}
.ai-chat .ch-log > li {
  max-width: 88%;
  font-size: 14.5px;
  line-height: 1.5;
}
.ai-chat .me {
  justify-self: end;
  padding: 10px 14px;
  border-radius: var(--ai-r-panel) var(--ai-r-panel) 4px var(--ai-r-panel);
  background: var(--ink);
  color: var(--go-ink);
  font-weight: 520;
}
.ai-chat .say {
  color: var(--ink);
  padding: 2px 2px;
}
.ai-chat .tool {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px var(--hair);
  font-size: 13px;
  color: var(--soft);
}
.ai-chat .tool code {
  font: 550 12.5px var(--mono, ui-monospace, monospace);
  color: var(--ink);
}
.ai-chat .tool svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: var(--sig);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ai-chat .tool path {
  stroke-dasharray: 20;
  stroke-dashoffset: 0;
}
.ai-chat .clips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 100%;
  width: 100%;
}
.ai-chat .clips div {
  display: grid;
  gap: 6px;
}
.ai-chat .clips img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  background: var(--panel2);
  display: block;
}
.ai-chat .clips span {
  font-size: 12px;
  line-height: 1.3;
  color: var(--soft);
}
.ai-chat .ch-replay {
  position: absolute;
  right: 12px;
  bottom: 12px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--soft);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
}
.ai-chat .ch-replay:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.1);
}
.ai-chat .ch-replay:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.ai-chat:not(.ai-done) .ch-replay {
  visibility: hidden;
}
/* the turns arrive in the order the tools really run, 520 ms apart; each tool's check draws as it finishes */
.ai-js .ai-chat:not(.in) .ch-log > li {
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ai-js .ai-chat:not(.in) .ch-log > li {
    transform: translateY(8px);
  }
  .ai-js .ai-chat.in .ch-log > li {
    animation: ai-rise var(--d-ai-turn) var(--ease-out) calc(200ms + var(--s, 0) * 520ms) both;
  }
  .ai-js .ai-chat.in .tool path {
    animation: ai-check var(--d-ai-check) var(--ease-out) calc(200ms + var(--s, 0) * 520ms + 340ms) both;
  }
  @keyframes ai-check {
    from {
      stroke-dashoffset: 20;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-js .ai-chat.in .ch-log > li {
    animation: ai-fade var(--d-ai-fade) ease both !important;
  }
  .ai-chat .ch-replay {
    display: none;
  }
}
@media (max-width: 860px) {
  .ai-agent {
    grid-template-columns: minmax(0, 1fr);
  }
  .ai-chat .ch-log {
    min-height: 0;
  }
}

/* ===== the app landing's AI band: two new cells in landing.css's 12-column bento (cap 7 x 2 rows, frame 5, clean 5,
   then more 7 and title 5: every cell filled), and the assistant band's heading block ===== */
#lp .ai-row a {
  color: var(--soft); /* landing.css's `#lp a { color: inherit }` would win otherwise */
}
@media (hover: hover) and (pointer: fine) {
  #lp .ai-row a:hover {
    color: var(--ink);
  }
}
#lp .bento > .f-clean {
  grid-column: span 5;
}
#lp .bento > .f-more {
  grid-column: span 7;
}
#lp .ai-sec .ftxt .ai-meta {
  margin-bottom: 2px;
}
#lp .ai-rt h3 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-stretch: 118%;
  font-weight: 850;
  line-height: 0.95;
}
#lp .ai-agent .ag-head {
  margin: 0;
}
#lp .ai-agent .ag-head h2 {
  font-size: clamp(1.9rem, 3.9vw, 3.3rem);
  max-width: 14ch;
}
#lp .ai-agent .ag-head h2 .soft {
  color: var(--soft);
}
#lp .ai-note {
  margin-top: 16px;
}
@media (max-width: 980px) {
  #lp .bento > :is(.f-clean, .f-more) {
    grid-column: span 12;
  }
}

/* the app landing's Pause button holds every one of these where it is */
#lp.paused :is(.ai-row, .ai-sec, .ai-agent) *,
#lp.paused :is(.ai-row, .ai-sec, .ai-agent) *::after {
  animation-play-state: paused !important;
}