:root {
  --crv-brand:#1F5F4A;
}
.crv-hero {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background:
    radial-gradient(
      circle at 72% 38%,
      var(--primary-dim),
      transparent 64%),
    var(--bg-alt);
}
.crv-site {
  background: var(--surface-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.crv-site-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px;
  color: var(--muted);
}
.crv-site-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
}
.crv-site-bar span {
  margin-left: 6px;
}
.crv-site-body {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 12px;
  overflow: hidden;
}
.crv-site-name {
  font-size: var(--text-sm);
  line-height: 1.25;
}
.crv-line {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--line-soft);
}
.crv-line--short {
  width: 58%;
}
.crv-fact {
  justify-self: start;
  font-size: 12px;
  line-height: 1.3;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--primary-dim);
  color: var(--primary-text);
  box-shadow: inset 0 0 0 1px var(--primary-line);
}
.crv-swatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}
.crv-swatch i {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--crv-brand);
}
.crv-main img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
}
.crv-formats {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.crv-format {
  flex: 1.3;
  display: grid;
  gap: 4px;
  min-width: 0;
}
.crv-format--tall {
  flex: .72;
}
.crv-format img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: var(--sh-1);
}
.crv-format small {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.motion .crv-site-body::after {
  content: "";
  position: absolute;
  inset: -40px 0 auto;
  height: 40px;
  background:
    linear-gradient(
      180deg,
      transparent,
      var(--primary-dim),
      transparent);
  opacity: 0;
}
.motion .crv-hero.is-visible .crv-site-body::after {
  animation: crv-scan 1.6s ease-in-out .35s 1 both;
}
@keyframes crv-scan {
  0% {
    top: -40px;
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}
.motion .crv-hero :is(.crv-fact, .crv-swatch) {
  transition:
    background-color .4s ease,
    color .4s ease,
    box-shadow .4s ease,
    opacity .4s ease;
  transition-delay: .6s;
}
.motion .crv-hero .crv-site-body span:nth-of-type(2) {
  transition-delay: 1s;
}
.motion .crv-hero .crv-site-body span:nth-of-type(3) {
  transition-delay: 1.4s;
}
.motion .crv-hero .crv-site-body span:nth-of-type(4) {
  transition-delay: 1.8s;
}
.motion .crv-hero:not(.is-visible) .crv-fact {
  background: transparent;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px transparent;
}
.motion .crv-hero:not(.is-visible) .crv-swatch {
  opacity: 0;
}
.motion .crv-hero .crv-main {
  transition: opacity .6s var(--ease-out-expo) 2.2s, transform .7s var(--ease-out-expo) 2.2s;
}
.motion .crv-hero:not(.is-visible) .crv-main {
  opacity: 0;
  transform: scale(.9);
}
.motion .crv-hero .crv-format {
  transition: opacity .5s ease, transform .6s var(--ease-out-expo);
  transition-delay: 2.8s;
}
.motion .crv-hero .crv-format:nth-child(2) {
  transition-delay: 3.02s;
}
.motion .crv-hero .crv-format:nth-child(3) {
  transition-delay: 3.24s;
}
.motion .crv-hero:not(.is-visible) .crv-format {
  opacity: 0;
  transform: translateY(14px);
}
.crv-brand-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.crv-brand-logo {
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -.01em;
}
.crv-brand-color {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--muted);
}
.crv-brand-color i {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--crv-brand);
}
.crv-facts {
  list-style: none;
  display: grid;
  gap: var(--sp-2);
}
.crv-facts li {
  display: grid;
  gap: 2px;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--bg-alt);
}
.crv-facts b {
  font-size: var(--text-sm);
  font-weight: 550;
}
.crv-facts small {
  font-size: var(--text-xs);
  color: var(--muted);
}
.motion .crv-facts li {
  transition: opacity .4s ease, transform .5s var(--ease-out-expo);
  transition-delay: .4s;
}
.motion .crv-facts li:nth-child(2) {
  transition-delay: .65s;
}
.motion .crv-facts li:nth-child(3) {
  transition-delay: .9s;
}
.motion .cycle-step:not(.is-visible) .crv-facts li {
  opacity: 0;
  transform: translateX(-10px);
}
.crv-gallery {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.crv-gallery-head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  margin-bottom: var(--sp-3);
}
.crv-gallery-head small {
  color: var(--muted);
  font-size: var(--text-xs);
}
.crv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
}
.crv-grid figure {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 4px;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.crv-grid figure.is-chosen {
  box-shadow: inset 0 0 0 2px var(--primary);
}
.crv-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.crv-grid figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  padding-inline: 2px;
}
.crv-star {
  font-size: 13px;
  line-height: 1;
}
.is-chosen .crv-star {
  color: var(--primary-text);
}
.crv-gallery-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.crv-gallery-foot .btn {
  pointer-events: none;
}
.motion .crv-grid figure {
  transition:
    opacity .4s ease,
    transform .5s var(--ease-out-expo),
    box-shadow .3s ease;
  transition-delay:
    .3s,
    .3s,
    1.5s;
}
.motion .crv-grid figure:nth-child(2) {
  transition-delay:
    .42s,
    .42s,
    1.75s;
}
.motion .crv-grid figure:nth-child(3) {
  transition-delay:
    .54s,
    .54s,
    2s;
}
.motion .crv-grid figure:nth-child(4) {
  transition-delay:
    .66s,
    .66s,
    2.25s;
}
.motion .cycle-step:not(.is-visible) .crv-grid figure {
  opacity: 0;
  transform: translateY(10px);
}
.motion .cycle-step:not(.is-visible) .crv-grid figure.is-chosen {
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.crv-edit {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--sp-4);
  align-items: center;
}
.crv-edit-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
}
.crv-edit-form {
  display: grid;
  gap: var(--sp-3);
}
.crv-edit-form label {
  display: grid;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--muted);
}
.crv-input {
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-card);
  color: var(--ink);
  font-size: var(--text-sm);
}
.crv-edit-form label:first-child .crv-input {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-dim);
}
.crv-typed::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--primary);
}
.crv-edit .effect-note {
  margin-top: 0;
}
.motion .cycle-step.is-visible .crv-typed::after {
  animation: crv-caret 1s steps(1) 4;
}
@keyframes crv-caret {
  50% {
    opacity: 0;
  }
}
.motion .crv-edit .effect-note {
  transition: opacity .5s ease 1.6s;
}
.motion .cycle-step:not(.is-visible) .crv-edit .effect-note {
  opacity: 0;
}
.crv-thumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.crv-thumbs img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--line-soft);
}
.crv-thumbs img.is-wide {
  width: 78px;
}
.crv-thumbs img.is-old {
  opacity: .4;
}
.crv-platforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
.crv-platform {
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--surface-card);
}
.crv-platform-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-md);
}
.crv-frames {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-3);
  min-height: 196px;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bg-alt);
}
.crv-frames span {
  flex: 1;
  display: grid;
  gap: 6px;
  justify-items: center;
  min-width: 0;
}
.crv-frames img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: var(--sh-1);
}
.crv-frames small {
  font-size: 11px;
  color: var(--muted);
}
.crv-platform ul {
  list-style: none;
  display: grid;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--muted);
}
.crv-platform li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 6px;
}
.crv-platform li::before {
  content: "✓";
  color: var(--success-text);
}
.motion .crv-frames span {
  transition: opacity .4s ease, transform .5s var(--ease-out-expo);
}
.motion .crv-frames span:nth-child(2) {
  transition-delay: .15s;
}
.motion .crv-frames span:nth-child(3) {
  transition-delay: .3s;
}
.motion .crv-platform:not(.is-visible) .crv-frames span {
  opacity: 0;
  transform: translateY(12px) scale(.96);
}
.crv-review {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--surface-card);
  border: 1px solid var(--line-soft);
}
.crv-review .chat-question {
  font-size: var(--text-sm);
}
.crv-review-rows {
  display: grid;
  gap: var(--sp-2);
}
.crv-review-row {
  display: grid;
  grid-template-columns: 112px 1fr 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: background-color .4s ease, border-color .4s ease;
}
.crv-review-row small {
  display: block;
  font-size: 11px;
  color: var(--muted);
}
.crv-review-row b {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.crv-review-row.is-weak {
  border-color: var(--warning-line);
  background: var(--warning-fill);
}
.crv-ad {
  display: grid;
  place-content: center;
  gap: 1px;
  aspect-ratio: 16/9;
  padding: 6px;
  border-radius: 6px;
  text-align: center;
  line-height: 1.1;
  overflow: hidden;
}
.crv-ad b {
  font-size: 20px;
  letter-spacing: -.02em;
}
.crv-ad i {
  font-style: normal;
  font-size: 10px;
}
.crv-ad--a {
  background: var(--crv-brand);
  color: #fff;
}
.crv-ad--b {
  background: var(--bg-alt);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.crv-ad--b b {
  font-size: 15px;
  color: var(--crv-brand);
}
.crv-ad--c {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.crv-ad--c i {
  font-size: 8px;
  color: var(--muted);
}
.crv-answer {
  display: flex;
  gap: var(--sp-2);
  color: var(--muted);
  font-size: var(--text-sm);
}
.crv-answer .agent-spark {
  flex: none;
  width: 24px;
  height: 24px;
  font-size: 13px;
}
.motion .crv-review-row {
  transition:
    opacity .4s ease,
    transform .5s var(--ease-out-expo),
    background-color .4s ease 1.3s,
    border-color .4s ease 1.3s;
}
.motion .crv-review-row:nth-child(2) {
  transition-delay:
    .15s,
    .15s,
    1.3s,
    1.3s;
}
.motion .crv-review-row:nth-child(3) {
  transition-delay:
    .3s,
    .3s,
    1.3s,
    1.3s;
}
.motion .crv-review:not(.is-visible) .crv-review-row {
  opacity: 0;
  transform: translateY(8px);
}
.motion .crv-review:not(.is-visible) .crv-review-row.is-weak {
  border-color: var(--line-soft);
  background: transparent;
}
.motion .crv-review .crv-answer {
  transition: opacity .5s ease 2s, transform .6s var(--ease-out-expo) 2s;
}
.motion .crv-review:not(.is-visible) .crv-answer {
  opacity: 0;
  transform: translateY(8px);
}
.crv-text {
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--bg-alt);
}
.crv-text-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.crv-text-pair figure {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  margin: 0;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface-card);
  border: 1px solid var(--line-soft);
}
.crv-text-pair span {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.crv-text-bad span {
  display: inline-block;
  color: var(--muted);
  filter: blur(.7px);
  transform: skewX(-7deg) rotate(-1.5deg);
  letter-spacing: .03em;
}
.crv-text-good span {
  color: var(--ink);
}
.crv-text-pair figcaption {
  font-size: var(--text-xs);
  color: var(--muted);
}
@media (max-width: 900px) {
  .crv-platforms {
    grid-template-columns: minmax(0, 1fr);
  }
  .crv-frames {
    min-height: 0;
  }
}
@media (max-width: 560px) {
  .crv-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--sp-4);
  }
  .crv-main {
    width: 72%;
    margin-inline: auto;
  }
  .crv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .crv-edit,
  .crv-text-pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .crv-review-row {
    grid-template-columns: 96px 1fr 1fr;
  }
  .crv-review-row .status-tag {
    grid-column: 1/-1;
    justify-self: start;
  }
}