/* The Welm difference: four cards that stack as you scroll (owner, 10-18, after a customer found the old scroll-driven
   card highlighting choppy: "individual cards that stack on each other as you scroll, like Hevvy"; then refinements:
   fill the empty left side, tighter more premium cards, more visual, less text; then depth as the cards stack, less
   empty space in the cards, a bolder left side).
   The stack is pure layout: each card is position: sticky a step lower than the one before, so the next slides up over
   it and the edge of every card above stays visible. Where the browser has scroll-driven animations, covered cards also
   shrink and dim a little, run by the browser off the main thread; difference.js only measures where that happens (on
   load and resize, never on scroll) and lights the 01–04 index. Elsewhere the stack is the same, without the depth.
   Desktop: the left column (heading, index with its progress line, button) stays put. */
.welm-difference { --difference-background: #f3ebdf; --ink: #47181c; --muted: #765b54; --gold: #a57c50; --stack-top: 88px; --stack-step: 16px; --stack-hold: 48px; padding: 56px 20px 64px; background: var(--difference-background); color: var(--ink); scroll-margin-top: 88px; }

/* The left column (on phones: the heading above the cards). */
.difference-aside { text-align: center; margin: 0 auto 28px; }
.difference-eyebrow { margin: 0 0 12px; color: var(--gold); font: 500 11px/1.4 Jost,sans-serif; letter-spacing: 2.4px; text-transform: uppercase; }
.difference-aside h2 { margin: 0 0 12px; color: var(--ink); font: 500 clamp(40px,4.8vw,72px)/1.02 'Welm Display',Georgia,serif; letter-spacing: -1px; }
.difference-intro { margin: 0; color: var(--muted); font: 400 17px/1.5 Jost,sans-serif; text-wrap: balance; }
.difference-intro span { display: inline-block; }
.difference-index { display: none; }
.difference-cta { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 28px; border-radius: 999px; background: var(--ink); color: #fff8ee; font: 500 15px/1 Jost,sans-serif; text-decoration: none; }
.difference-cta span { font-size: 18px; }
.difference-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.difference-cta--aside { display: none; }
.difference-cta--end { display: flex; justify-content: center; width: 100%; margin-top: 4px; }

/* The cards: all the height of the tallest (so none peeks out under the next), each a shade deeper down the stack,
   ending on Welm wine. The icon sits at the top and the words at the bottom, so any spare height falls between them.
   The empty last row holds the finished stack in place for a moment before it scrolls away. */
.difference-content { max-width: 680px; margin: 0 auto; }
.difference-cards { display: grid; grid-template-rows: repeat(4, 1fr) var(--stack-hold); gap: 18px; }
.difference-cards::after { content: ''; }
.difference-card { display: flex; flex-direction: column; position: sticky; top: calc(var(--stack-top) + var(--i) * var(--stack-step)); padding: 20px 22px; border: 1px solid rgba(71,24,28,.14); border-radius: 20px; background: var(--card); color: var(--ink); box-shadow: 0 -16px 34px -24px rgba(71,24,28,.55), inset 0 1px 0 rgba(255,255,255,.55); scroll-margin-top: 96px; }
.difference-card:nth-child(1) { --i: 0; --card: #fbf5ec; --depth-scale: .895; --depth-dim: .14; }
.difference-card:nth-child(2) { --i: 1; --card: #f1e6d7; --depth-scale: .93; --depth-dim: .1; }
.difference-card:nth-child(3) { --i: 2; --card: #e8d8c4; --depth-scale: .965; --depth-dim: .06; }
.difference-card:nth-child(4) { --i: 3; --card: #47181c; color: #fff8ee; border-color: #47181c; box-shadow: 0 -16px 34px -24px rgba(71,24,28,.7), inset 0 1px 0 rgba(255,255,255,.08); }
.difference-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.difference-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(165,124,80,.14); color: var(--ink); }
.difference-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.difference-number { color: var(--gold); font: 500 12px/1.3 Jost,sans-serif; letter-spacing: 1.2px; font-variant-numeric: tabular-nums; }
.difference-card h3 { margin: auto 0 8px; color: inherit; font: 500 clamp(27px,2.6vw,38px)/1.08 'Welm Display',Georgia,serif; letter-spacing: -.5px; text-wrap: balance; }
.difference-body { margin: 0 0 16px; max-width: 52ch; color: var(--muted); font: 400 15.5px/1.5 Jost,sans-serif; }
.difference-expect { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; padding-top: 12px; border-top: 1px solid rgba(71,24,28,.16); color: var(--ink); font: 500 15px/1.4 Jost,sans-serif; }
.difference-expect span { color: var(--gold); font: 500 10px/1.4 Jost,sans-serif; letter-spacing: 1.2px; text-transform: uppercase; }
.difference-card:nth-child(4) .difference-icon { background: rgba(219,192,160,.16); color: #f2dcc4; }
.difference-card:nth-child(4) .difference-body { color: #e6d2c4; }
.difference-card:nth-child(4) .difference-number,.difference-card:nth-child(4) .difference-expect span { color: #dbc0a0; }
.difference-card:nth-child(4) .difference-expect { color: #fff8ee; border-color: rgba(255,248,238,.18); }
.difference-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Depth: as later cards cover it, a card shrinks toward its top edge and a wine veil deepens over it. The browser runs
   it from the page's scroll position, between the points difference.js measured (--depth-from/--depth-to). */
@keyframes difference-depth { to { transform: scale(var(--depth-scale)); } }
@keyframes difference-veil { to { opacity: var(--depth-dim); } }
@keyframes difference-fill { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .welm-difference.has-depth .difference-card:not(:last-child) { transform-origin: 50% 0; animation: difference-depth linear both; animation-timeline: scroll(root); animation-range: var(--depth-from) var(--depth-to); }
    .welm-difference.has-depth .difference-card:not(:last-child)::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: #47181c; opacity: 0; pointer-events: none; animation: difference-veil linear both; animation-timeline: scroll(root); animation-range: var(--depth-from) var(--depth-to); }
  }
}

/* Desktop: the Hevvy layout. The left column stays put; its index lights the card that has just landed, and the line
   beside it fills as the cards land. */
@media(min-width:1024px) {
  .welm-difference { --stack-top: 120px; --stack-step: 22px; --stack-hold: 120px; display: grid; grid-template-columns: minmax(340px,.9fr) minmax(0,1.1fr); column-gap: clamp(56px,7vw,112px); align-items: start; padding: 104px max(48px, calc((100vw - 1240px) / 2)) 32px; }
  .difference-aside { position: sticky; top: 120px; margin: 0; text-align: left; }
  .difference-eyebrow { margin-bottom: 18px; }
  .difference-aside h2 { margin-bottom: 18px; }
  .difference-intro { font-size: 19px; }
  .difference-index { position: relative; display: grid; gap: 6px; margin: 44px 0 40px; padding: 0 0 0 26px; list-style: none; }
  .difference-index::before,.difference-index::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; border-radius: 2px; background: rgba(71,24,28,.12); }
  .difference-index::after { background: var(--ink); transform-origin: 50% 0; transform: scaleY(.25); }
  .difference-index:has(li:nth-child(2) a[aria-current])::after { transform: scaleY(.5); }
  .difference-index:has(li:nth-child(3) a[aria-current])::after { transform: scaleY(.75); }
  .difference-index:has(li:nth-child(4) a[aria-current])::after { transform: scaleY(1); }
  .difference-index a { display: flex; gap: 18px; align-items: baseline; padding: 12px 0; color: var(--muted); font: 400 21px/1.3 'Welm Display',Georgia,serif; text-decoration: none; }
  .difference-index a span { color: #b9a08a; font: 500 12px/1 Jost,sans-serif; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
  .difference-index a:hover { color: var(--ink); }
  .difference-index a[aria-current] { color: var(--ink); }
  .difference-index a[aria-current] span { color: var(--gold); }
  .difference-cta--aside { display: inline-flex; }
  .difference-cta--end { display: none; }
  .difference-content { max-width: none; margin: 0; }
  .difference-cards { gap: 26px; }
  .difference-card { padding: 28px 32px 26px; border-radius: 24px; }
  .difference-card-top { margin-bottom: 24px; }
  .difference-icon { width: 52px; height: 52px; border-radius: 15px; }
  .difference-icon svg { width: 26px; height: 26px; }
  .difference-body { font-size: 16.5px; margin-bottom: 18px; }
  .difference-expect { padding-top: 14px; font-size: 16px; }
}
@supports (animation-timeline: scroll()) {
  @media (min-width:1024px) and (prefers-reduced-motion: no-preference) {
    .welm-difference.has-depth .difference-index::after { animation: difference-fill linear both; animation-timeline: scroll(root); animation-range: var(--fill-from) var(--fill-to); }
  }
}
@media(max-width:800px) {
  .welm-difference { --stack-top: 84px; --stack-step: 14px; padding: 44px 20px 52px; }
  .difference-aside h2 { font-size: clamp(38px,10vw,46px); }
  .difference-intro { font-size: 15.5px; }
  .difference-card { padding: 18px 20px; border-radius: 18px; }
  .difference-card-top { margin-bottom: 14px; }
  .difference-icon { width: 40px; height: 40px; border-radius: 12px; }
  .difference-icon svg { width: 20px; height: 20px; }
  .difference-card h3 { font-size: 27px; }
  .difference-body { font-size: 15px; margin-bottom: 14px; }
  .difference-expect { font-size: 14.5px; }
}
@media print {
  .welm-difference { display: block; padding: 24px 0; }
  .difference-aside { position: static; }
  .difference-index,.difference-cta { display: none !important; }
  .difference-cards { display: block; }
  .difference-card,.difference-card:nth-child(4) { position: static; transform: none !important; background: white; color: #47181c; box-shadow: none; break-inside: avoid; margin-bottom: 12px; }
  .difference-card::after { display: none; }
  .difference-card:nth-child(4) .difference-body,.difference-card:nth-child(4) .difference-expect,.difference-card:nth-child(4) .difference-expect span,.difference-card:nth-child(4) .difference-number { color: #47181c; }
}