/* Scoped to /v2. Sidebar stills are rendered from the unchanged live Fork panel, using example conversations. */
.v2-page { --v2-muted: #737373; }
@media (min-width: 680px) {
  .v2-page .agency-section > .agency-copy { grid-column: 1; }
  .v2-page .agency-section > .agency-scene { grid-column: 2; }
}
/* Give the agency preview a desktop browser shape, without a backdrop. */
.v2-page .agency-section > .agency-animation-scene {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.v2-page .agency-demo {
  display: flex;
  flex-direction: column;
  aspect-ratio: 16 / 10;
  border-color: #dedede;
  border-radius: 10px;
  box-shadow: 0 14px 30px -18px #00000024;
}
.v2-page .agency-demo-bar { position: relative; flex: none; height: clamp(24px, 5.5cqw, 36px); font-size: clamp(6px, 1.35cqw, 9px); }
.v2-page .agency-demo-bar > span:nth-child(2) { position: absolute; left: 50%; transform: translateX(-50%); }
.v2-page .agency-demo-stage { flex: 1; height: auto; min-height: 0; background: #fff; }
.v2-page .agency-demo .agency-demo-chat { width: 40%; }
.v2-page .agency-demo .agency-client-site { width: 100%; transform: none; transition: width 500ms var(--ease); }
.v2-page .agency-demo.is-open .agency-client-site { width: 60%; transform: none; }
.v2-page .agency-demo .product-nav { height: 12cqw; padding-inline: 5cqw; gap: 2cqw; }
.v2-page .agency-demo .product-brand { font-size: 5.7cqw; }
.v2-page .agency-demo .product-brand > span { font-size: 1.6cqw; margin: .4cqw 0 0 .6cqw; }
.v2-page .agency-demo .product-nav-links { font-size: 1.55cqw; }
.v2-page .agency-demo .product-nav-cta { padding: 1.8cqw 2.4cqw; font-size: 1.6cqw; }
.v2-page .agency-demo .product-content { top: 24%; left: 6%; width: 56%; }
.v2-page .agency-demo .product-headline-stage { font-size: 7cqw; height: 2.3em; }
.v2-page .agency-demo .product-content > p { font-size: 1.6cqw; margin-top: 1.6cqw; }
.v2-page .agency-demo .product-cta { font-size: 1.8cqw; padding: 2cqw 3cqw; gap: 3cqw; margin-top: 3cqw; }
.v2-page .agency-demo .product-can { top: 12%; right: -6%; width: 60%; height: 72%; }
.v2-page .agency-demo .product-footer { font-size: 1.4cqw; bottom: 4cqw; gap: 2cqw; padding-top: 3cqw; }
@media (min-width: 1000px) {
  .v2-page .agency-section { grid-template-columns: .85fr 1.15fr; }
}
@media (min-width: 680px) and (max-width: 999px) {
  .v2-page .agency-section { grid-template-columns: 1fr; gap: 40px; }
  .v2-page .agency-section > .agency-copy { grid-column: 1; grid-row: 1; max-width: 560px; }
  .v2-page .agency-section > .agency-scene { grid-column: 1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-page .agency-demo .agency-client-site { transition: none; }
}

.v2-page .hero-copy { color: var(--ink); }
.v2-next-gen, .v2-use-cases { scroll-margin-top: 100px; }
.v2-section-heading { text-align: center; margin-bottom: 44px; }
.v2-section-heading h2 { margin-top: 0; }
.v2-section-heading > .section-body { margin-inline: auto; max-width: 590px; text-wrap: pretty; }
.v2-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.v2-pillar { border-radius: 24px; background: #f5f5f5; padding: 32px; }
.v2-pillar-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.v2-pillar-top svg { width: 26px; height: 26px; color: #111111; }
.v2-pillar h3 { font-size: 28px; line-height: 1.15; }
.v2-pillar p { margin-top: 20px; font-size: 16px; line-height: 1.6; color: var(--v2-muted); text-wrap: pretty; }
.v2-case-selector { min-width: 0; margin-bottom: 24px; }
.v2-case-tabs { display: flex; gap: 9px; overflow-x: auto; padding: 6px 3px; scrollbar-width: none; scroll-padding-inline: 3px; }
.v2-case-tabs::-webkit-scrollbar { display: none; }
.v2-case-tabs button { flex: 0 0 auto; border: 1px solid #dedede; border-radius: 9px; background: #fff; color: #666; padding: 12px 16px; font-size: 13px; min-height: 44px; white-space: nowrap; transition: background 160ms ease, color 160ms ease; }
.v2-case-tabs button[aria-selected="true"] { background: #111111; color: #ffffff; border-color: #111111; }
.v2-case-tabs button:focus-visible, .v2-case-panel:focus-visible { outline: 2px solid #111111; outline-offset: 3px; }
.v2-case-stage { padding-top: 20px; }
.v2-case-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 80px; }
.v2-case-panel[hidden] { display: none; }
.v2-case-copy { max-width: 465px; }
.v2-case-copy h3 { font-size: 43px; line-height: 1.1; text-wrap: balance; }
.v2-case-copy > p { text-wrap: pretty; }
.v2-case-benefits { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.v2-case-benefits li { display: flex; align-items: center; gap: 9px; font-size: 14px; line-height: 1.6; color: var(--v2-muted); }
.v2-case-benefits svg { width: 14px; height: 14px; flex-shrink: 0; }
.v2-case-image { min-width: 0; width: 100%; max-width: 526px; justify-self: center; margin: 0; padding: 24px; border-radius: 24px; overflow: hidden; background: #f5f5f5; }
.v2-case-image img { display: block; width: 100%; height: auto; aspect-ratio: 476 / 700; object-fit: contain; border: 1px solid #e5e5e5; border-radius: 10px; }
.v2-closing-copy { margin-inline: auto; max-width: 540px; text-wrap: pretty; }
@media (hover: hover) and (pointer: fine) {
  .v2-case-tabs button:hover { background: #f2f2f2; color: #111111; }
  .v2-case-tabs button[aria-selected="true"]:hover { background: #292929; color: #fff; border-color: #292929; }
}
@media (max-width: 1100px) {
  .v2-pillars { gap: 13px; }
  .v2-pillar { padding: 23px 20px; }
  .v2-pillar h3 { font-size: 23px; }
  .v2-pillar p { font-size: 14px; }
  .v2-case-panel { gap: 45px; }
  .v2-case-copy h3 { font-size: 42px; }
  .v2-case-image { padding: 18px; }
}
@media (max-width: 899px) {
  .v2-case-panel { gap: 29px; }
  .v2-case-copy h3 { font-size: 32px; }
}
@media (max-width: 679px) {
  .v2-next-gen, .v2-use-cases { scroll-margin-top: 85px; }
  .v2-section-heading { margin-bottom: 30px; }
  .v2-section-heading h2 br { display: none; }
  .v2-pillars { grid-template-columns: 1fr; gap: 14px; }
  .v2-pillar { padding: 26px; border-radius: 18px; }
  .v2-pillar-top { margin-bottom: 23px; }
  .v2-pillar h3 { font-size: 27px; }
  .v2-pillar p { font-size: 15px; margin-top: 17px; }
  .v2-case-selector { margin-bottom: 17px; }
  .v2-case-tabs { gap: 7px; }
  .v2-case-tabs button { padding: 12px 17px; min-height: 44px; font-size: 12px; }
  .v2-case-stage { padding-top: 12px; }
  .v2-case-panel { grid-template-columns: 1fr; gap: 32px; }
  .v2-case-copy h3 { font-size: 35px; }
  .v2-case-benefits { gap: 9px; margin-top: 20px; }
  .v2-case-image { padding: 20px; border-radius: 18px; }
  .v2-closing-copy br { display: none; }
}
@media (max-width: 359px) {
  .v2-case-copy h3 { font-size: 31px; }
  .v2-case-image { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .v2-case-tabs button { transition: none; }
}

/* Keep one accessible tab set, with visual copies on each side for the loop. */
.v2-case-tabs { position: relative; overscroll-behavior-x: contain; overflow-anchor: none; scroll-behavior: auto; user-select: none; }
.v2-case-tabs[data-loop-ready="true"] { cursor: grab; }
.v2-case-tabs.is-dragging, .v2-case-tabs.is-dragging button { cursor: grabbing; }
.v2-case-tabs button[data-active="true"] { background: #111; color: #fff; border-color: #111; }
.v2-case-stage { position: relative; overflow-anchor: none; display: grid; }
.v2-case-panel { grid-area: 1 / 1; align-self: start; }
.v2-case-panel.is-leaving { display: grid !important; pointer-events: none; }
.v2-case-panel.is-measuring { display: grid !important; position: absolute; inset: 0 0 auto; visibility: hidden; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .v2-case-tabs button[data-active="true"]:hover { background: #292929; color: #fff; border-color: #292929; }
}