/* Version A of the home page (index-a.html, 2026-10-22): a short title above each document, "Your sales email" etc.,
   saying it is something the customer already has and sends us. No pills and no label on the videos. The title sits
   just above the document's top edge, aligned with its left side, and turns with it. Everything else is as index.html. */
.otag { position: absolute; z-index: 3; left: 4px; bottom: calc(100% + 10px); white-space: nowrap; pointer-events: none;
  font: 700 15px/1.2 var(--font); letter-spacing: -.01em; color: var(--ink); }
/* a card that the next one is covering hides its title, so it never peeks out above the stack */
.otag { opacity: clamp(0, calc(1 - var(--q, 0) * 4), 1); }
@media (max-width: 900px) { .otag { font-size: 13px; bottom: calc(100% + 7px); } }
/* the free offer's rule under Prices (2026-10-29) */
.prices .free-rule { max-width: 760px; margin: 14px 0 26px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.prices .free-rule b { color: var(--ink); }
/* the right column of Prices: Christmas card (only until 31 Dec 2026, remove .xmas and .gift-on in January 2027), Always Current */
.price-side { display: grid; gap: clamp(20px, 2vw, 28px); min-width: 0; }
.xmas { position: relative; overflow: hidden; padding: clamp(26px, 3vw, 38px); border-radius: 22px; color: #fff;
  background: linear-gradient(150deg, #b3202a 0%, #8e1620 100%); box-shadow: 0 30px 60px -30px rgba(142,22,32,.7); }
.xmas-ribbon { position: absolute; top: 0; right: 0; width: 150px; height: 150px; pointer-events: none; }
.xmas-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 11px; border-radius: 99px;
  background: #fff; color: #8e1620; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.xmas-pill svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.xmas h3 { position: relative; margin: 16px 0 0; padding-right: 24px; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
.xmas-body { position: relative; margin: 14px 0 0; color: #fff; font-size: 17px; line-height: 1.45; }
.xmas-fine { position: relative; margin: 12px 0 0; color: #fff; font-size: 13px; line-height: 1.4; }
.xmas .nb { white-space: nowrap; }
/* desktop, card showing: the card's top lines up with the "Prices" heading. The last row takes any extra height, so a tall right column adds no gaps on the left */
@media (min-width: 901px) {
  .prices.gift-on { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(20px, 4vw, 50px); }
  .prices.gift-on > h2, .prices.gift-on > .free-rule { grid-column: 1; }
  .prices.gift-on .price-cols { display: contents; }
  .prices.gift-on dl { grid-column: 1; grid-row: 3; margin-top: 2px; }
  .prices.gift-on .price-side { grid-column: 2; grid-row: 1 / -1; align-self: start; }
}