/* Winery Hotels page on top of /appshift.css: the app's pink and emerald on white, the warm
   "cellar" near-black for dark mode, a serif italic for the one accent word in a heading
   (the app does the same with Georgia), and real app screenshots inside the phone frames. */

:root {
  --accent: #e11d55;
  --accent-deep: #c8164a;
  --accent-soft: #ffe4ea;
  --accent-glow: rgba(246, 51, 103, 0.32);
  --background: #fffafa;
  --elevated: #fff1f3;
  --ink: #1e1213;
  --vine-bg: #d9f5e8; --vine-fg: #047857;
  --gold-bg: #fff1c9; --gold-fg: #92600a;
  --stone-bg: #eef1f5; --stone-fg: #475569;
  --serif: 'Instrument Serif', Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --accent: #ff637b; --accent-deep: #ff8a9c; --accent-soft: rgba(255, 99, 123, 0.16);
    --accent-glow: rgba(255, 99, 123, 0.36);
    --background: #1e1213; --surface: #2e2021; --elevated: #3c2f2f; --ink: #2e2021;
    --vine-bg: rgba(16, 185, 129, 0.18); --vine-fg: #6ee7b7;
    --gold-bg: rgba(251, 191, 36, 0.16); --gold-fg: #fcd34d;
    --stone-bg: rgba(183, 171, 168, 0.14); --stone-fg: #d6ccc9;
  }
}
/* Dark chosen in the footer, whatever the system says */
:root[data-theme='dark'] {
  --accent: #ff637b; --accent-deep: #ff8a9c; --accent-soft: rgba(255, 99, 123, 0.16);
  --accent-glow: rgba(255, 99, 123, 0.36);
  --background: #1e1213; --surface: #2e2021; --elevated: #3c2f2f; --ink: #2e2021;
  --vine-bg: rgba(16, 185, 129, 0.18); --vine-fg: #6ee7b7;
  --gold-bg: rgba(251, 191, 36, 0.16); --gold-fg: #fcd34d;
  --stone-bg: rgba(183, 171, 168, 0.14); --stone-fg: #d6ccc9;
}

h1, h2, h3, .brand { letter-spacing: -0.025em; }
h1, h2 { font-weight: 500; }
h3 { font-weight: 600; }
/* One accent word per heading, in a real serif italic */
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.accent.serif { color: var(--accent); }

/* Flat, like the app: no gradient on the primary button */
.button.primary { background: var(--accent); }
.button.primary:hover { background: var(--accent-deep); }
.button .i { font-size: 20px; }
.float-tag .i { color: var(--accent); }

/* Tones from the app: brand pink, the emerald of direct booking, harvest gold, slate */
.tone-rose { background: var(--accent-soft); } .tone-rose .num, .tone-rose .step-ic, .tone-rose .eyebrow { color: var(--accent-deep); }
.tone-vine { background: var(--vine-bg); } .tone-vine .num, .tone-vine .step-ic, .tone-vine .eyebrow { color: var(--vine-fg); }
.tone-gold { background: var(--gold-bg); } .tone-gold .num, .tone-gold .step-ic, .tone-gold .eyebrow { color: var(--gold-fg); }
.tone-stone { background: var(--stone-bg); } .tone-stone .num, .tone-stone .step-ic, .tone-stone .eyebrow { color: var(--stone-fg); }

/* Real screenshots (1320 × 2868) fill the screen exactly */
.screen.shotted { aspect-ratio: 1320 / 2868; background: #fff; }
.screen.shotted img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature .mock { display: grid; place-items: center; }

.stat strong { font-weight: 500; }
.problem .stat small a { color: inherit; }

.promise { background: #1e1213; }
.promise li i { background: rgba(255, 99, 123, 0.18); color: #ff8a9c; }
.promise-link { margin-top: 18px; }
.promise-link a { color: #ff8a9c; font-weight: 600; }

.final-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.nav-links a { white-space: nowrap; }