/* Cellar Dash — the marketing homepage.
 *
 * Estate Light, from the same tokens.css the app links. The handoff mock was
 * drawn in a grey-and-gold "Classical" system; every one of its colours is
 * mapped onto an existing --cd-* token here rather than reproduced, so the
 * homepage and the product are the same parchment and the same sienna.
 *
 * This file is deliberately standalone: the page links tokens.css and this,
 * not the app's stylesheet. Someone who has never signed in should not pay for
 * four thousand lines of cellar UI to read a headline. The few shared-looking
 * pieces (buttons, focus rings) are restated here from tokens, which is why
 * they match without inheriting.
 *
 * Layout: one 1140px column, eleven bands, alternating tinted backgrounds.
 * Cormorant for anything display, the app's sans for prose.
 */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--cd-page);
  color: var(--el-body);
  font-family: var(--cd-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 32px; }

/* Bands. Every other one is tinted, and a hairline separates them all. */
.band { border-bottom: 1px solid var(--el-line); }
.band.tint { background: var(--el-panel); }
.band > .wrap { padding: 82px 32px; }
/* Clears the sticky header, which measures 84px — the handoff's 80 left the
   band's top edge tucked under it. */
section[id] { scroll-margin-top: 96px; }

/* ── Type ─────────────────────────────────────────────────────────────── */
h1, h2, h3, .serif { font-family: var(--cd-serif); color: var(--el-ink); }
h1 { font-size: 74px; font-weight: 400; line-height: 1.03; letter-spacing: -0.012em; }
h2 { font-size: 42px; font-weight: 400; line-height: 1.1; }
h3 { font-size: 21px; font-weight: 600; line-height: 1.12; }

.eyebrow {
  font-family: var(--cd-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.22em; color: var(--el-accent2); font-feature-settings: "tnum";
  margin-bottom: 26px;
}
.lede { font-size: 19px; line-height: 1.7; max-width: 30em; color: var(--el-body); }
.muted { color: var(--el-muted-aa); }
.fine { font-size: 13px; color: var(--el-muted-aa); }
.prose { font-size: 15px; line-height: 1.8; text-align: justify; hyphens: auto; }
.measure { max-width: 42em; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: 12px 26px; border-radius: 4px; cursor: pointer;
  font-family: var(--cd-sans); font-size: 16px; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; transition: background 0.15s, border-color 0.15s;
}
.btn-fill { background: var(--el-accent); color: #fff; border-color: var(--el-accent); }
.btn-fill:hover { background: var(--el-accent2); border-color: var(--el-accent2); }
.btn-fill:active { background: #7d4020; border-color: #7d4020; }
/* Filled cabernet rather than an outline — see --el-wine-deep in tokens.css
   for why an outline button on this background was not a button at all. */
.btn-ghost {
  padding: 12px 22px; background: var(--el-wine); color: var(--el-on-wine);
  border-color: var(--el-wine);
}
.btn-ghost:hover { background: var(--el-wine-deep); border-color: var(--el-wine-deep); }
.btn-ghost:active { background: var(--el-wine-deep); border-color: var(--el-wine-deep); }
a:focus-visible, .btn:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--el-accent); outline-offset: 2px;
}

/* ── 1. Header ────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--cd-page) 92%, transparent);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--el-line);
}
.site-head .wrap { display: flex; align-items: center; gap: 32px; padding: 15px 32px; }
.brand {
  flex: 1; font-family: var(--cd-serif); font-size: 22px; letter-spacing: 0.03em;
  color: var(--el-ink); text-decoration: none;
}
.site-nav { display: flex; gap: 26px; }
.site-nav a { font-size: 14px; color: var(--el-muted-aa); text-decoration: none; }
.site-nav a:hover { color: var(--el-accent2); }
/* The way back in. Quieter than "Start free" — the people who need it are
   looking for it, and the people who don't should not be sold to twice. */
.cellar-door {
  padding: 11px 18px; border-radius: 4px; cursor: pointer; white-space: nowrap;
  background: var(--el-wine); border: 1px solid var(--el-wine); color: var(--el-on-wine);
  font-family: var(--cd-sans); font-size: 15px;
}
.cellar-door:hover { background: var(--el-wine-deep); border-color: var(--el-wine-deep); }
.foot-door {
  padding: 7px 14px; border-radius: 4px; cursor: pointer;
  background: var(--cd-actq-bg-dk); border: 1px solid var(--cd-actq-bd-dk);
  color: var(--cd-actq-ink-dk); font-family: var(--cd-sans); font-size: 13px; font-weight: 600;
}
.foot-door:hover { background: var(--cd-actq-bg-dk-h); border-color: var(--el-accent-deep); color: #fff; }

/* ── The door ─────────────────────────────────────────────────────────────
   Modal, unlike the assistant's panel: this one wants the whole of your
   attention for the ten seconds it takes to type an address. */
.door {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in srgb, var(--cd-well-1) 55%, transparent);
  backdrop-filter: blur(3px);
}
.door[hidden] { display: none; }
.door-box {
  position: relative; width: 100%; max-width: 440px; padding: 34px 32px 30px;
  background: var(--el-card); border: 1px solid var(--el-line2); border-radius: 4px;
  box-shadow: 0 32px 80px -24px rgba(0,0,0,0.45);
}
.door-box h2 { font-size: 34px; margin-bottom: 12px; }
.door-box p { font-size: 15px; line-height: 1.7; color: var(--el-muted-aa); }
.door-x {
  position: absolute; top: 10px; right: 12px; width: 32px; height: 32px;
  cursor: pointer; background: var(--cd-actq-bg); border: 1px solid var(--cd-actq-bd); border-radius: 4px;
  font-size: 24px; line-height: 1; color: var(--cd-actq-ink);
}
.door-x:hover { color: var(--cd-act-ink); background: var(--cd-act-bg); border-color: var(--cd-act-bg); }
#door-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
#door-email {
  flex: 1; min-width: 200px; padding: 12px 14px; border-radius: 4px; font-size: 16px;
  background: var(--el-page); color: var(--el-ink); border: 1px solid var(--el-line2);
  font-family: var(--cd-sans);
}
#door-email:focus { outline: 2px solid var(--el-accent); outline-offset: 2px; }
#door-say { min-height: 0; }
#door-say:empty { display: none; }
#door-say.ok { color: var(--el-ok); }
#door-say.bad { color: var(--el-hold-aa); }

/* ── 2. Hero ──────────────────────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 64px; align-items: center;
  padding: 92px 32px 76px;
}
.hero p + p { margin-top: 18px; }
.hero .btns { display: flex; gap: 14px; flex-wrap: wrap; margin: 32px 0 16px; }

/* The plate: a mount rather than a frame — an inner border in the card colour,
   a hairline outside it. No sepia grade; the handoff left that open, and on
   parchment a graded photo reads as a stain rather than a treatment. */
.plate {
  border: 6px solid var(--el-card); outline: 1px solid var(--el-line2);
  box-shadow: var(--cd-shadow-card);
}
.plate img { display: block; width: 100%; height: 460px; object-fit: cover; }
.plate.sm img { height: 420px; }

/* ── 3. Pain points ───────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; }
.pains { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 48px; }
.pain { border-top: 1px solid var(--el-accent); padding-top: 18px; }
.pain h3 { margin-bottom: 8px; }

/* ── 4. Seven cellars ─────────────────────────────────────────────────── */
.head-row { display: flex; align-items: end; gap: 48px; flex-wrap: wrap; margin-bottom: 44px; }
/* Shrinkable, not fixed: `flex: none` kept the long headings at their
   max-content width, which pushed the page sideways on a phone. */
.head-row h2 { flex: 0 1 auto; max-width: 100%; }
.head-row p { flex: 1; min-width: 280px; font-size: 15px; }
.cellars {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--el-line2); border-bottom: 1px solid var(--el-line2);
}
/* Each cell carries its own cellar's brand colour as the rule above it — the
   same --cd-*-br tokens the app uses for dots and map pins. */
.cellars div {
  padding: 22px 8px; text-align: center; font-family: var(--cd-serif); font-size: 19px;
  color: var(--el-ink); border-right: 1px solid var(--el-line);
  box-shadow: inset 0 2px 0 var(--cd-accent-br, var(--el-accent));
}
.cellars div:last-child { border-right: 0; }

/* ── 5. Getting it in ─────────────────────────────────────────────────── */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.card { border: 1px solid var(--el-line2); border-radius: 4px; padding: 26px 24px; }
.kicker {
  font-family: var(--cd-mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--el-accent2); font-feature-settings: "tnum";
}
.card h3 { margin: 10px 0; }

/* ── 6. Four questions ────────────────────────────────────────────────── */
.quads { display: grid; grid-template-columns: 1fr 1fr; gap: 52px 64px; margin-top: 44px; }
.quads h3 { font-size: 24px; margin-bottom: 10px; }

/* ── 7. Getting more out of it ────────────────────────────────────────── */
.split-alt { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 60px; align-items: center; }
.marks { display: grid; gap: 16px; margin-top: 26px; }
.marks div { display: flex; gap: 12px; font-size: 15px; line-height: 1.7; }
.marks span { color: var(--el-accent-aa); flex: none; }
.marks b { color: var(--el-ink); font-weight: 600; }

/* ── 8. Comparison ────────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; margin-top: 40px; }
.compare {
  width: 100%; min-width: 880px; border-collapse: collapse;
  font-size: 14px; font-feature-settings: "tnum";
}
.compare th, .compare td {
  padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--el-line);
}
.compare thead th {
  background: var(--el-panel2); font-family: var(--cd-sans); font-weight: 600;
  color: var(--el-ink); border-bottom: 1px solid var(--el-line2);
}
.compare thead th.us { color: var(--el-accent2); }
.compare tbody th { font-weight: 400; color: var(--el-body); width: 27%; }
.compare .tag {
  display: inline-block; padding: 2px 9px; border-radius: 2px;
  background: var(--cd-accent-wash); color: var(--el-accent2); font-size: 13px;
}
.compare td { color: var(--el-muted-aa); }

/* ── 9. Pricing ───────────────────────────────────────────────────────── */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.price {
  border: 1px solid var(--el-line2); border-radius: 4px; padding: 28px 26px;
  background: var(--el-card);
}
.price.on { border-color: var(--el-accent); }
.price .name { font-size: 15px; color: var(--el-muted-aa); margin-bottom: 10px; }
.price .fig {
  font-family: var(--cd-serif); font-size: 30px; color: var(--el-ink);
  font-feature-settings: "tnum";
}
.price .fig small { font-family: var(--cd-sans); font-size: 14px; color: var(--el-muted-aa); }
.price p { font-size: 15px; margin-top: 12px; }

/* ── 10. How it works ─────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 44px; }
.numeral {
  font-family: var(--cd-serif); font-size: 52px; line-height: 1; color: var(--el-gold-aa);
  font-feature-settings: "tnum"; margin-bottom: 14px;
}
.steps h3 { font-size: 23px; margin-bottom: 10px; }

/* ── 11. FAQ ──────────────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: 0.65fr 1.35fr; gap: 60px; }
.faq h2 { font-size: 40px; }
/* The assistant's card: the same glass the app wears, over written answers. */
.faq-card {
  max-width: 520px; border: 1px solid var(--el-line2); border-radius: 4px;
  background: color-mix(in srgb, var(--el-panel) 55%, var(--cd-page));
  box-shadow: var(--cd-shadow-card); overflow: hidden;
}
.faq-head {
  display: flex; align-items: center; gap: 12px; padding: 15px 20px;
  border-bottom: 1px solid var(--el-line);
}
.faq-head-txt { display: flex; flex-direction: column; min-width: 0; }
.faq-head strong {
  font-family: var(--cd-serif); font-size: 19px; font-weight: 400; color: var(--el-ink);
}
.faq-head em { font-style: normal; font-size: 11px; color: var(--el-muted-aa); }
.faq-row { border-bottom: 1px solid var(--el-line); }
.faq-row:last-child { border-bottom: 0; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 20px; cursor: pointer; text-align: left;
  background: var(--cd-actq-bg); border: 0; color: var(--cd-actq-ink); font-weight: 600;
  font-family: var(--cd-sans); font-size: 14.5px; line-height: 1.4;
}
.faq-q:hover { background: var(--cd-actq-bg-h); }
.faq-q i { font-style: normal; font-size: 18px; color: currentColor; flex: none; }
.faq-a {
  padding: 0 20px 20px; font-size: 14px; line-height: 1.75; color: var(--el-muted-aa);
  text-align: justify; hyphens: auto;
}
.faq-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 20px; border-top: 1px solid var(--el-line);
}
.faq-foot .fine { font-size: 12.5px; }

/* ── 12. Closing CTA + footer ─────────────────────────────────────────── */
/* Stays dark in every theme, like the globe wells in the app. */
.closing { background: var(--cd-well-1); color: var(--cd-on-dark-2); }
.closing .inner { max-width: 760px; margin: 0 auto; padding: 92px 32px; text-align: center; }
.closing h2 { font-size: 50px; line-height: 1.08; color: var(--cd-on-dark); }
.closing p { font-size: 17px; line-height: 1.75; max-width: 32em; margin: 20px auto 0; }
.signup { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 32px 0 14px; }
.signup input {
  min-width: 300px; padding: 12px 14px; border-radius: 4px; font-size: 16px;
  background: transparent; color: var(--cd-on-dark); font-family: var(--cd-sans);
  border: 1px solid color-mix(in srgb, var(--cd-on-dark) 34%, transparent);
}
.signup input::placeholder { color: color-mix(in srgb, var(--cd-on-dark) 45%, transparent); }
.signup input:focus { outline: 2px solid var(--el-accent-deep); outline-offset: 2px; }
.closing .fine { color: color-mix(in srgb, var(--cd-on-dark) 62%, transparent); }
.say { min-height: 1.5em; font-size: 15px; margin-top: 14px; }
.say.ok { color: var(--cd-on-dark-ok); }
.say.bad { color: var(--cd-on-dark-bad); }

.site-foot { background: var(--cd-well-1); color: var(--cd-on-dark-2); }
.site-foot .wrap {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 30px 32px;
  border-top: 1px solid color-mix(in srgb, var(--cd-on-dark) 15%, transparent);
  font-size: 13px;
}
.site-foot .brand { color: var(--cd-on-dark); font-size: 19px; }
.site-foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-foot a { color: var(--cd-on-dark-2); text-decoration: none; }
.site-foot a:hover { color: #fff; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero, .split, .split-alt, .faq { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 56px 32px 48px; }
  .pains, .quads, .cards3, .prices, .steps { grid-template-columns: 1fr; gap: 32px; }
  /* The plates follow their text rather than leading it. */
  .hero .plate, .split-alt .plate { order: 2; }
  .cellars { grid-template-columns: repeat(4, 1fr); }
  .cellars div:nth-child(4) { border-right: 0; }
  .cellars div:nth-child(n+5) { border-top: 1px solid var(--el-line); }
  h1 { font-size: 44px; }
  h2, .faq h2 { font-size: 30px; }
  .closing h2 { font-size: 34px; }
  .closing .inner { padding: 64px 24px; }
  .band > .wrap { padding: 56px 24px; }
  .wrap { padding: 0 24px; }
  .site-nav { display: none; }
  .site-head .wrap { gap: 10px; padding: 10px 24px; }
  .brand { font-size: 19px; }
  .cellar-door, .site-head .btn {
    padding: 11px 14px; font-size: 14px; min-height: 44px;
    display: inline-flex; align-items: center;
  }
  .door-box { padding: 28px 22px 24px; }
  .door-box h2 { font-size: 26px; }
  .signup input { min-width: 0; flex: 1; }
}