/* ─── VaultSomm — simplified home + pricing (Site Simplification plan, Sep 2026) ─
   Loaded after style.v*.css and home.v*.css. Adds only the pieces the new pages
   need; colours, type and buttons all come from the existing tokens.
   ────────────────────────────────────────────────────────────────────────── */

/* ─── Nav: "For professionals" dropdown ──────────────────────────────────── */
.nav__dropdown { position: relative; }
.nav__dropdown > .nav__link { display: inline-flex; align-items: center; gap: 6px; }
.nav__dropdown > .nav__link::after {
  content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .7;
}
.nav__menu {
  position: absolute; top: calc(100% + 10px); left: -16px; min-width: 260px; z-index: 50;
  list-style: none; margin: 0; padding: 8px 0;
  background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .2s, visibility .2s;
}
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav__dropdown:hover .nav__menu,
.nav__dropdown:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu a {
  display: block; padding: 10px 16px; font-size: .88rem; color: var(--color-text-muted); text-decoration: none;
}
.nav__menu a:hover, .nav__menu a:focus-visible { color: var(--color-gold-light); background: var(--color-gold-bg); }
.nav__menu li:first-child a { border-bottom: 1px solid var(--color-border); margin-bottom: 4px; color: var(--color-text); }
.nav__signin { font-size: .85rem; color: var(--color-text-muted); text-decoration: none; margin-right: 6px; }
.nav__signin:hover { color: var(--color-gold-light); }
.nav__mobile .nav__sub { padding-left: 16px; }
.nav__mobile .nav__sub .nav__link { font-size: .92em; opacity: .85; }

/* ─── Hero: one button, one line under it ────────────────────────────────── */
.home .hero__heading { font-size: min(clamp(3rem, 1rem + 7vw, 8rem), 15svh); }
.home .hero__subheading { max-width: 52ch; }

/* ─── How it works: three short cards in a row ───────────────────────────── */
.simple-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 56px;
  border-top: 1px solid var(--h-gold-35); list-style: none; padding: 0;
}
.simple-steps li { padding: 28px 28px 28px 0; border-bottom: 1px solid var(--color-border); }
.simple-steps li + li { padding-left: 28px; border-left: 1px solid var(--color-border); }
.simple-steps__num { font-family: var(--font-display); font-size: 2.6rem; font-weight: 300; color: var(--h-gold); line-height: 1; display: block; margin-bottom: 14px; }
.simple-steps__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; margin: 0 0 8px; color: var(--color-text); }
.simple-steps__text { color: var(--color-text-muted); font-size: .95rem; margin: 0; }

/* ─── Proof: three short lines ───────────────────────────────────────────── */
.proof__lines { list-style: none; padding: 0; margin: 48px 0 0; border-top: 1px solid var(--h-gold-35); max-width: 900px; }
.proof__lines li { padding: 22px 0; border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 1rem; }
.proof__lines strong { color: var(--color-text); font-weight: 500; }
.proof__quote {
  font-family: var(--font-display); font-style: italic; font-weight: 300; color: var(--color-text);
  font-size: clamp(1.6rem, 1rem + 2vw, 2.6rem); line-height: 1.2; margin: 48px 0 0; max-width: 32ch; text-wrap: balance;
}
.proof__quote em { color: var(--h-gilt); }

/* ─── For professionals: four small cards ────────────────────────────────── */
.pro-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 48px; border: 1px solid var(--color-border); }
.pro-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 150px;
  padding: 26px 24px; text-decoration: none; color: var(--color-text); border-right: 1px solid var(--color-border);
  transition: background .3s;
}
.pro-card:last-child { border-right: 0; }
.pro-card:hover, .pro-card:focus-visible { background: var(--color-gold-bg); }
.pro-card__who { font-family: var(--font-display); font-size: 1.45rem; font-weight: 400; line-height: 1.15; }
.pro-card__go { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--h-gold); }
.pro-card:hover .pro-card__who { color: var(--h-gilt); }

/* ─── Pricing teaser: one line ───────────────────────────────────────────── */
.teaser { padding-block: clamp(64px, 10vh, 120px); border-top: 1px solid var(--color-border); }
.teaser__line { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.7rem, 1rem + 2.4vw, 3rem); line-height: 1.15; margin: 0 0 28px; max-width: 30ch; color: var(--color-text); }
.teaser__line em { color: var(--h-gilt); font-style: italic; }
.teaser__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.teaser__link { color: var(--h-gold); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.teaser__link:hover { color: var(--h-gilt); }

/* ─── Footer newsletter signup ───────────────────────────────────────────── */
.footer-signup { border-bottom: 1px solid var(--color-border); padding-block: 40px; }
.footer-signup__inner { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.footer-signup__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; margin: 0 0 4px; color: var(--color-text); }
.footer-signup__sub { margin: 0; font-size: .88rem; color: var(--color-text-muted); }
.footer-signup__form { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 1 460px; }
.footer-signup__input {
  flex: 1 1 220px; min-width: 0; padding: 12px 14px; font: inherit; font-size: .9rem;
  background: transparent; color: var(--color-text); border: 1px solid var(--color-border); border-radius: 0; outline: none;
}
.footer-signup__input:focus { border-color: var(--color-gold); }
.footer-signup__input.is-error { border-color: var(--color-error); }
.footer-signup__msg { flex-basis: 100%; margin: 0; min-height: 1.2em; font-size: .85rem; color: var(--color-text-muted); }
.footer-signup__msg.error { color: var(--color-error); }
.footer-signup__msg.success { color: var(--color-gold-light); }

/* ─── Pricing page ───────────────────────────────────────────────────────── */
.home .pricing-page { padding-top: clamp(72px, 10vh, 120px); }
.pricing-card__line { font-size: .88rem; color: var(--color-text-muted); margin: 6px 0 0; }
.pricing__bands { margin-top: 22px; font-size: .92rem; color: var(--color-text-muted); }
.pricing__bands a { color: var(--h-gold); }
.reports-table-wrap { margin-top: 48px; overflow-x: auto; border-top: 1px solid var(--h-gold-35); }
.reports-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.reports-table th, .reports-table td { text-align: left; padding: 18px 14px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.reports-table th:first-child, .reports-table td:first-child { padding-left: 0; }
.reports-table thead th { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; color: var(--h-faint); }
.reports-table__name { font-family: var(--font-display); font-size: 1.25rem; color: var(--color-text); }
.reports-table__note { display: block; font-size: .82rem; color: var(--color-text-muted); margin-top: 4px; }
.reports-table__who { font-size: .88rem; color: var(--color-text-muted); }
.reports-table__price { font-size: 1.2rem; color: var(--h-gilt); white-space: nowrap; font-variant-numeric: tabular-nums; }
.reports-table td:last-child { text-align: right; }
.reports-table .btn { white-space: nowrap; }
.reports-table__extra td { background: var(--color-gold-bg); }
.reports__footnote { margin-top: 18px; font-size: .85rem; color: var(--h-faint); max-width: 70ch; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav__signin { display: none; }
}
@media (max-width: 900px) {
  .simple-steps { grid-template-columns: 1fr; }
  .simple-steps li, .simple-steps li + li { padding: 24px 0; border-left: 0; }
  .pro-cards { grid-template-columns: 1fr 1fr; }
  .pro-card:nth-child(2) { border-right: 0; }
  .pro-card:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
}
@media (max-width: 640px) {
  .pro-cards { grid-template-columns: 1fr; }
  .pro-card { border-right: 0; border-bottom: 1px solid var(--color-border); min-height: 0; }
  .pro-card:last-child { border-bottom: 0; }
  .footer-signup__form { flex-direction: column; flex-basis: 100%; }
  .reports-table { min-width: 0; }
  .reports-table thead { display: none; }
  .reports-table, .reports-table tbody, .reports-table tr, .reports-table td { display: block; width: 100%; }
  .reports-table tr { padding: 18px 0; border-bottom: 1px solid var(--color-border); }
  .reports-table td { border: 0; padding: 4px 0; }
  .reports-table td:last-child { text-align: left; padding-top: 12px; }
  .reports-table td:empty { display: none; }
  .reports-table__extra td { background: none; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Internal review flags: hidden unless the page is served off the production hostnames
   (a head script adds .is-review). Never visible on vaultsomm.com, even if merged. */
.review-flag { display: none; }
html.is-review .review-flag {
  display: block; margin: 18px 0 0; padding: 8px 12px; max-width: 72ch;
  border-left: 3px solid var(--color-error); background: rgba(181,51,30,.10);
  font-size: .82rem; line-height: 1.5; color: var(--color-text); text-align: left;
}
html.is-review .review-flag a { color: var(--color-gold-light); }

/* ─── Audience pages ─────────────────────────────────────────────────────── */
.pro-card__line { font-size: .88rem; color: var(--color-text-muted); line-height: 1.45; }
.audience-reading { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.audience-reading a { color: var(--h-gold); text-decoration: none; font-size: .92rem; }
.audience-reading a:hover { color: var(--h-gilt); }
.simple-steps__text a { color: var(--h-gold); }

/* Five footer columns: let them wrap and let long links break instead of overflowing */
.footer__nav { flex-wrap: wrap; row-gap: var(--space-8); }
.footer__link { white-space: normal; }
/* Long CTA labels on the audience pages wrap on phones */
@media (max-width: 640px) {
  .teaser__actions .btn { max-width: 100%; white-space: normal; text-align: center; justify-content: center; }
}

/* ─── Typography: upright headings, one seal per page (docs/design-principles.md) ─ */
.home .hero__heading .seal { display: block; color: #e8c87a; font-style: normal; }
.home .seal { color: var(--h-gilt); font-style: normal; }
.home .section-title em, .home .cta-section__heading em, .teaser__line em, .proof__quote em { font-style: normal; color: inherit; }
.proof__quote { font-style: normal; }
.teaser__aside { margin: 22px 0 0; max-width: 62ch; font-size: .92rem; color: var(--color-text-muted); }
.teaser__aside a { color: var(--h-gold); text-decoration: none; border-bottom: 1px solid var(--h-gold-35); white-space: nowrap; }
.teaser__aside a:hover { color: var(--h-gilt); }

/* ─── Hero headline: two lines of equal weight, ivory over gold ──────────────
   Each clause is its own line and sized to fit the measure, so the pair reads
   as a balanced couplet instead of four ragged lines. */
.home .hero__content { max-width: 1180px; }
.home .hero__heading { font-size: clamp(2.5rem, 1rem + 5.2vw, 6.6rem); line-height: 1.04; letter-spacing: -.015em; }
.home .hero__heading .hero__line,
.home .hero__heading .seal { display: block; text-wrap: balance; }
@media (min-width: 900px) {
  .home .hero__heading .hero__line,
  .home .hero__heading .seal { white-space: nowrap; }
}
/* Phones: keep the headline dominant; each clause breaks evenly over two lines */
@media (max-width: 640px) {
  .home .hero__heading { font-size: clamp(2.9rem, 13vw, 3.9rem); line-height: 1.02; }
}
/* Page headlines elsewhere: the gold clause starts its own line; all titles balance their line lengths */
.home .section-title { text-wrap: balance; }
.home h1.section-title .seal { display: block; }
.home h1.section-title { max-width: 30ch; }
/* Professional cards: balanced headings, two-by-two until there is room for four */
.pro-card__who { text-wrap: balance; }
@media (min-width: 641px) and (max-width: 1180px) {
  .pro-cards { grid-template-columns: 1fr 1fr; }
  .pro-card { border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
  .pro-card:nth-child(2n) { border-right: 0; }
  .pro-card:nth-child(n+3) { border-bottom: 0; }
}

/* ─── Footer: one grid, one top line ─────────────────────────────────────────
   Brand column + four equal link columns on desktop; brand above a 2×2 grid
   on tablets; two columns, then one, on phones. Column titles and the
   wordmark share a top edge, and long links wrap inside their column. */
.home .footer__inner { grid-template-columns: minmax(200px, 240px) 1fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.home .footer__brand { gap: 14px; }
.home .footer__brand .nav__logo { margin-top: -6px; }
.home .footer__tagline { max-width: 24ch; margin: 0; }
.home .footer__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); }
.home .footer__col { min-width: 0; gap: 14px; }
.home .footer__col-title { margin: 0; line-height: 1.2; }
.home .footer__col ul { gap: 10px; }
.home .footer__link { white-space: normal; line-height: 1.4; }
.home .footer__bottom .footer__legal { max-width: 90ch; }
@media (max-width: 1100px) {
  .home .footer__inner { grid-template-columns: 1fr; }
  .home .footer__brand { flex-direction: row; align-items: center; gap: 20px; }
  .home .footer__brand .nav__logo { margin-top: 0; }
  .home .footer__tagline { max-width: none; }
  .home .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .home .footer__brand { flex-direction: column; align-items: flex-start; gap: 10px; }
  .home .footer__nav { grid-template-columns: 1fr; }
}
/* Desktop: columns size to their links and spread across the row; only the legal link wraps */
@media (min-width: 1101px) {
  .home .footer__inner { grid-template-columns: 200px 1fr; }
  .home .footer__nav { grid-template-columns: repeat(4, max-content); justify-content: space-between; }
  .home .footer__link { white-space: nowrap; }
  .home .footer__col:last-child .footer__link { white-space: normal; max-width: 21ch; }
}
/* Phones: the email field keeps its natural height; the button label centres */
@media (max-width: 640px) {
  .footer-signup__input { flex: 0 0 auto; width: 100%; }
  .footer-signup__form .btn { justify-content: center; text-align: center; }
}

/* ─── Inside VaultSomm: the tour below the three plates ──────────────────── */
.home .showcase__caption strong { color: var(--color-text); font-weight: 500; }
.tour { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(28px, 4vw, 64px); margin-top: clamp(40px, 5vw, 64px); }
.tour__item { margin: 0; }
.tour__aside { margin: 40px 0 0; padding-left: 16px; border-left: 1px solid var(--h-gold-35); max-width: 62ch; font-size: .92rem; color: var(--color-text-muted); }
@media (max-width: 800px) { .tour { grid-template-columns: 1fr; gap: 32px; } }
/* Audience pages: a four-step sequence */
.simple-steps--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .simple-steps--four { grid-template-columns: 1fr 1fr; } .simple-steps--four li:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 900px) { .simple-steps--four { grid-template-columns: 1fr; } }
/* Professional pages: the second table column is text, not a price */
.reports-table td.reports-table__who:last-child { text-align: left; }

/* ─── Adopted from the design mock-up (claude/mockup-design-36e29z): split hero, measured type scale, Poppins body ─ */
/* 3 · Poppins as the second voice */
:root, [data-theme="light"], [data-theme="dark"] { --font-body: 'Poppins', 'Helvetica Neue', sans-serif; }
body { font-family: var(--font-body); font-weight: 300; }
.btn, .nav__link, .section-eyebrow, .footer__col-title, .footer__link, .pro-card__go, .teaser__link, .footer-signup__input { font-family: var(--font-body); }
.btn { font-weight: 500; letter-spacing: .16em; }
.section-eyebrow, .pro-card__go, .teaser__link { font-weight: 500; }
strong { font-weight: 500; }

/* 2 · Type scale: headline down a step, lede up, body warmer and larger */
.home .hero__heading { font-size: clamp(2.6rem, 0.6rem + 3.6vw, 4.3rem); line-height: 1.06; letter-spacing: -.01em; margin-bottom: 26px; }
.home .hero__subheading {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(1.25rem, 1rem + .7vw, 1.55rem); line-height: 1.4;
  color: color-mix(in oklch, var(--color-text) 82%, transparent); max-width: 40ch; margin-bottom: 36px;
}
.home .hero__disclaimer { font-size: .78rem; letter-spacing: .04em; color: var(--color-text-muted); }
.home .section-title { font-size: clamp(1.9rem, 1rem + 2.4vw, 3.3rem); line-height: 1.08; max-width: 22ch; }
.home .section-subtitle, .home .feature-card__text, .home .simple-steps__text, .home .showcase__caption, .proof__lines li, .tour__aside, .teaser__aside {
  font-size: 1.02rem; line-height: 1.6; color: color-mix(in oklch, var(--color-text) 78%, transparent);
}
.home .section-subtitle { margin-top: 20px; }
.home .feature-card__title, .home .simple-steps__title { font-size: 1.45rem; }
.home .proof__quote { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem); }
.home .teaser__line { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.4rem); }
.home .section { padding-block: clamp(80px, 11vh, 140px); }

/* 1 · Split hero: type on solid ground to the left, the photograph at full richness to the right */
.home .hero { min-height: min(86svh, 860px); align-items: center; padding-top: 0; padding-bottom: 0; background: var(--color-bg); }
.home .hero__image-wrap { left: 50%; right: 0; width: 50%; inset-inline: auto 0; }
.home .hero__scene { transform-origin: 70% 45%; }
.home .hero__overlay, [data-theme="light"] .home .hero__overlay {
  background:
    linear-gradient(to right, var(--color-bg) 0%, color-mix(in oklch, var(--color-bg) 70%, transparent) 18%, transparent 42%),
    linear-gradient(to bottom, color-mix(in oklch, var(--color-bg) 35%, transparent) 0%, transparent 30%, transparent 75%, var(--color-bg) 100%);
}
.home .hero__content { padding-block: 96px; }
/* the hero's type takes the page's own colours now that it sits on solid ground */
.home .hero__heading, .home .hero__subheading, .home main .hero .btn--outline { color: var(--color-text); }
.home .hero__eyebrow { color: var(--color-gold); }
.home .hero__heading, .home .hero__subheading, .home .hero__actions, .home .hero__disclaimer { max-width: 54%; }
.home .hero__heading .hero__line, .home .hero__heading .seal { white-space: normal; }
.home .hero__heading .seal { color: var(--color-gold); }
[data-theme="dark"] .home .hero__heading .seal { color: #e8c87a; }
@media (max-width: 900px) {
  .home .hero { min-height: auto; }
  .home .hero__image-wrap { left: 0; width: 100%; inset-inline: 0; height: 58vw; min-height: 260px; top: 0; bottom: auto; }
  .home .hero__overlay, [data-theme="light"] .home .hero__overlay {
    background: linear-gradient(to bottom, transparent 0%, transparent 55%, var(--color-bg) 100%);
  }
  .home .hero__content { padding-top: calc(58vw + 4px); padding-bottom: 56px; }
  .home .hero__heading, .home .hero__subheading, .home .hero__actions, .home .hero__disclaimer { max-width: none; }
}

/* Larger cellars: the bands above Connoisseur, one hairline row each. */
.bands { margin-top: 40px; border-top: 1px solid var(--h-gold-35); }
.bands__title { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; margin: 22px 0 4px; color: var(--color-text); }
.bands__lede { margin: 0 0 8px; font-size: .92rem; color: var(--color-text-muted); }
.bands__list { list-style: none; margin: 0; padding: 0; }
.bands__row { display: grid; grid-template-columns: 8rem 1fr auto; gap: 8px 20px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.bands__name { font-family: var(--font-display); font-size: 1.1rem; color: var(--color-text); }
.bands__desc { font-size: .9rem; color: var(--color-text-muted); }
.bands__price { font-family: var(--font-display); font-size: 1.1rem; color: var(--h-gold); white-space: nowrap; }
.bands__price small { font-family: var(--font-body); font-size: .78rem; color: var(--color-text-muted); }
.bands__note { margin: 12px 0 0; font-size: .88rem; color: var(--color-text-muted); }
.bands__note a { color: var(--h-gold); }
@media (max-width: 560px) {
  .bands__row { grid-template-columns: 1fr auto; }
  .bands__desc { grid-column: 1 / -1; }
}
.reports-table__price { font-family: var(--font-display); font-size: 1.15rem; color: var(--h-gold); white-space: nowrap; }
.reports-table__price .reports-table__note { white-space: normal; text-align: right; }

/* Hero secondary button (2026-09-27): style.css paints .hero .btn--outline in
   near-white with !important for the old dark hero. The home hero is light, so
   the button was faint until hovered. Gold ink and border at rest. */
.home .hero .btn--outline {
  color: var(--color-gold-dim) !important;
  border-color: var(--color-gold) !important;
  background: var(--color-gold-bg);
}
.home .hero .btn--outline:hover,
.home .hero .btn--outline:focus-visible {
  color: var(--color-text) !important;
  border-color: var(--color-gold-dim) !important;
  background: var(--color-gold-bg-2);
}
[data-theme="dark"] .home .hero .btn--outline { color: #e8c87a !important; border-color: #c9a84c !important; }
[data-theme="dark"] .home .hero .btn--outline:hover,
[data-theme="dark"] .home .hero .btn--outline:focus-visible { color: #f3e3b3 !important; border-color: #e8c87a !important; }