.v-scenario {
  grid-template-columns: 14px 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.v-scenario input {
  margin: 3px 0 0;
}

/* Landing gallery: one photo module, one rhythm. */
.v-gallery {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  min-height: 0;
}

.v-gallery-card,
.v-gallery-card:first-child,
.v-gallery-card:last-child {
  min-height: 0;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
}

.v-gallery-card figcaption {
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 0;
  font-size: 11px;
}

.v-gallery-card figcaption span {
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(13, 15, 14, .76);
  text-shadow: none;
}

.v-format {
  padding: 6px 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .9);
  color: var(--v-ink);
}

.v-landing .v-hero {
  padding-top: 108px;
  padding-bottom: 32px;
}

.v-benefits {
  width: min(100% - 64px, 1280px);
  margin: 0 auto;
  padding: 26px 32px;
  grid-template-columns: minmax(0, 1.2fr) minmax(480px, .9fr);
  gap: clamp(28px, 3vw, 48px);
  align-items: center;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(17, 19, 21, .06);
}

.v-marketplaces {
  display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(360px, 1.28fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
  min-width: 0;
}

.v-marketplaces-copy small {
  display: block;
  margin-bottom: 5px;
  color: #7467b6;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.v-marketplaces-copy p {
  max-width: 27ch;
  margin: 0;
  color: var(--v-ink);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.v-market-logo-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(24px, 3vw, 44px);
  min-width: 0;
}

.v-market-logo-row img {
  display: block;
  width: auto;
  height: auto;
  max-width: 128px;
  max-height: 32px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.25);
  opacity: .78;
}

.v-benefit-list {
  min-height: 92px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  border-left: 1px solid var(--v-line);
}

.v-benefit-list > div {
  display: flex;
  min-width: 0;
  padding: 12px clamp(16px, 2vw, 28px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.v-benefit-list > div + div {
  border-left: 1px solid var(--v-line);
}

.v-benefit-list .v-benefit-value {
  display: block;
  margin-bottom: 6px;
  color: var(--v-ink);
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
}

.v-benefit-list span:last-child {
  color: var(--v-copy);
  font-size: 12px;
  line-height: 1.3;
}

@media (max-width: 1100px) {
  .v-benefits { grid-template-columns: 1fr; }
  .v-benefit-list { border-top: 1px solid var(--v-line); border-left: 0; }
}

@media (max-width: 768px) {
  .v-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .v-gallery-card:nth-child(3) { display: block; }
  .v-gallery-card:nth-child(4) { display: none; }
  .v-gallery-card { aspect-ratio: 4 / 5; }
  .v-landing .v-hero { padding-top: 96px; padding-bottom: 36px; }
  .v-benefits { width: min(100% - 32px, 1280px); padding: 24px 20px; gap: 24px; border-radius: 20px; }
  .v-marketplaces { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .v-marketplaces-copy p { margin-left: auto; margin-right: auto; }
  .v-market-logo-row { justify-content: space-between; gap: 18px; }
  .v-market-logo-row img { max-width: 29%; max-height: 25px; }
  .v-benefit-list { min-height: 108px; }
  .v-benefit-list > div { padding: 12px 9px; }
}

@media (max-width: 420px) {
  .v-benefit-list .v-benefit-value { font-size: 27px; }
  .v-benefit-list span:last-child { font-size: 11px; }
}

@media (min-width: 769px) {
  #features .v-container { width: min(100% - 64px, 1360px); }
  .v-showcase-head .v-section-head { max-width: none; }
  .v-showcase-head .v-section-head h2 { white-space: nowrap; font-size: clamp(42px, 3.75vw, 56px); }
  .v-gallery { gap: 11px; }
}

.v-gallery-card {
  border: 1px solid rgba(17, 19, 21, .14);
  background: #e9e7e1;
  box-shadow: 0 5px 8px rgba(17, 19, 21, .09), inset 0 1px 0 rgba(255, 255, 255, .7);
}

.v-gallery-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 -48px 38px rgba(8, 12, 9, .3), inset 0 0 0 1px rgba(255, 255, 255, .17);
}

.v-gallery-card figcaption { z-index: 1; }

.v-gallery-card:hover {
  border-color: rgba(104, 147, 25, .5);
  box-shadow: 0 8px 12px rgba(17, 19, 21, .12), inset 0 1px 0 rgba(255, 255, 255, .75);
}

.v-market-logo-row { gap: clamp(26px, 3vw, 48px); }
.v-market-logo-row img { max-width: 132px; max-height: 28px; opacity: .8; }
.v-marketplaces small { color: #6e747a; font-size: 12px; }
.v-benefit-list b { font-size: 16px; }
.v-benefit-list span { font-size: 12px; }

.v-logo { gap: 0; letter-spacing: 0; }
.v-logo img { display: block; width: auto; height: 31px; }
.v-sidebar { display: flex; flex-direction: column; }
.v-sidebar-account { display: grid; gap: 11px; margin-top: auto; padding: 16px 8px 3px; border-top: 1px solid var(--v-line); }
.v-sidebar-person { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.v-side-logout { width: fit-content; padding: 0; border: 0; background: transparent; color: var(--v-copy); font-size: 12px; }
.v-side-logout:hover { color: var(--v-ink); text-decoration: underline; }

@media (min-width: 769px) {
  .v-sidebar { position: sticky; top: 84px; height: calc(100vh - 84px); overflow: hidden; }
  .v-project-list { overflow: auto; }
}

.v-source-row, .v-result-row {
  min-height: 112px;
  align-items: center;
  gap: 10px;
  padding: 13px 14px 13px 86px;
  border: 1px solid var(--v-line);
  border-radius: 13px;
  background: #fff;
  position: relative;
}

.v-source-row::before, .v-result-row::before {
  position: absolute;
  left: 15px;
  top: 17px;
  color: var(--v-copy);
  font-size: 11px;
  font-weight: 700;
}

.v-source-row::before { content: 'Исходники'; }
.v-result-row::before { content: 'Версии'; }
.v-result-row { margin-top: 10px; border-top: 1px solid var(--v-line); }
.v-source-thumb, .v-result-thumb { width: 66px; height: 84px; border-radius: 9px; }
.v-result-thumb { width: 62px; height: 79px; }
.v-add-source { min-width: 66px; }
.v-sidebar-account .v-credit { display: flex; width: 100%; gap: 7px; padding: 9px 10px; background: #f5f6f1; }
.v-side-logout { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 768px) {
  .v-source-row, .v-result-row { min-height: 98px; padding-left: 74px; }
  .v-source-thumb, .v-result-thumb { width: 55px; height: 70px; }
}

@media (min-width: 1025px) {
  .v-app-header { height: 84px; padding: 0 28px; }
  .v-app-header .v-logo img { height: 35px; }
  .v-app-crumb { font-size: 15px; }
  .v-app-shell { grid-template-columns: 290px minmax(0, 1fr); min-height: calc(100vh - 84px); }
  .v-sidebar { padding: 22px 17px; }
  .v-sidebar-new { min-height: 60px; margin-bottom: 31px; font-size: 16px; }
  .v-sidebar-label { margin-top: 20px; font-size: 11px; }
  .v-side-link { gap: 11px; padding: 12px 12px; font-size: 15px; }
  .v-project-item { padding: 9px; font-size: 13px; }
  .v-project-item img { width: 34px; height: 34px; }
  .v-workspace { padding: 68px 58px; }
  .v-workspace-head h1 { font-size: 52px; }
  .v-workspace-head p { font-size: 17px; }
  .v-workspace-head .v-button { min-height: 60px; padding: 0 25px; font-size: 16px; }
  .v-project-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; margin-top: 38px; max-width: 1200px; }
  .v-project-card, .v-project-create { min-height: 324px; border-radius: 18px; }
  .v-project-card img { height: 230px; }
  .v-project-card span { padding: 16px; }
  .v-project-card b { font-size: 18px; }
  .v-project-card small { font-size: 14px; }
  .v-studio-layout { grid-template-columns: minmax(640px, 1fr) 395px; }
  .v-studio-main { padding: 34px 42px 112px; }
  .v-canvas-head h1 { font-size: 33px; }
  .v-canvas-head p { font-size: 14px; }
  .v-icon-button { width: 46px; height: 46px; }
  .v-canvas-tabs button { padding: 10px 14px; font-size: 14px; }
  .v-canvas { min-height: calc(100vh - 325px); border-radius: 18px; }
  .v-settings { top: 84px; max-height: calc(100vh - 84px); padding: 28px 24px 112px; }
  .v-settings h2 { font-size: 22px; }
  .v-settings-group { padding: 21px 0; }
  .v-settings-group h3, .v-field > span { font-size: 13px; }
  .v-segments span { padding: 10px 12px; font-size: 12px; }
  .v-scenario { padding: 11px; }
  .v-scenario b { font-size: 13px; }
  .v-scenario small { font-size: 11px; }
}

@media (min-width: 769px) {
  .v-hero { padding: 110px 0 30px; }
  .v-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(500px, 560px); gap: clamp(42px, 5vw, 78px); align-items: center; }
  .v-hero-copy { max-width: 560px; }
  .v-hero h1 { font-size: clamp(52px, 4.7vw, 68px); }
  .v-hero-copy > p:not(.v-kicker) { margin: 20px 0; }
  .v-comparison { width: 100%; min-height: 0; aspect-ratio: 1.31 / 1; justify-self: end; }
  .v-benefits { margin-top: 0; }
}

@media (min-width: 1025px) {
  .v-app-header { position: sticky; top: 0; z-index: 30; }
  .v-studio-main { display: grid; grid-template-columns: 94px minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 0 14px; min-height: calc(100vh - 84px); }
  .v-canvas-head, .v-canvas-tabs { grid-column: 1 / -1; }
  .v-canvas { grid-column: 2; grid-row: 3 / 5; min-height: calc(100vh - 292px); }
  .v-source-row, .v-result-row { grid-column: 1; width: 94px; min-height: 0; padding: 31px 9px 9px; flex-direction: column; align-items: center; justify-content: flex-start; overflow: auto; border-radius: 12px; }
  .v-source-row { grid-row: 3; margin: 0; }
  .v-result-row { grid-row: 4; margin: 10px 0 0; max-height: 176px; }
  .v-source-row::before, .v-result-row::before { top: 10px; left: 0; right: 0; text-align: center; }
  .v-source-thumb, .v-result-thumb { width: 58px; height: 74px; flex: 0 0 auto; }
  .v-result-thumb { width: 54px; height: 68px; }
  .v-add-source { min-width: 58px; }
  .v-settings { box-shadow: -8px 0 24px rgba(17,19,21,.025); }
  .v-settings-group { padding: 17px 0; }
  .v-settings .v-field { margin-top: 11px; }
  .v-settings .v-field input, .v-settings .v-field select { min-height: 46px; }
  .v-settings .v-field textarea { min-height: 96px; }
  .v-segments { gap: 7px; }
  .v-scenario { margin-top: 4px; }
}

.v-step-visual--asset {
  min-height: 190px;
  padding: 8px;
  background: linear-gradient(135deg, #f5f3ee, #eceae4);
}

.v-step-visual--asset img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 768px) {
  .v-step-visual--asset { min-height: 170px; }
}

.v-steps { gap: 16px; }
.v-step {
  min-height: 382px;
  padding: 24px;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(17,19,21,.045);
}
.v-step-no {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #91c832;
  border-radius: 50%;
  font-size: 12px;
}
.v-step h3 { margin: 18px 0 7px; font-size: 22px; }
.v-step p { min-height: 42px; font-size: 13px; line-height: 1.45; }
.v-step-visual--asset {
  min-height: 0;
  height: 182px;
  margin-top: 18px;
  padding: 0;
  background: #f7f6f2;
  border: 1px solid rgba(17,19,21,.055);
}
.v-step-visual--asset img { padding: 7px; object-fit: contain; }
.v-step:nth-child(2) .v-step-visual--asset img {
  width: 86%;
  height: 86%;
  margin: 7% auto;
  padding: 0;
}

@media (max-width: 768px) {
  .v-step { min-height: 350px; padding: 20px; }
  .v-step-visual--asset { height: 174px; }
}

.v-showcase-head--center { display: block; text-align: center; }
.v-showcase-head--center .v-section-head { max-width: 760px; margin: 0 auto 34px; }
.v-gallery--headphones, #features .v-gallery {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
#features .v-gallery-card { aspect-ratio: 4 / 5; min-height: 0; }
#features .v-gallery-card img { object-position: center; }
#features .v-gallery-card.is-source { border-color: rgba(17,19,21,.23); }
.v-gallery-path { position: absolute; z-index: 3; top: 50%; left: calc(100% + 3px); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--v-accent); color: var(--v-accent-dark); font-weight: 700; transform: translateY(-50%); }
@media (max-width: 768px) {
  #features .v-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #features .v-gallery-card:nth-child(3), #features .v-gallery-card:nth-child(4) { display: block; }
  .v-gallery-path { display: none; }
}

.v-production-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(17,19,21,.1);
  box-shadow: 0 6px 14px rgba(17,19,21,.04);
}
.v-production-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #a6aaad;
}
.v-production-card--vitrio::before { background: var(--v-accent); }
.v-production-card ul { padding-left: 0; list-style: none; }
.v-production-card li { position: relative; padding-left: 18px; }
.v-production-card li::before { content: ""; position: absolute; left: 0; top: .58em; width: 7px; height: 7px; border: 1px solid #777e83; border-radius: 50%; }
.v-production-card--vitrio li::before { background: var(--v-accent); border-color: #78a51c; }
.v-production-card b { padding-top: 14px; border-top: 1px solid rgba(17,19,21,.12); }

#examples .v-section-head { margin-left: auto; margin-right: auto; text-align: center; }
#pricing .v-section-head { margin-left: auto; margin-right: auto; text-align: center; }
#pricing .v-section-head p { margin-left: auto; margin-right: auto; }
.v-pricing-legal { max-width: 650px; margin: 18px auto 0; color: var(--v-copy); font-size: 11px; line-height: 1.5; text-align: center; }
.v-pricing-legal a { color: #506f15; text-decoration: underline; text-underline-offset: 2px; }

/* Product-card copy is an inline studio tool: one brief, editable handoff to the image model. */
.v-card-copy { background: #f8faf2; }
.v-card-copy-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.v-card-copy-head h3 { margin-bottom: 4px; }
.v-card-copy-head p { margin: 0; color: var(--v-copy); font-size: 11px; line-height: 1.45; }
.v-card-copy-ai { flex: 0 0 auto; }
.v-card-copy .v-field textarea { min-height: 86px; }
.v-card-copy .v-field small { color: var(--v-faint); font-size: 10px; line-height: 1.35; }
.v-card-variants { display: grid; gap: 7px; margin-top: 12px; }
.v-card-variants > p,
.v-card-variants > span { margin: 0; color: var(--v-faint); font-size: 10px; line-height: 1.4; }
.v-card-variant { width: 100%; padding: 10px 11px; border: 1px solid var(--v-line); border-radius: 10px; background: #fff; color: var(--v-ink); text-align: left; transition: border-color .18s var(--v-ease), background .18s var(--v-ease); }
.v-card-variant:hover { border-color: #8fbe39; background: #f4fae7; }
.v-card-variant.active { border-color: #82b223; background: #eef8d7; }
.v-card-variant b,
.v-card-variant span { display: block; }
.v-card-variant b { font-size: 12px; line-height: 1.3; }
.v-card-variant span { margin-top: 3px; color: var(--v-copy); font-size: 10px; line-height: 1.35; }

@media (max-width: 768px) {
  .v-card-copy-head { display: grid; gap: 10px; }
  .v-card-copy-ai { width: 100%; }
}

/* Removed from the public landing: the workflow is shown in the studio itself. */
.v-section:has(.v-bento) { display: none; }

@media (min-width: 1025px) {
  .v-app-header { height: 64px; padding: 0 20px; }
  .v-app-header .v-logo img { height: 30px; }
  .v-app-shell { grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 64px); }
  .v-sidebar { top: 64px; height: calc(100vh - 64px); padding: 18px 12px; }
  .v-sidebar-new { min-height: 50px; margin-bottom: 22px; font-size: 14px; }
  .v-side-link { padding: 10px; font-size: 13px; }
  .v-studio-layout { grid-template-columns: minmax(620px, 1fr) 368px; height: calc(100vh - 64px); }
  .v-studio-main { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto minmax(360px,1fr) auto auto; gap: 10px; min-height: 0; padding: 24px 28px; overflow: hidden; }
  .v-canvas-head, .v-canvas-tabs, .v-canvas, .v-source-row, .v-result-row { grid-column: 1; }
  .v-canvas-head { grid-row: 1; }
  .v-canvas-tabs { grid-row: 2; margin: 0; }
  .v-canvas { grid-row: 3; min-height: 0; }
  .v-source-row, .v-result-row { width: auto; min-height: 0; height: 92px; padding: 27px 12px 10px 92px; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .v-source-row { grid-row: 4; margin: 0; }
  .v-result-row { grid-row: 5; margin: 0; }
  .v-source-row::before, .v-result-row::before { left: 14px; right: auto; top: 12px; text-align: left; }
  .v-source-thumb, .v-result-thumb { width: 56px; height: 62px; }
  .v-result-thumb { width: 52px; height: 58px; }
  .v-settings { top: 64px; max-height: calc(100vh - 64px); padding: 22px 20px 96px; }
  .v-app-header-actions { gap: 14px; }
  .v-save-status { color: #5f7f24; }
  .v-settings { display: flex; flex-direction: column; overflow: hidden; }
  .v-settings > form { min-height: 0; overflow-y: auto; padding-right: 2px; }
  .v-settings > form .v-generate { display: none; }
  .v-generate-footer { margin: 0 -20px -96px; padding: 12px 20px 15px; border-top: 1px solid var(--v-line); background: rgba(255,255,255,.98); box-shadow: 0 -10px 28px rgba(17,19,21,.04); }
  .v-generate-footer > span { display: block; color: var(--v-copy); font-size: 11px; }
  .v-generate-footer > span b { color: var(--v-ink); margin-left: 6px; }
  .v-generate-footer .v-generate { position: static; display: flex; width: 100%; min-height: 48px; margin: 9px 0 0; }
}

/* Final hero polish. */
.v-landing .v-header {
  padding-inline: 18px 12px;
  border-radius: 20px;
  box-shadow: 0 10px 34px rgba(17,19,21,.055);
}

.v-landing .v-header-nav {
  gap: 8px;
  padding: 4px;
  border: 1px solid rgba(17,19,21,.07);
  border-radius: 999px;
  background: rgba(246,245,241,.7);
}

.v-landing .v-header-nav a {
  padding: 7px 11px;
  border-radius: 999px;
  transition: color .2s var(--v-ease), background .2s var(--v-ease);
}

.v-landing .v-header-nav a:hover {
  background: #fff;
}

.v-landing .v-studio-link {
  padding-inline: 15px;
}

.v-landing .v-hero {
  padding-top: 132px;
  padding-bottom: 56px;
}

.v-landing .v-comparison {
  overflow: visible;
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
}

.v-landing .v-comparison > img,
.v-landing .v-comparison-after {
  overflow: hidden;
  border-radius: 24px;
}

.v-landing .v-comparison > img,
.v-landing .v-comparison-after img {
  object-position: center;
}

.v-landing .v-comparison > img {
  box-shadow: 0 24px 64px rgba(17,19,21,.14);
}

.v-landing .v-comparison-after {
  position: absolute;
  inset: 0;
}

.v-landing .v-comparison-divider {
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(17,19,21,.08);
}

.v-landing .v-comparison-handle {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(17,19,21,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

.v-landing .v-comparison-after {
  transition: clip-path .09s cubic-bezier(.22,.8,.24,1);
}

.v-landing .v-param-bar {
  bottom: -29px;
  min-height: 58px;
  width: min(calc(100% - 48px), 520px);
  padding: 0 20px;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(17,19,21,.09);
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 16px 36px rgba(17,19,21,.16);
  font-size: 12px;
  backdrop-filter: blur(14px);
}

.v-landing .v-param-bar span:first-child {
  font-weight: 700;
  color: var(--v-ink);
}

@media (min-width: 1101px) {
  .v-landing .v-marketplaces {
    grid-template-columns: minmax(170px,.72fr) minmax(0,1.28fr);
  }

  .v-landing .v-market-logo-row {
    gap: clamp(18px,2vw,34px);
    overflow: hidden;
  }

  .v-landing .v-market-logo-row img {
    max-width: min(112px,30%);
  }
}

@media (max-width: 768px) {
  .v-landing .v-header { padding-inline: 12px 7px; }
  .v-landing .v-hero { padding-top: 116px; padding-bottom: 62px; }
  .v-landing .v-param-bar { bottom: -25px; min-height: 50px; width: calc(100% - 24px); padding-inline: 13px; gap: 8px; font-size: 10px; }
}

/* Reference-led landing polish below the completed hero. */
.v-landing #features,
.v-landing #features ~ .v-section {
  padding-block: clamp(86px, 9vw, 132px);
}

.v-landing #features .v-section-head,
.v-landing #features ~ .v-section .v-section-head {
  max-width: 780px;
  margin-bottom: clamp(30px, 4vw, 48px);
}

.v-landing #features .v-section-head h2,
.v-landing #features ~ .v-section .v-section-head h2 {
  font-size: clamp(42px, 4.4vw, 64px);
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.v-landing #features .v-section-head p,
.v-landing #features ~ .v-section .v-section-head p {
  max-width: 62ch;
  color: #555c62;
  line-height: 1.6;
  text-wrap: pretty;
}

.v-landing #features .v-showcase-head {
  align-items: end;
  gap: 36px;
}

.v-landing #features .v-tabs {
  padding: 5px;
  gap: 4px;
  border: 1px solid var(--v-line);
  border-radius: 999px;
  background: rgba(255,255,255,.74);
}

.v-landing #features .v-tabs button {
  min-height: 38px;
  padding-inline: 15px;
}

.v-landing #features .v-gallery {
  grid-template-columns: 1.22fr repeat(3, 1fr);
  gap: 14px;
}

.v-landing #features .v-gallery-card,
.v-landing #features .v-gallery-card:first-child,
.v-landing #features .v-gallery-card:last-child {
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  border-color: rgba(17,19,21,.1);
  box-shadow: 0 16px 40px rgba(17,19,21,.08);
}

.v-landing #features .v-gallery-card::after {
  box-shadow: inset 0 -64px 52px rgba(8,12,9,.34), inset 0 0 0 1px rgba(255,255,255,.14);
}

.v-landing #features .v-gallery-card figcaption span,
.v-landing #features .v-format {
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.v-landing .v-section--tint {
  padding-inline: 32px;
  background: linear-gradient(135deg, rgba(185,168,255,.2), rgba(169,216,255,.13) 58%, rgba(184,255,53,.08));
}

.v-landing .v-section--tint .v-studio-promo {
  width: min(100%, 1280px);
  padding: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(260px,.65fr) minmax(0,1.35fr);
  gap: clamp(36px, 5vw, 72px);
  border: 1px solid rgba(17,19,21,.09);
  border-radius: 28px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 24px 70px rgba(67,56,109,.09);
}

.v-landing .v-studio-promo > div:first-child {
  min-width: 0;
}

.v-landing .v-studio-promo h2 {
  font-size: clamp(40px, 4.2vw, 60px);
  line-height: .98;
  text-wrap: balance;
}

.v-landing .v-studio-promo p {
  max-width: 42ch;
  line-height: 1.65;
}

.v-landing .v-mockup {
  min-width: 0;
  padding: 16px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 26px 60px rgba(67,56,109,.14);
}

.v-landing .v-mockup-grid {
  min-height: 430px;
  border-radius: 16px;
}

.v-landing .v-steps {
  gap: 18px;
}

.v-landing .v-step {
  min-height: 430px;
  padding: 28px;
  border-color: rgba(17,19,21,.08);
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(17,19,21,.05);
}

.v-landing .v-step:nth-child(1) { background: #fff; }
.v-landing .v-step:nth-child(2) { background: #f1edff; }
.v-landing .v-step:nth-child(3) { background: #f1f8df; }

.v-landing .v-step-no {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.v-landing .v-step h3 {
  margin-top: 26px;
  font-size: 26px;
}

.v-landing .v-step-visual {
  min-height: 220px;
  margin: 28px -10px -10px;
  border-radius: 17px;
}

.v-landing .v-compare-production {
  grid-template-columns: minmax(300px,.58fr) minmax(0,1fr);
  gap: clamp(46px, 7vw, 96px);
}

.v-landing .v-compare-production h2 {
  font-size: clamp(44px, 4.8vw, 66px);
  line-height: .98;
  text-wrap: balance;
}

.v-landing .v-production-cards {
  gap: 16px;
}

.v-landing .v-production-card {
  padding: 30px;
  border: 1px solid rgba(17,19,21,.08);
  border-radius: 22px;
  background: #ececea;
}

.v-landing .v-production-card--vitrio {
  background: #f0f8dc;
  border-color: rgba(119,170,23,.25);
  box-shadow: 0 18px 45px rgba(119,170,23,.08);
}

.v-landing .v-production-card ul {
  padding: 0;
  list-style: none;
}

.v-landing .v-production-card li {
  position: relative;
  padding-left: 22px;
}

.v-landing .v-production-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.v-landing .v-production-card--vitrio li::before {
  border-color: #659411;
  background: #b8ff35;
}

.v-landing .v-production-card b {
  padding-top: 20px;
  border-top: 1px solid rgba(17,19,21,.1);
}

.v-landing .v-bento {
  grid-template-columns: repeat(3, minmax(0,1fr));
  grid-template-rows: repeat(3, minmax(230px,auto));
  gap: 16px;
}

.v-landing .v-bento-item,
.v-landing .v-bento-item:nth-child(1),
.v-landing .v-bento-item:nth-child(2) {
  min-height: 0;
  padding: 28px;
  grid-column: auto;
  border-color: rgba(17,19,21,.08);
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(17,19,21,.045);
}

.v-landing .v-bento-item:nth-child(1) { grid-area: 1 / 1 / 2 / 3; background: #eef6d9; }
.v-landing .v-bento-item:nth-child(2) { grid-area: 1 / 3 / 3 / 4; background: #efebff; }
.v-landing .v-bento-item:nth-child(3) { grid-area: 2 / 1 / 3 / 2; background: #fff; }
.v-landing .v-bento-item:nth-child(4) { grid-area: 2 / 2 / 3 / 3; background: #edf7ff; }
.v-landing .v-bento-item:nth-child(5) { grid-area: 3 / 1 / 4 / 3; background: #fff; }
.v-landing .v-bento-item:nth-child(6) { grid-area: 3 / 3 / 4 / 4; background: #f0efea; }

.v-landing .v-bento-item h3 {
  font-size: 22px;
}

.v-landing .v-bento-item p {
  font-size: 14px;
  line-height: 1.55;
}

.v-landing .v-bento-mini {
  height: 126px;
  margin-top: 24px;
  align-items: end;
}

.v-landing .v-bento-mini img {
  width: 96px;
  border-radius: 12px;
}

.v-landing .v-bento-versions {
  height: 190px;
}

.v-landing .v-bento-versions img {
  width: min(100%, 92px);
  height: 150px;
}

.v-landing .v-cases {
  gap: 18px;
}

.v-landing .v-case {
  border-color: rgba(17,19,21,.08);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(17,19,21,.055);
}

.v-landing .v-case-visual {
  height: clamp(260px, 25vw, 350px);
}

.v-landing .v-case-copy {
  padding: 22px;
}

.v-landing .v-case-copy h3 {
  font-size: 21px;
}

.v-landing .v-case-copy p {
  font-size: 14px;
  line-height: 1.55;
}

.v-landing .v-case-meta span {
  padding: 6px 10px;
  border: 1px solid var(--v-line);
  border-radius: 999px;
  background: transparent;
}

.v-landing .v-pricing {
  grid-template-columns: repeat(2,minmax(0,460px));
  gap: 18px;
}

.v-landing .v-plan {
  display: flex;
  min-height: 530px;
  padding: 34px;
  flex-direction: column;
  border-color: rgba(17,19,21,.09);
  border-radius: 24px;
  box-shadow: 0 18px 46px rgba(17,19,21,.055);
}

.v-landing .v-plan--pro {
  border-color: rgba(119,170,23,.45);
  box-shadow: 0 22px 55px rgba(119,170,23,.12);
}

.v-landing .v-price {
  font-size: 43px;
}

.v-landing .v-plan ul {
  margin-bottom: 24px;
}

.v-landing .v-plan .v-button {
  margin-top: auto;
}

.v-landing main > .v-container {
  padding-bottom: clamp(84px, 9vw, 132px);
}

.v-landing .v-final-cta {
  min-height: 440px;
  border-radius: 28px;
}

.v-landing .v-final-cta img {
  object-position: 66% center;
  opacity: .82;
}

.v-landing .v-final-cta::after {
  background: linear-gradient(90deg,#111315 0%,rgba(17,19,21,.94) 38%,rgba(17,19,21,.2) 76%,rgba(17,19,21,.05));
}

.v-landing .v-final-copy {
  padding: clamp(48px, 6vw, 80px);
  max-width: 630px;
}

.v-landing .v-final-copy h2 {
  font-size: clamp(42px, 4.4vw, 62px);
  text-wrap: balance;
}

.v-landing .v-footer {
  padding-block: 64px 72px;
}

.v-landing .v-footer-grid {
  grid-template-columns: 1.5fr .65fr 1fr;
  gap: clamp(30px,5vw,72px);
  padding-top: 48px;
}

.v-landing .v-footer a {
  margin-block: 10px;
  overflow-wrap: anywhere;
}

.v-landing #features .v-gallery > *,
.v-landing .v-studio-promo > *,
.v-landing .v-steps > *,
.v-landing .v-production-cards > *,
.v-landing .v-bento > *,
.v-landing .v-cases > *,
.v-landing .v-pricing > * {
  min-width: 0;
}

@media (hover:hover) and (pointer:fine) {
  .v-landing #features .v-gallery-card:hover img { transform: scale(1.025); }
  .v-landing .v-case:hover { transform: translateY(-3px); box-shadow: 0 22px 54px rgba(17,19,21,.08); }
}

@media (max-width: 1024px) {
  .v-landing #features .v-showcase-head { display: block; }
  .v-landing #features .v-tabs { width: max-content; max-width: 100%; margin-top: 22px; }
  .v-landing #features .v-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .v-landing #features .v-gallery-card:nth-child(3),
  .v-landing #features .v-gallery-card:nth-child(4) { display: block; }
  .v-landing .v-section--tint .v-studio-promo { grid-template-columns: 1fr; }
  .v-landing .v-compare-production { grid-template-columns: 1fr; }
  .v-landing .v-bento { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: none; }
  .v-landing .v-bento-item,
  .v-landing .v-bento-item:nth-child(n) { grid-area: auto; }
  .v-landing .v-bento-item:nth-child(1),
  .v-landing .v-bento-item:nth-child(5) { grid-column: 1 / -1; }
  .v-landing .v-footer-grid { grid-template-columns: 1.2fr 1fr; }
}

@media (max-width: 768px) {
  .v-landing #features,
  .v-landing #features ~ .v-section { padding-block: 78px; }
  .v-landing #features .v-section-head h2,
  .v-landing #features ~ .v-section .v-section-head h2,
  .v-landing .v-studio-promo h2,
  .v-landing .v-compare-production h2 { font-size: clamp(36px,10vw,46px); }
  .v-landing .v-section--tint { padding-inline: 16px; }
  .v-landing .v-section--tint .v-studio-promo { padding: 24px; border-radius: 22px; }
  .v-landing .v-mockup { overflow: hidden; }
  .v-landing .v-mockup-grid { min-height: 340px; grid-template-columns: minmax(270px,1fr) 86px; }
  .v-landing .v-mini-settings { display: block; min-width: 86px; padding: 10px; font-size: 9px; }
  .v-landing .v-step { min-height: 390px; }
  .v-landing .v-production-card { padding: 24px; }
  .v-landing .v-cases { grid-template-columns: 1fr; }
  .v-landing .v-case-visual { height: 280px; }
  .v-landing .v-plan { min-height: 0; padding: 28px; }
  .v-landing .v-final-cta { min-height: 410px; border-radius: 22px; }
  .v-landing .v-final-copy { padding: 42px 28px; }
  .v-landing .v-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .v-landing #features .v-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .v-landing #features .v-gallery-card,
  .v-landing #features .v-gallery-card:first-child,
  .v-landing #features .v-gallery-card:last-child { border-radius: 15px; }
  .v-landing #features .v-gallery-card figcaption { left: 7px; right: 7px; bottom: 7px; }
  .v-landing #features .v-gallery-card figcaption span { max-width: 76%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .v-landing .v-bento { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .v-landing .v-bento-item,
  .v-landing .v-bento-item:nth-child(n) { grid-column: auto; padding: 18px; }
  .v-landing .v-bento-item:nth-child(1),
  .v-landing .v-bento-item:nth-child(2),
  .v-landing .v-bento-item:nth-child(5) { grid-column: 1 / -1; }
  .v-landing .v-bento-item h3 { font-size: 18px; }
  .v-landing .v-bento-item p { font-size: 12px; }
  .v-landing .v-bento-mini { height: 92px; margin-top: 16px; }
  .v-landing .v-production-cards { grid-template-columns: 1fr; }
  .v-landing .v-footer-grid { grid-template-columns: 1fr; }
  .v-landing .v-footer-grid > div:first-child { grid-column: auto; }
}

.v-landing .v-reveal {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(5px);
  transition: opacity .72s cubic-bezier(.22,.8,.24,1), transform .72s cubic-bezier(.22,.8,.24,1), filter .72s cubic-bezier(.22,.8,.24,1);
}

.v-landing .v-reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion:reduce) {
  .v-landing #features .v-gallery-card img,
  .v-landing .v-case,
  .v-landing .v-reveal { opacity: 1!important; transform: none!important; filter: none!important; transition: none!important; }
}

/* Vitrio Studio: authoritative workspace layout. */
.v-app--studio {
  --studio-bg: #f7f7f4;
  --studio-surface: #fff;
  --studio-muted: #f2f2ee;
  --studio-canvas: #2d3033;
  --studio-text: #111315;
  --studio-copy: #686d73;
  --studio-border: rgba(17,19,21,.1);
  --studio-border-strong: rgba(17,19,21,.17);
  --studio-accent: #b8ff35;
  --studio-accent-soft: rgba(184,255,53,.13);
  --studio-radius: 20px;
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: 64px minmax(0,1fr);
  overflow: hidden;
  background: var(--studio-bg);
}

.v-app--studio .v-app-header {
  position: relative;
  z-index: 30;
  height: 64px;
  padding: 0 22px;
  border-bottom: 1px solid var(--studio-border);
  background: rgba(255,255,255,.96);
}

.v-app--studio .v-app-header .v-logo img { height: 31px; }
.v-app--studio .v-app-crumb { font-size: 13px; }
.v-app--studio .v-save-status { display: inline-flex; align-items: center; gap: 8px; color: #5f666b; font-size: 12px; }
.v-app--studio .v-save-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #70b72e; box-shadow: 0 0 0 3px rgba(112,183,46,.12); }

.v-app--studio .v-app-shell {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0,1fr);
  overflow: hidden;
}

.v-app--studio .v-sidebar {
  position: relative;
  top: auto;
  height: auto;
  min-height: 0;
  padding: 18px 14px;
  overflow: hidden;
  border-right: 1px solid var(--studio-border);
  background: #fbfbf9;
}

.v-app--studio .v-sidebar-new { min-height: 48px; margin-bottom: 24px; font-size: 14px; border-radius: 13px; }
.v-app--studio .v-sidebar-label { margin: 16px 9px 8px; font-size: 10px; }
.v-app--studio .v-side-link { min-height: 42px; padding: 10px 11px; font-size: 13px; }
.v-app--studio .v-side-link.active { background: var(--studio-accent-soft); }
.v-app--studio .v-project-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.v-app--studio .v-project-item { min-height: 48px; padding: 7px 8px; }
.v-app--studio .v-project-item img { width: 34px; height: 34px; }

.v-app--studio .v-studio-layout {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(620px,1fr) 368px;
  overflow: hidden;
}

.v-app--studio .v-studio-main {
  min-width: 0;
  min-height: 0;
  padding: 22px 26px 20px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(300px,1fr) 126px;
  gap: 14px;
  overflow: hidden;
}

.v-app--studio .v-canvas-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.v-app--studio .v-project-heading { min-width: 0; display: flex; align-items: center; gap: 12px; }
.v-app--studio .v-project-heading h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(28px,2.25vw,38px); line-height: 1; letter-spacing: -.045em; }
.v-app--studio .v-project-heading > span { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--studio-border); border-radius: 999px; background: #fff; color: var(--studio-copy); font-size: 11px; }
.v-app--studio .v-canvas-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.v-app--studio .v-icon-button { width: 40px; height: 40px; border-color: var(--studio-border); border-radius: 11px; transition: background-color .15s ease,border-color .15s ease,transform .15s ease; }
.v-app--studio .v-icon-button:hover:not(:disabled) { border-color: var(--studio-border-strong); background: #f7f7f3; }
.v-app--studio .v-icon-button:active:not(:disabled) { transform: translateY(1px); }

.v-app--studio .v-canvas {
  grid-column: auto;
  grid-row: auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 22px;
  background: radial-gradient(circle at 50% 43%,rgba(255,255,255,.045),transparent 48%),var(--studio-canvas);
  box-shadow: inset 0 1px rgba(255,255,255,.04),0 14px 36px rgba(17,19,21,.09);
}

.v-app--studio .v-canvas-result { width: 100%; height: 100%; margin: 0; padding: 34px 48px; display: grid; place-items: center; }
.v-app--studio .v-canvas-result img,
.v-app--studio .v-canvas > img { position: static; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 22px 55px rgba(0,0,0,.24); }
.v-app--studio .v-canvas-empty { max-width: 390px; padding: 32px; color: #c5c9cc; }
.v-app--studio .v-canvas-empty strong { color: #fff; font-size: 21px; }
.v-app--studio .v-loading { color: #d7d9db; background: rgba(45,48,51,.92); }
.v-app--studio .v-loading strong { color: #fff; font-size: 20px; }
.v-app--studio .v-loading::before { background: var(--studio-accent); }

.v-app--studio .v-asset-tray {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px,.8fr) 1px minmax(260px,1.2fr);
  gap: 14px;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid var(--studio-border);
  border-radius: 18px;
  background: var(--studio-surface);
  box-shadow: 0 6px 20px rgba(17,19,21,.035);
}

.v-app--studio .v-asset-group { min-width: 0; display: grid; grid-template-columns: 66px minmax(0,1fr); gap: 10px; align-items: center; }
.v-app--studio .v-asset-heading { align-self: stretch; display: flex; flex-direction: column; justify-content: center; color: var(--studio-copy); font-size: 11px; }
.v-app--studio .v-asset-heading b { color: var(--studio-text); font-size: 12px; }
.v-app--studio .v-asset-divider { width: 1px; background: var(--studio-border); }
.v-app--studio .v-source-row,
.v-app--studio .v-result-row { position: static; min-width: 0; min-height: 0; height: 92px; margin: 0; padding: 4px 2px; display: flex; flex-direction: row; align-items: center; gap: 9px; overflow-x: auto; overflow-y: hidden; border: 0; border-radius: 0; background: transparent; }
.v-app--studio .v-source-row::before,
.v-app--studio .v-result-row::before { display: none; }
.v-app--studio .v-source-thumb,
.v-app--studio .v-result-thumb { width: 62px; height: 78px; min-width: 62px; flex: 0 0 62px; border: 2px solid transparent; border-radius: 10px; }
.v-app--studio .v-source-thumb.active,
.v-app--studio .v-result-thumb.active { border-color: #83ba1f; box-shadow: 0 0 0 2px rgba(184,255,53,.18); }
.v-app--studio .v-add-source { display: grid; place-items: center; align-content: center; border: 1px dashed var(--studio-border-strong); background: #fafaf7; }
.v-app--studio .v-add-source span { font-size: 21px; line-height: 1; }
.v-app--studio .v-add-source small { font-size: 8px; line-height: 1.1; text-align: center; }

.v-app--studio .v-settings {
  position: relative;
  top: auto;
  min-width: 0;
  min-height: 0;
  max-height: none;
  padding: 0;
  display: grid;
  grid-template-rows: 64px minmax(0,1fr);
  overflow: hidden;
  border-left: 1px solid var(--studio-border);
  background: var(--studio-surface);
  box-shadow: -8px 0 24px rgba(17,19,21,.025);
}

.v-app--studio .v-settings-head { padding: 0 22px; border-bottom: 1px solid var(--studio-border); }
.v-app--studio .v-settings-head h2 { font-size: 19px; }
.v-app--studio .v-settings-head .v-icon-button { display: none; }
.v-app--studio #studio-form { min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; overflow: hidden; }
.v-app--studio .v-settings-scroll { min-height: 0; padding: 2px 22px 26px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.v-app--studio .v-settings-group { padding: 18px 0; }
.v-app--studio .v-settings-group h3 { margin-bottom: 11px; font-size: 12px; }
.v-app--studio .v-palette-title { margin-top: 15px!important; }
.v-app--studio .v-field { margin-top: 12px; }
.v-app--studio .v-field input,
.v-app--studio .v-field select { min-height: 42px; }
.v-app--studio .v-field textarea { min-height: 78px; max-height: 140px; }
.v-app--studio .v-segments { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.v-app--studio .v-segments span { min-height: 40px; padding: 6px 8px; display: grid; place-items: center; text-align: center; }
.v-app--studio .v-scenario { min-height: 52px; padding: 9px 10px; }
.v-app--studio .v-scenario:has(input:checked) { border-color: rgba(112,166,19,.55); background: var(--studio-accent-soft); }
.v-app--studio .v-ratios { grid-template-columns: repeat(5,minmax(0,1fr)); }
.v-app--studio .v-ratios span { min-height: 38px; }
.v-app--studio .v-swatches span { width: 28px; height: 28px; }
.v-app--studio .v-models span { min-height: 74px; padding: 11px; }
.v-app--studio .v-models input:checked + span { border-color: #9a86ee; background: rgba(185,168,255,.13); }

.v-app--studio .v-card-copy-head { gap: 10px; }
.v-app--studio .v-card-copy-ai { min-height: 36px; white-space: nowrap; }
.v-app--studio .v-card-variants { max-height: 230px; overflow-y: auto; }

.v-app--studio .v-generate-footer {
  position: relative;
  z-index: 4;
  padding: 13px 22px 16px;
  display: grid;
  gap: 9px;
  border-top: 1px solid var(--studio-border);
  background: rgba(255,255,255,.98);
  box-shadow: 0 -10px 28px rgba(17,19,21,.04);
}

.v-app--studio .v-generate-footer > div { display: flex; justify-content: space-between; color: var(--studio-copy); font-size: 11px; }
.v-app--studio .v-generate-footer b { color: var(--studio-text); }
.v-app--studio .v-generate-footer .v-generate { position: static; width: 100%; min-height: 49px; margin: 0; border-radius: 12px; }
.v-app--studio .v-generate-footer > small { color: var(--studio-copy); font-size: 10px; text-align: center; }
.v-app--studio .v-mobile-settings { display: none; }

.v-app--studio .v-canvas:fullscreen { width: 100vw; height: 100vh; border-radius: 0; background: var(--studio-canvas); }
.v-app--studio .v-canvas:fullscreen .v-canvas-result { padding: 48px; }

@media (max-width: 1280px) and (min-width: 901px) {
  .v-app--studio .v-app-shell { grid-template-columns: 190px minmax(0,1fr); }
  .v-app--studio .v-studio-layout { grid-template-columns: minmax(500px,1fr) 340px; }
  .v-app--studio .v-studio-main { padding: 18px 20px; }
  .v-app--studio .v-sidebar { padding-inline: 11px; }
  .v-app--studio .v-asset-tray { grid-template-columns: minmax(180px,.75fr) 1px minmax(230px,1.25fr); }
  .v-app--studio .v-asset-group { grid-template-columns: 55px minmax(0,1fr); }
}

@media (max-width: 900px) {
  .v-app--studio { overflow: hidden; }
  .v-app--studio .v-app-shell { display: block; min-height: 0; overflow: hidden; }
  .v-app--studio .v-sidebar { display: none; }
  .v-app--studio .v-studio-layout { display: block; height: 100%; min-height: 0; overflow: hidden; }
  .v-app--studio .v-studio-main { height: 100%; padding: 16px; grid-template-rows: auto minmax(280px,1fr) 118px; }
  .v-app--studio .v-settings { display: none; position: fixed; z-index: 35; inset: 0; max-height: none; grid-template-rows: 60px minmax(0,1fr); border: 0; }
  .v-app--studio .v-settings.open { display: grid; }
  .v-app--studio .v-settings-head .v-icon-button { display: grid; }
  .v-app--studio .v-mobile-settings { display: flex; position: fixed; z-index: 25; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .v-app--studio .v-mobile-settings .v-button { width: 100%; min-height: 52px; }
  .v-app--studio .v-drawer-backdrop.open { display: block; position: fixed; z-index: 34; inset: 0; background: rgba(17,19,21,.3); }
}

@media (max-width: 600px) {
  .v-app--studio .v-app-header { height: 60px; padding-inline: 14px; }
  .v-app--studio { grid-template-rows: 60px minmax(0,1fr); }
  .v-app--studio .v-app-header .v-logo img { height: 28px; }
  .v-app--studio .v-studio-main { padding: 13px 12px 82px; grid-template-rows: auto minmax(250px,1fr) 112px; gap: 10px; }
  .v-app--studio .v-project-heading { display: block; }
  .v-app--studio .v-project-heading h1 { max-width: 210px; font-size: 24px; }
  .v-app--studio .v-project-heading > span { display: none; }
  .v-app--studio .v-canvas-actions { gap: 5px; }
  .v-app--studio .v-icon-button { width: 42px; height: 42px; }
  .v-app--studio .v-canvas-result { padding: 18px; }
  .v-app--studio .v-asset-tray { grid-template-columns: minmax(270px,1fr) 1px minmax(270px,1fr); gap: 9px; padding: 9px; overflow-x: auto; overflow-y: hidden; }
  .v-app--studio .v-asset-divider { display: block; }
  .v-app--studio .v-asset-group { min-width: 270px; grid-template-columns: 54px minmax(210px,1fr); }
  .v-app--studio .v-asset-results { display: grid; }
  .v-app--studio .v-source-row,
  .v-app--studio .v-result-row { height: 88px; }
  .v-app--studio .v-source-thumb,
  .v-app--studio .v-result-thumb { width: 58px; height: 72px; min-width: 58px; flex-basis: 58px; }
  .v-app--studio .v-settings-scroll { padding-inline: 18px; }
  .v-app--studio .v-generate-footer { padding-inline: 18px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion:reduce) {
  .v-app--studio * { scroll-behavior: auto!important; transition-duration: .01ms!important; animation-duration: .01ms!important; }
}

/* Keep the closing CTA visually attached to the footer instead of reading as another full landing section. */
.v-landing main > .v-container { padding-bottom: clamp(18px, 2vw, 28px); }
.v-landing .v-final-cta { min-height: 286px; border-radius: 20px; }
.v-landing .v-final-copy { max-width: 540px; padding: 30px clamp(32px, 4vw, 52px); }
.v-landing .v-final-copy h2 { font-size: clamp(36px, 3vw, 42px); line-height: 1; }
.v-landing .v-final-copy p { margin-block: 12px; }
.v-landing .v-final-copy .v-trial-note { margin-top: 9px; }
.v-landing .v-footer { padding-block: 20px 58px; }
.v-landing .v-footer-grid { padding-top: 26px; }

@media (max-width: 768px) {
  .v-landing .v-final-cta { min-height: 330px; }
  .v-landing .v-final-copy { padding: 34px 26px; }
  .v-landing .v-final-copy h2 { font-size: 38px; }
}

/* Studio: one focused result surface plus a compact source rail. */
.v-studio-workarea {
  display: grid;
  grid-template-columns: minmax(0,1fr) 156px;
  gap: 14px;
  min-width: 0;
}

.v-studio-canvas-column {
  display: grid;
  grid-template-rows: auto minmax(360px,1fr) auto;
  min-width: 0;
  gap: 10px;
}

.v-studio-workarea .v-canvas-tabs,
.v-studio-workarea .v-canvas,
.v-studio-workarea .v-source-row,
.v-studio-workarea .v-result-row {
  grid-column: auto;
  grid-row: auto;
  min-width: 0;
}

.v-studio-workarea .v-canvas-tabs { margin: 0; }

.v-studio-workarea .v-canvas {
  min-height: 0;
  padding: 24px;
  background: #f0efea;
}

.v-canvas-result {
  display: grid;
  width: min(100%, 620px);
  height: min(100%, calc(100vh - 330px));
  min-height: 0;
  margin: 0;
  padding: 10px;
  place-items: center;
  border: 1px solid rgba(17,19,21,.13);
  border-radius: 14px;
  background: #fff;
}

.v-canvas .v-canvas-result img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 8px;
  object-fit: contain;
}

.v-source-rail {
  display: flex;
  min-width: 0;
  padding: 12px;
  flex-direction: column;
  overflow-y: auto;
  border: 1px solid rgba(17,19,21,.11);
  border-radius: 14px;
  background: #fff;
}

.v-source-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 1px 10px;
  color: var(--v-ink);
  font-size: 12px;
}

.v-source-rail-head span {
  color: var(--v-faint);
  font-size: 11px;
}

.v-source-rail .v-source-row {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-content: start;
  gap: 8px;
  min-height: 0;
  height: auto;
  overflow: visible;
  padding: 0 1px 1px;
}

.v-source-rail .v-source-row::before,
.v-studio-workarea .v-result-row::before { content: none; }

.v-source-rail .v-source-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 9px;
}

.v-source-rail .v-source-thumb img { object-fit: cover; }

.v-source-rail .v-add-source {
  display: grid;
  place-items: center;
  gap: 2px;
  border-color: rgba(17,19,21,.18);
  color: var(--v-copy);
  font-size: 21px;
}

.v-source-rail .v-add-source small { font-size: 9px; line-height: 1.1; }

.v-studio-workarea .v-result-row {
  display: flex;
  min-height: 74px;
  margin: 0;
  padding: 9px 0 0;
  border-top: 1px solid rgba(17,19,21,.1);
}

.v-studio-workarea .v-result-row:empty { display: none; }

@media (min-width: 1025px) {
  .v-studio-main {
    display: flex;
    height: calc(100vh - 64px);
    padding: 24px 28px;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
  }

  .v-studio-main > .v-canvas-head { flex: 0 0 auto; }

  .v-studio-workarea {
    flex: 1 1 auto;
    min-height: 0;
  }

  .v-studio-canvas-column { min-height: 0; }

  .v-settings {
    display: flex;
    max-height: calc(100vh - 64px);
    padding: 22px 20px 0;
    flex-direction: column;
    overflow: hidden;
  }

  .v-settings-head { flex: 0 0 auto; margin-bottom: 2px; }

  .v-settings > form {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 4px 16px 0;
    overflow-y: auto;
  }

  .v-generate-footer {
    flex: 0 0 auto;
    margin: 0 -20px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--v-line);
    background: #fff;
    box-shadow: 0 -5px 12px rgba(17,19,21,.05);
  }
}

@media (max-width: 1024px) {
  .v-studio-workarea { grid-template-columns: minmax(0,1fr) 142px; }
  .v-studio-workarea .v-canvas { min-height: 500px; }
  .v-canvas-result { height: min(100%, 540px); }
}

@media (max-width: 768px) {
  body.vitrio-body { overflow-x: hidden; }
  .v-app-header { padding-inline: 16px; gap: 8px; overflow: hidden; }
  .v-app-header-actions { min-width: 0; gap: 6px; }
  .v-app-header-actions .v-save-status,
  .v-app-header-actions .v-profile { display: none; }
  .v-app-shell { display: block; min-height: calc(100vh - 60px); }
  .v-sidebar { display: none; }
  .v-studio-layout { display: block; height: auto; }
  .v-studio-main { padding: 18px 16px 90px; }
  .v-studio-workarea { display: block; }
  .v-studio-canvas-column { grid-template-rows: auto minmax(370px,1fr) auto; }
  .v-studio-workarea .v-canvas { min-height: 370px; padding: 16px; }
  .v-canvas-result { width: min(100%, 340px); height: min(100%, 390px); padding: 7px; border-radius: 12px; }
  .v-source-rail { margin-top: 12px; padding: 11px; }
  .v-source-rail .v-source-row { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; }
  .v-source-rail .v-source-thumb { width: 68px; height: 78px; aspect-ratio: auto; flex: 0 0 auto; }
  .v-source-rail .v-add-source { font-size: 19px; }
  .v-studio-workarea .v-result-row { min-height: 68px; }
}

/* One product photo becomes three clearly named creative routes. */
.v-landing #features .v-gallery.v-transform-gallery {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, .78fr) minmax(110px, .38fr) minmax(0, 2.34fr);
  align-items: center;
  gap: clamp(14px, 2.5vw, 36px);
  min-height: 408px;
  overflow: visible;
}

.v-transform-card {
  min-width: 0;
  margin: 0;
}

.v-transform-card .v-transform-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  background: #e8e7e3;
}

.v-transform-card .v-transform-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(17,19,21,.1), inset 0 -42px 46px rgba(8,12,9,.12);
}

.v-transform-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--v-ease);
}

.v-transform-source {
  position: relative;
  z-index: 1;
}

.v-transform-source .v-transform-image {
  border: 1px solid rgba(17,19,21,.15);
  background: #e8e8e5;
}

.v-transform-card figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
  color: #51575b;
  font-size: 12px;
  line-height: 1.25;
}

.v-transform-chip {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(17,19,21,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: var(--v-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.v-transform-chip--image {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  box-shadow: 0 2px 6px rgba(17,19,21,.08);
}

.v-transform-caption {
  display: grid;
  gap: 3px;
}

.v-transform-caption b { color: var(--v-ink); font-size: 13px; line-height: 1.1; }
.v-transform-caption small { color: #656b70; font-size: 11px; line-height: 1.2; }

.v-transform-flow {
  position: relative;
  align-self: stretch;
  min-height: 310px;
  color: #89bd1e;
}

.v-transform-wires {
  position: absolute;
  inset: 0 -14px;
  width: calc(100% + 28px);
  height: 100%;
  overflow: visible;
}

.v-wire {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.v-wire--out { stroke-dasharray: 2 5; }

.v-transform-core {
  position: absolute;
  z-index: 1;
  top: 37%;
  left: 50%;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: var(--v-accent);
  color: var(--v-accent-dark);
  box-shadow: 0 0 0 8px rgba(246,245,241,.96), 0 8px 20px rgba(113,158,23,.18);
  transform: translate(-50%,-50%);
}

.v-transform-core-icon { width: 25px; height: 25px; stroke-width: 1.9; }

.v-transform-core-label {
  position: absolute;
  top: calc(37% + 40px);
  left: 50%;
  display: grid;
  gap: 2px;
  width: max-content;
  color: #404a34;
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
  transform: translateX(-50%);
}

.v-transform-core-label b { color: var(--v-ink); font-size: 12px; }

.v-transform-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(9px, 1.2vw, 15px);
  min-width: 0;
}

.v-transform-result .v-transform-image { aspect-ratio: 3 / 4; box-shadow: 0 12px 26px rgba(17,19,21,.08); }

.v-transform-note {
  position: absolute;
  top: -28px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #454c40;
  font-size: 12px;
}

.v-transform-note > span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--v-accent);
  color: var(--v-accent-dark);
}

.v-transform-note-icon { width: 14px; height: 14px; stroke-width: 2.3; }

@media (hover:hover) and (pointer:fine) {
  .v-transform-card:hover img { transform: scale(1.025); }
}

@media (min-width: 901px) and (prefers-reduced-motion:no-preference) {
  .v-transform-flow.is-active .v-wire--out,
  .v-transform-flow:hover .v-wire--out { animation: v-transform-flow 1.8s linear infinite; }
  .v-transform-flow:hover .v-transform-core { animation: v-transform-core 1.5s var(--v-ease) infinite; }
}

@keyframes v-transform-flow { to { stroke-dashoffset: -28; } }
@keyframes v-transform-core { 50% { box-shadow: 0 0 0 11px rgba(246,245,241,.96), 0 8px 24px rgba(113,158,23,.25); } }

@media (max-width: 900px) {
  .v-landing #features .v-gallery.v-transform-gallery {
    grid-template-columns: minmax(230px, .95fr) minmax(150px, .55fr);
    gap: 22px;
    min-height: 0;
  }

  .v-transform-flow { min-height: 290px; }
  .v-transform-results { grid-column: 1 / -1; }
  .v-transform-note { top: auto; right: 0; bottom: calc(100% + 12px); }
}

@media (max-width: 620px) {
  .v-landing #features .v-gallery.v-transform-gallery {
    display: block;
    min-height: 0;
  }

  .v-transform-source { width: min(220px, 68vw); margin-inline: auto; }
  .v-transform-flow { width: 100%; min-height: 106px; height: 106px; margin: 0 0 13px; }
  .v-transform-wires { display: none; }
  .v-transform-flow::before,
  .v-transform-flow::after { content: ""; position: absolute; left: 50%; width: 1px; background: #89bd1e; transform: translateX(-50%); }
  .v-transform-flow::before { top: 0; height: 28px; }
  .v-transform-flow::after { bottom: 0; height: 22px; background: transparent; border-left: 1px dashed #89bd1e; }
  .v-transform-core { top: 50%; width: 48px; height: 48px; box-shadow: 0 0 0 6px rgba(246,245,241,.96), 0 6px 16px rgba(113,158,23,.16); }
  .v-transform-core-icon { width: 21px; height: 21px; }
  .v-transform-core-label { top: calc(50% + 33px); font-size: 9px; }
  .v-transform-core-label b { font-size: 10px; }
  .v-transform-note { position: static; justify-content: center; margin: 12px 0 0; }
  .v-transform-results { gap: 8px; }
  .v-transform-card figcaption { margin-top: 8px; }
  .v-transform-caption b { font-size: 11px; }
  .v-transform-caption small { font-size: 9px; }
  .v-transform-chip { min-height: 22px; padding-inline: 7px; font-size: 8px; }
  .v-transform-chip--image { top: 7px; right: 7px; }
}

@media (prefers-reduced-motion:reduce) {
  .v-transform-card img,
  .v-transform-flow * { animation: none!important; transition: none!important; }
}

/* Registration keeps the vendor captcha within the existing Vitrio form rhythm. */
.v-auth-captcha { display: flex; justify-content: center; min-height: 100px; margin-top: 18px; overflow: hidden; }
.v-auth-captcha .smart-captcha { width: 100%; max-width: 320px; }
.v-auth-code-note { margin: 22px 0 0; padding: 12px 13px; border-radius: 10px; background: #f2f7e8; color: #445127; font-size: 13px; line-height: 1.45; }
.v-auth-code-note b { color: var(--v-ink); }
.v-auth-back { width: 100%; margin-top: 10px !important; }