/* =====================================================================
   landing-v2.css — Vinting editorial landing page (v2 design)

   Scoped under `.landing-v2` so these rules cannot bleed into the rest
   of the app shell. Also adopts the existing global nav via
   `body[data-landing-v2]` so the nav markup stays untouched.

   Source: vinting redeign/Vinting Landing v2.html + assets/shared.css
   ===================================================================== */


/* ---------- Self-hosted fonts ---------- */
/* Styrene + MaisonMono are already declared in marketing CSS; we re-declare
   under v2-specific family names to make the cascade explicit and avoid
   relying on existing global font-face rules being present. */

@font-face {
  font-family: 'StyreneA-v2';
  src: url('/fonts/StyreneA-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'StyreneA-v2';
  src: url('/fonts/StyreneA-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'MaisonMono-v2';
  src: url('/fonts/MaisonMono-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'MaisonMono-v2';
  src: url('/fonts/MaisonMono-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Termina-v2';
  src: url('/fonts/v2/Termina-Medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}


/* ---------- Tokens (scoped to .landing-v2) ---------- */
.landing-v2 {
  --v2-cream: #EAE4DA;
  --v2-yellow: #EAC119;
  --v2-pink: #EAA7C8;
  --v2-dark: #1e2033;
  --v2-surface: #272a43;
  --v2-surface-2: #333656;
  --v2-hover: #3e4269;
  --v2-border: rgba(234, 228, 218, 0.15);
  --v2-border-strong: rgba(234, 228, 218, 0.30);
  --v2-muted: rgba(234, 228, 218, 0.60);
  --v2-ink: #1D1D1B;

  --v2-font-display: 'StyreneA-v2', 'Manrope', system-ui, sans-serif;
  --v2-font-body:    'StyreneA-v2', 'Manrope', system-ui, sans-serif;
  --v2-font-tag:     'Termina-v2', 'StyreneA-v2', system-ui, sans-serif;
  --v2-font-mono:    'MaisonMono-v2', ui-monospace, monospace;

  font-family: var(--v2-font-body);
  color: var(--v2-cream);
  background: var(--v2-yellow);
  -webkit-font-smoothing: antialiased;
  line-height: 1.2;
  /* Hard reset on inherited app-shell type rules */
  font-size: 16px;
}

.landing-v2 *,
.landing-v2 *::before,
.landing-v2 *::after { box-sizing: border-box; }

.landing-v2 p { margin: 0; line-height: 1.35; }

.landing-v2 h1,
.landing-v2 h2,
.landing-v2 h3,
.landing-v2 h4 {
  margin: 0;
  font-family: var(--v2-font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-wrap: balance;
}

.landing-v2 button {
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  font-family: var(--v2-font-body);
}

.landing-v2 a {
  color: inherit;
  text-decoration: none;
}

.landing-v2 img {
  display: block;
  max-width: 100%;
}


/* ---------- Eyebrows / tags / mono ---------- */
.landing-v2 .v2-eyebrow {
  font-family: var(--v2-font-tag);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--v2-muted);
  display: block;
  margin-bottom: 16px;
}

.landing-v2 .v2-eyebrow-ink {
  font-family: var(--v2-font-tag);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--v2-ink);
  opacity: 0.7;
  display: block;
  margin-bottom: 16px;
}


/* ---------- Section base ---------- */
.landing-v2 .v2-section { padding: 56px 28px; }
@media (min-width: 900px) {
  .landing-v2 .v2-section { padding: 112px 48px; }
}

.landing-v2 .v2-section-title {
  font-family: var(--v2-font-display);
  font-weight: 700;
  font-size: clamp(44px, 8vw, 96px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin: 0 0 32px;
  text-wrap: balance;
}
.landing-v2 .v2-accent { color: var(--v2-yellow); }

@media (min-width: 900px) {
  .landing-v2 .v2-section-title { margin-bottom: 56px; }
}


/* ---------- Hero ----------
   Mobile padding bumped from 40px 24px 0 → 56px 28px 32px:
   - top 56 lifts the issue tag off the nav
   - sides 28 give the H1 some breathing room at narrow widths
   - bottom 32 separates the hero image from the marquee */
.landing-v2 .v2-hero {
  background: var(--v2-yellow);
  color: var(--v2-ink);
  padding: 56px 28px 32px;
  border-bottom: 2px solid var(--v2-ink);
}

.landing-v2 .v2-hero .v2-issue {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 28px;
  font-family: var(--v2-font-tag);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}
.landing-v2 .v2-hero .v2-issue .v2-dot { opacity: 0.4; }

.landing-v2 .v2-hero .v2-h1 {
  font-family: var(--v2-font-display);
  font-weight: 700;
  font-size: clamp(56px, 13vw, 180px);
  letter-spacing: -0.055em;
  line-height: 0.85;
  margin: 0 0 28px;
  text-wrap: balance;
}

.landing-v2 .v2-hero-grid {
  display: grid;
  gap: 32px;
  align-items: end;
  padding-bottom: 48px;
}

.landing-v2 .v2-hero-copy {
  border-top: 2px solid var(--v2-ink);
  padding-top: 18px;
  max-width: 560px;
}
.landing-v2 .v2-hero-copy p {
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 24px;
}
/* The SEO H1 reads as hero body copy — the .v2-h1 div above carries the
   visual headline (same pattern as the v1 locked hero). */
.landing-v2 .v2-hero-copy .v2-hero-sub {
  font-family: inherit;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0 0 12px;
  /* The global heading colour (cream, for the dark theme) wins over the
     section's inherited ink — restate it or the SEO H1 is cream-on-yellow. */
  color: var(--v2-ink);
}
.landing-v2 .v2-hero-stats {
  font-family: var(--v2-font-tag);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.7;
  margin-top: 14px;
}

.landing-v2 .v2-hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Buttons — primary + secondary. Specificity bumped to override existing
   global .btn rules from public/css/styles.css. */
.landing-v2 .v2-btn {
  font-family: var(--v2-font-tag);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 18px 24px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 0; /* defeat global radius */
  transition: background 120ms ease, color 120ms ease;
}
.landing-v2 .v2-btn .v2-arrow {
  font-family: var(--v2-font-body);
  font-size: 20px;
  letter-spacing: 0;
}
.landing-v2 .v2-btn-primary {
  background: var(--v2-ink);
  color: var(--v2-yellow);
}
.landing-v2 .v2-btn-primary:hover {
  background: var(--v2-cream);
  color: var(--v2-ink);
}
.landing-v2 .v2-btn-secondary {
  background: transparent;
  color: var(--v2-ink);
  border: 2px solid var(--v2-ink);
}
.landing-v2 .v2-btn-secondary:hover {
  background: var(--v2-ink);
  color: var(--v2-yellow);
}

.landing-v2 .v2-hero-visual { position: relative; }
.landing-v2 .v2-hero-visual .v2-frame {
  border: 2px solid var(--v2-ink);
  background: var(--v2-cream);
  padding: 16px;
  aspect-ratio: 4 / 3;
  position: relative;
}
.landing-v2 .v2-hero-visual .v2-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.landing-v2 .v2-hero-visual .v2-fig-tag {
  position: absolute;
  bottom: 26px;
  left: 26px;
  background: var(--v2-yellow);
  border: 2px solid var(--v2-ink);
  padding: 8px 14px;
  font-family: var(--v2-font-tag);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--v2-ink);
}
.landing-v2 .v2-hero-visual .v2-stamp {
  position: absolute;
  top: -16px;
  right: 20px;
  background: var(--v2-ink);
  color: var(--v2-yellow);
  padding: 8px 14px;
  font-family: var(--v2-font-tag);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  transform: rotate(-3deg);
}

@media (min-width: 900px) {
  .landing-v2 .v2-hero { padding: 72px 48px 0; }
  .landing-v2 .v2-hero .v2-issue { margin-bottom: 40px; }
  .landing-v2 .v2-hero .v2-h1 { margin-bottom: 48px; }
  .landing-v2 .v2-hero-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    padding-bottom: 72px;
  }
  .landing-v2 .v2-hero-copy p {
    font-size: 22px;
    margin-bottom: 28px;
  }
  .landing-v2 .v2-hero-copy .v2-hero-sub {
    font-size: 22px;
    margin-bottom: 14px;
  }
  .landing-v2 .v2-hero-ctas { flex-direction: row; }
  .landing-v2 .v2-hero-visual .v2-frame { aspect-ratio: 5 / 6; }
}


/* ---------- Marquee ---------- */
.landing-v2 .v2-marquee {
  background: var(--v2-dark);
  color: var(--v2-cream);
  padding: 20px 0;
  border-bottom: 1px solid var(--v2-border);
  overflow: hidden;
}
.landing-v2 .v2-marquee-track {
  display: flex;
  gap: 32px;
  white-space: nowrap;
  animation: v2-marquee 30s linear infinite;
}
.landing-v2 .v2-marquee span {
  font-family: var(--v2-font-tag);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.landing-v2 .v2-marquee span.v2-sep { color: var(--v2-yellow); }

@keyframes v2-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-v2 .v2-marquee-track { animation: none; }
}


/* ---------- How it works ---------- */
.landing-v2 .v2-how {
  background: var(--v2-dark);
  color: var(--v2-cream);
}
.landing-v2 .v2-how-grid {
  display: grid;
  gap: 32px;
}
.landing-v2 .v2-how-grid article {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.landing-v2 .v2-how-grid .v2-thumb {
  aspect-ratio: 1;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  overflow: hidden;
  position: relative;
}
.landing-v2 .v2-how-grid .v2-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.9);
  display: block;
}
.landing-v2 .v2-how-grid .v2-step-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--v2-yellow);
  color: var(--v2-ink);
  padding: 6px 12px;
  font-family: var(--v2-font-tag);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
}
.landing-v2 .v2-how-grid h3 {
  font-family: var(--v2-font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.landing-v2 .v2-how-grid p {
  color: var(--v2-muted);
  font-size: 15px;
  line-height: 1.4;
}
.landing-v2 .v2-how-grid article > div:last-child {
  border-top: 1px solid var(--v2-border);
  padding-top: 16px;
}

@media (min-width: 900px) {
  .landing-v2 .v2-how-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .landing-v2 .v2-how-grid h3 { font-size: 36px; }
}


/* ---------- Big quote / testimonial ---------- */
.landing-v2 .v2-quote-wrap {
  background: var(--v2-dark);
  padding: 24px 24px 56px;
}
.landing-v2 .v2-quote-card {
  background: var(--v2-cream);
  color: var(--v2-ink);
  padding: 40px 28px;
  margin: 0;
}
.landing-v2 .v2-quote-card blockquote {
  font-family: var(--v2-font-display);
  font-weight: 700;
  font-size: clamp(32px, 6vw, 72px);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0;
  text-wrap: balance;
}
.landing-v2 .v2-quote-meta {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--v2-font-tag);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.landing-v2 .v2-quote-meta .v2-name { font-weight: 500; }
.landing-v2 .v2-quote-meta .v2-secondary { opacity: 0.55; }

@media (min-width: 900px) {
  .landing-v2 .v2-quote-wrap { padding: 56px 48px 112px; }
  .landing-v2 .v2-quote-card { padding: 96px 72px; }
  .landing-v2 .v2-quote-meta { margin-top: 48px; }
}


/* ---------- Features grid ---------- */
.landing-v2 .v2-features {
  background: var(--v2-cream);
  color: var(--v2-ink);
  border-top: 2px solid var(--v2-ink);
  border-bottom: 2px solid var(--v2-ink);
}
.landing-v2 .v2-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 2px solid var(--v2-ink);
}
.landing-v2 .v2-features-grid article {
  padding: 24px 0;
  border-bottom: 2px solid var(--v2-ink);
}
.landing-v2 .v2-features-grid article:last-child { border-bottom: none; }
.landing-v2 .v2-features-grid .v2-n {
  font-family: var(--v2-font-tag);
  font-size: 11px;
  opacity: 0.6;
  letter-spacing: 0.16em;
  margin-bottom: 12px;
}
.landing-v2 .v2-features-grid h3 {
  font-family: var(--v2-font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 10px;
}
.landing-v2 .v2-features-grid p {
  font-size: 15px;
  opacity: 0.72;
  line-height: 1.4;
  margin: 0;
}

@media (min-width: 900px) {
  .landing-v2 .v2-features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .landing-v2 .v2-features-grid article {
    padding: 32px 24px;
    border-right: 2px solid var(--v2-ink);
  }
  .landing-v2 .v2-features-grid article:nth-child(3n) { border-right: none; }
  .landing-v2 .v2-features-grid article:nth-last-child(-n+3) { border-bottom: none; }
  .landing-v2 .v2-features-grid h3 { font-size: 36px; }
}


/* ---------- Audience rows ---------- */
.landing-v2 .v2-audience { background: var(--v2-dark); }
.landing-v2 .v2-audience-rows {
  border-top: 1px solid var(--v2-border);
}
.landing-v2 .v2-audience-rows article {
  padding: 24px 0;
  border-bottom: 1px solid var(--v2-border);
  display: grid;
  gap: 16px;
  align-items: center;
  grid-template-columns: 1fr;
}
.landing-v2 .v2-audience-rows .v2-row-tag {
  font-family: var(--v2-font-tag);
  font-size: 11px;
  font-weight: 500;
  color: var(--v2-yellow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.landing-v2 .v2-audience-rows h3 {
  font-family: var(--v2-font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
}
.landing-v2 .v2-audience-rows p {
  color: var(--v2-muted);
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
}
.landing-v2 .v2-audience-rows .v2-row-img {
  aspect-ratio: 16 / 9;
  background: var(--v2-surface);
  overflow: hidden;
}
.landing-v2 .v2-audience-rows .v2-row-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 900px) {
  .landing-v2 .v2-audience-rows article {
    grid-template-columns: 140px 1.5fr 2fr 1fr;
    padding: 40px 0;
    gap: 32px;
  }
  .landing-v2 .v2-audience-rows h3 { font-size: 40px; }
  .landing-v2 .v2-audience-rows p { font-size: 17px; }
  .landing-v2 .v2-audience-rows .v2-row-img { aspect-ratio: 4 / 3; }
}


/* ---------- FAQ ---------- */
.landing-v2 .v2-faq {
  background: var(--v2-dark);
  border-top: 1px solid var(--v2-border);
}
.landing-v2 .v2-faq-list details {
  border-top: 1px solid var(--v2-border-strong);
  padding: 20px 0;
  cursor: pointer;
}
.landing-v2 .v2-faq-list details:last-child {
  border-bottom: 1px solid var(--v2-border-strong);
}
.landing-v2 .v2-faq-list summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.landing-v2 .v2-faq-list summary::-webkit-details-marker { display: none; }
.landing-v2 .v2-faq-list summary .v2-q-num {
  font-family: var(--v2-font-tag);
  font-size: 11px;
  color: var(--v2-muted);
  letter-spacing: 0.16em;
  flex-shrink: 0;
  margin-right: 16px;
}
.landing-v2 .v2-faq-list summary .v2-q-text {
  font-family: var(--v2-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  flex: 1;
}
.landing-v2 .v2-faq-list summary .v2-q-toggle {
  color: var(--v2-yellow);
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  font-family: var(--v2-font-body);
}
.landing-v2 .v2-faq-list details[open] summary .v2-q-toggle::before { content: '−'; }
.landing-v2 .v2-faq-list details:not([open]) summary .v2-q-toggle::before { content: '+'; }
.landing-v2 .v2-faq-list .v2-a {
  margin-top: 14px;
  padding-left: 36px;
  color: var(--v2-muted);
  font-size: 15px;
  line-height: 1.5;
}

@media (min-width: 900px) {
  .landing-v2 .v2-faq-list details { padding: 28px 0; }
  .landing-v2 .v2-faq-list summary .v2-q-num { margin-right: 32px; }
  .landing-v2 .v2-faq-list summary .v2-q-text { font-size: 28px; }
  .landing-v2 .v2-faq-list .v2-a { padding-left: 56px; }
}


/* ---------- Final CTA ----------
   Mobile padding bumped 56px 24px → 72px 28px so the giant clamp(64,14vw,180)
   h2 has room to breathe before hitting either edge. */
.landing-v2 .v2-final {
  background: var(--v2-yellow);
  color: var(--v2-ink);
  border-top: 2px solid var(--v2-ink);
  padding: 72px 28px;
}
.landing-v2 .v2-final .v2-eyebrow-ink { margin-bottom: 16px; }
.landing-v2 .v2-final h2 {
  font-family: var(--v2-font-display);
  font-weight: 700;
  font-size: clamp(64px, 14vw, 180px);
  letter-spacing: -0.055em;
  line-height: 0.85;
  margin: 0 0 32px;
  text-wrap: balance;
  /* Same global-heading colour leak as the hero — keep ink on yellow. */
  color: var(--v2-ink);
}
.landing-v2 .v2-final .v2-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.landing-v2 .v2-final .v2-strap {
  font-family: var(--v2-font-tag);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.7;
  align-self: center;
}

@media (min-width: 900px) {
  .landing-v2 .v2-final { padding: 120px 48px; }
  .landing-v2 .v2-final h2 { margin-bottom: 56px; }
  .landing-v2 .v2-final .v2-row {
    flex-direction: row;
    align-items: center;
  }
}


/* ---------- Global nav adoption ----------
   The existing site nav (defined in index.html ~595–875) is kept as-is
   for auth state. When the home view is active we add `data-landing-v2`
   to <body> and restyle the nav to the v2 yellow/ink look. */

body[data-landing-v2] .nav,
body[data-landing-v2] header.header,
body[data-landing-v2] #marketingNav {
  background: var(--v2-yellow, #EAC119);
  color: var(--v2-ink, #1D1D1B);
  border-bottom: 2px solid var(--v2-ink, #1D1D1B);
}

body[data-landing-v2] .nav a,
body[data-landing-v2] .nav-link {
  color: var(--v2-ink, #1D1D1B);
}

body[data-landing-v2] .nav .btn-secondary,
body[data-landing-v2] .nav .btn-primary {
  border-radius: 0;
}

/* Bust the existing 1200px-centred container so nav content aligns to the
   same gutter as the v2 sections (28px mobile / 48px desktop) instead of
   being constrained to a narrow centred column on wide displays. */
body[data-landing-v2] .header-content,
body[data-landing-v2] header.header > .container,
body[data-landing-v2] #marketingNav > .container {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 1rem 28px;
}
@media (min-width: 900px) {
  body[data-landing-v2] .header-content,
  body[data-landing-v2] header.header > .container,
  body[data-landing-v2] #marketingNav > .container {
    padding: 1rem 48px;
  }
}

/* Footer adoption — quieter so we don't trample the existing global footer.
   The existing #marketingFooter at line ~3665 keeps its structure;
   we just nudge it onto the v2 dark/cream palette and add a hard top
   margin so the 2px ink border above it isn't crushed against the final
   yellow CTA. */
body[data-landing-v2] #marketingFooter {
  background: var(--v2-dark, #1e2033);
  color: var(--v2-cream, #EAE4DA);
  border-top: 2px solid var(--v2-ink, #1D1D1B);
  padding-top: 64px;
  margin-top: 0; /* defeat the .footer { margin-top: 4rem } from styles.css */
}
@media (min-width: 900px) {
  body[data-landing-v2] #marketingFooter {
    padding-top: 96px;
  }
}

/* Bust the footer's inner 1200px-centred container so its content aligns
   to the same gutter as the v2 sections. The .footer-content lives inside
   .container which is min(90%, 1200px) — we widen it for v2 only. */
body[data-landing-v2] #marketingFooter > .container,
body[data-landing-v2] #marketingFooter .footer-content,
body[data-landing-v2] #marketingFooter .footer-bottom {
  width: auto;
  max-width: none;
  margin: 0;
  padding-left: 28px;
  padding-right: 28px;
}
@media (min-width: 900px) {
  body[data-landing-v2] #marketingFooter > .container,
  body[data-landing-v2] #marketingFooter .footer-content,
  body[data-landing-v2] #marketingFooter .footer-bottom {
    padding-left: 48px;
    padding-right: 48px;
  }
}


/* ---------- Index — keyword content + lander links ---------- */
.landing-v2 .v2-index-rows {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 2px solid var(--v2-cream);
}
.landing-v2 .v2-index-rows article {
  padding: 28px 0;
  border-bottom: 1px solid var(--v2-border);
}
.landing-v2 .v2-index-rows article:last-child { border-bottom: none; }
.landing-v2 .v2-index-rows h3 {
  font-family: var(--v2-font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 10px;
}
.landing-v2 .v2-index-rows p {
  font-size: 15px;
  opacity: 0.72;
  line-height: 1.4;
  margin: 0 0 14px;
  max-width: 520px;
}
.landing-v2 .v2-index-rows a {
  font-family: var(--v2-font-tag);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: inherit;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 3px;
}
.landing-v2 .v2-index-rows a:hover { opacity: 0.7; }

@media (min-width: 900px) {
  .landing-v2 .v2-index-rows {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 48px;
  }
  .landing-v2 .v2-index-rows article {
    border-bottom: none;
    padding: 36px 0 0;
  }
}


/* ---------- Demo — sample photo in, listing out ---------- */
/* The page base is yellow; the demo and index sections use the dark panel
   treatment (cream text, cream borders) so they need it explicitly. */
.landing-v2 .v2-demo { background: var(--v2-dark); }
.landing-v2 .v2-index { background: var(--v2-dark); }

.landing-v2 .v2-demo-grid {
  display: grid;
  gap: 32px;
  align-items: start;
}
.landing-v2 .v2-demo-photo img {
  width: 100%;
  height: auto;
  display: block;
}
.landing-v2 .v2-demo-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.landing-v2 .v2-demo-thumb {
  padding: 0;
  border: 2px solid var(--v2-border);
  background: none;
  cursor: pointer;
  width: 72px;
  height: 72px;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 120ms ease, border-color 120ms ease;
}
.landing-v2 .v2-demo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.landing-v2 .v2-demo-thumb.is-active,
.landing-v2 .v2-demo-thumb:hover {
  opacity: 1;
  border-color: var(--v2-yellow);
}
.landing-v2 .v2-demo-card {
  border: 2px solid var(--v2-cream);
  padding: 24px;
  background: rgba(234, 228, 218, 0.04);
}
.landing-v2 .v2-demo-platform {
  font-family: var(--v2-font-tag);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v2-yellow);
  margin-bottom: 14px;
}
.landing-v2 .v2-demo-card h3 {
  font-family: var(--v2-font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 12px;
}
.landing-v2 .v2-demo-price {
  font-family: var(--v2-font-display);
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 6px;
}
.landing-v2 .v2-demo-price s {
  font-size: 16px;
  font-weight: 400;
  opacity: 0.5;
  margin-left: 10px;
}
.landing-v2 .v2-demo-cond {
  font-family: var(--v2-font-tag);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 14px;
}
.landing-v2 .v2-demo-card p {
  font-size: 15px;
  line-height: 1.45;
  opacity: 0.85;
  margin: 0 0 16px;
}
.landing-v2 .v2-demo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.landing-v2 .v2-demo-tags span {
  font-family: var(--v2-font-tag);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border: 1px solid var(--v2-border-strong);
}
.landing-v2 .v2-demo-meta {
  font-size: 13px;
  opacity: 0.55;
  margin-bottom: 20px;
}

@media (min-width: 900px) {
  .landing-v2 .v2-demo-grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 56px;
  }
  .landing-v2 .v2-demo-card { padding: 36px; }
  .landing-v2 .v2-demo-card h3 { font-size: 32px; }
}