/*
  Shared stylesheet for the /vs/ comparison pages. Mirrors the homepage's
  design system (radial-gradient cream background, Playfair display
  headings, frosted-glass comparison card, color-pill badges, feature tiles)
  so the comparison pages feel like a continuous brand surface rather than
  AI-generated landing pages.
*/

:root {
  --burgundy: #6f1832;
  --burgundy-dark: #4a0e20;
  --burgundy-light: #8f2340;
  --gold: #c9a961;
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --cream: #faf6f0;
  --cream-dark: #f0e8d8;
  --border: rgba(111, 24, 50, 0.15);
  --radius-lg: 18px;
  --radius-md: 12px;
  --shadow-sm: 0 2px 8px rgba(111, 24, 50, 0.04);
  --shadow-md: 0 8px 24px rgba(111, 24, 50, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f5f0e6;
    --ink-soft: #b5ab9c;
    --cream: #1a1410;
    --cream-dark: #241c16;
    --border: rgba(201, 169, 97, 0.15);
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: radial-gradient(ellipse at top, #f5ede0 0%, var(--cream) 55%, #e8dcc5 100%);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
}
@media (prefers-color-scheme: dark) {
  body {
    background: radial-gradient(ellipse at top, #2a1e18 0%, var(--cream) 60%, #0f0a07 100%);
  }
}

a { color: var(--burgundy); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header strip */
.page-header {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px clamp(20px, 5vw, 32px) 0;
}
.logo-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.logo-link:hover { text-decoration: none; }
.logo-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(111, 24, 50, 0.18);
}

/* CellarLog wordmark — same masked-PNG approach the homepage uses.
   The wordmark is a transparent silhouette filled by the gradient
   background, so the gradient's color determines visibility. We
   explicitly swap to a champagne/peach gradient in dark mode because
   burgundy on the dark cream background reads as near-black and
   disappears entirely (we hit this exact bug on the homepage h1
   earlier). */
.logo-wordmark {
  display: block;
  /* Wordmark PNG is 783×173 — set both dimensions explicitly because
     aspect-ratio doesn't always resolve to a real height when this span
     sits inside a flex container, which was making the wordmark
     collapse to zero-height (invisible) in light mode. */
  width: 132px;
  height: 30px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--burgundy) 0%, var(--burgundy-dark) 100%);
  -webkit-mask-image: url('/assets/cellarlog-wordmark.png');
  mask-image: url('/assets/cellarlog-wordmark.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  /* Force alpha mask so black-on-transparent PNGs render correctly. The
     standard mask-image defaults to "match-source" which is luminance for
     images on some browsers — a black silhouette would then read as
     "fully masked out" and the gradient would be invisible. WebKit
     defaults to alpha; explicitly setting both keeps every browser happy. */
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}
@media (prefers-color-scheme: dark) {
  .logo-wordmark {
    background: linear-gradient(180deg, #f4c9b1 0%, #e8a88d 100%);
  }
}

.logo-link {
  gap: 14px;
}

/* Main column */
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px clamp(20px, 5vw, 32px) 64px;
}

.crumb {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 28px;
  letter-spacing: 0.01em;
}
.crumb a { color: var(--ink-soft); }
.crumb a:hover { color: var(--burgundy); text-decoration: none; }

/* Hero */
h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(30px, 5.5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 18px;
  max-width: 680px;
}

.lede {
  font-size: clamp(16px, 2.5vw, 18px);
  color: var(--ink-soft);
  max-width: 640px;
  margin-bottom: 28px;
  line-height: 1.55;
}

/* Section headings */
h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--burgundy);
  margin: 56px 0 16px;
}
@media (prefers-color-scheme: dark) {
  h2 {
    background: linear-gradient(180deg, #e8a88d 0%, #c67a52 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

p {
  margin-bottom: 16px;
  font-size: clamp(15px, 2.3vw, 16px);
  max-width: 680px;
  line-height: 1.7;
}

/* Apple App Store badge */
.app-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #000;
  color: #fff;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-top: 8px;
}
.app-store-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  text-decoration: none;
  color: #fff;
}
.app-store-badge:active { transform: translateY(0); }
.app-store-badge svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.app-store-badge .badge-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.1;
}
.app-store-badge .badge-small {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.app-store-badge .badge-large {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 1px;
}

/* Feature grid — mirrors the homepage's .features tiles */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 20px 0 8px;
}
.feature {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
@media (prefers-color-scheme: dark) {
  .feature {
    background: rgba(36, 28, 22, 0.6);
  }
}
.feature h3 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--burgundy);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
@media (prefers-color-scheme: dark) {
  .feature h3 { color: #e8a88d; }
}
.feature p {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 0;
  line-height: 1.55;
}

/* Pull-quote callout */
.pull {
  margin: 36px 0;
  padding: 20px 24px;
  border-left: 4px solid var(--burgundy);
  background: rgba(111, 24, 50, 0.05);
  border-radius: 4px 12px 12px 4px;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: clamp(16px, 2.5vw, 19px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 680px;
}
@media (prefers-color-scheme: dark) {
  .pull {
    background: rgba(232, 168, 141, 0.08);
    border-left-color: #e8a88d;
  }
}

/* Comparison table — mirrors the homepage's .compare-table styling */
.compare-table-wrap {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin: 24px 0;
}
@media (prefers-color-scheme: dark) {
  .compare-table-wrap {
    background: rgba(36, 28, 22, 0.6);
  }
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(12px, 2.8vw, 14px);
}
.compare-table thead th {
  background: rgba(111, 24, 50, 0.06);
  padding: 14px 10px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  border-bottom: 1px solid var(--border);
  letter-spacing: -0.01em;
}
@media (prefers-color-scheme: dark) {
  .compare-table thead th { background: rgba(232, 168, 141, 0.08); }
}
.compare-table thead th:first-child {
  text-align: left;
  padding-left: 16px;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.compare-table thead th.compare-us {
  background: linear-gradient(145deg, var(--burgundy) 0%, var(--burgundy-dark) 100%);
  color: #fff;
  font-weight: 700;
}
.compare-table tbody td {
  padding: 12px 10px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
.compare-table tbody td:first-child {
  text-align: left;
  padding-left: 16px;
  font-weight: 500;
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table td.us {
  background: rgba(111, 24, 50, 0.05);
  font-weight: 600;
  color: var(--burgundy);
}
@media (prefers-color-scheme: dark) {
  .compare-table td.us { background: rgba(232, 168, 141, 0.1); color: #e8a88d; }
}

.compare-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(111, 24, 50, 0.12);
  color: var(--burgundy);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}
@media (prefers-color-scheme: dark) {
  .compare-yes { background: rgba(232, 168, 141, 0.16); color: #e8a88d; }
}
.compare-us .compare-yes {
  background: rgba(255, 255, 255, 0.9);
  color: var(--burgundy);
}
.compare-no {
  display: inline-block;
  color: var(--ink-soft);
  opacity: 0.4;
  font-size: 15px;
}
.compare-partial {
  display: inline-block;
  font-size: 11px;
  color: var(--ink-soft);
  font-style: italic;
}
.compare-detail {
  display: block;
  font-size: 10px;
  color: var(--burgundy);
  margin-top: 2px;
}
@media (prefers-color-scheme: dark) {
  .compare-detail { color: #e8a88d; }
}

@media (max-width: 580px) {
  .compare-table thead th:not(:first-child) { font-size: 10px; padding: 10px 4px; }
  .compare-table tbody td { padding: 10px 4px; font-size: 12px; }
  .compare-table tbody td:first-child { padding-left: 12px; font-size: 12px; }
  .compare-yes { width: 18px; height: 18px; font-size: 11px; }
}

/* Pricing card */
.price-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin: 24px 0;
  box-shadow: var(--shadow-sm);
}
@media (prefers-color-scheme: dark) {
  .price-card { background: rgba(36, 28, 22, 0.6); }
}
.price-card-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.price-card-amount {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 600;
  color: var(--burgundy);
  letter-spacing: -0.02em;
}
@media (prefers-color-scheme: dark) {
  .price-card-amount { color: #e8a88d; }
}
.price-card-label {
  font-size: 14px;
  color: var(--ink-soft);
}
.price-card-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}

/* Footer back-link */
.footer-back {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--ink-soft);
}
.footer-back a {
  color: var(--burgundy);
  font-weight: 600;
  text-decoration: none;
}
@media (prefers-color-scheme: dark) {
  .footer-back a { color: #e8a88d; }
}
.fineprint {
  font-size: 11px;
  color: var(--ink-soft);
  opacity: 0.7;
  margin-top: 16px;
  line-height: 1.5;
}

/* In-prose bullet list — used on the comparison pages for the
   "where both fall short" section. Matched to the ledе font/size
   so it reads as continuation of the body paragraphs rather than
   a new visual element. */
.bullet-list {
  margin: 12px 0 24px;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}
.bullet-list li {
  margin-bottom: 8px;
}
.bullet-list li strong {
  color: var(--burgundy);
}