/* THE FESTIVE LAYER (Tom, 20 Oct 2026) — FOR APPROVAL, NOT FINAL.
 *
 * A deep Christmas green beside the maroon and orange, and a few seasonal
 * line drawings in the logo's flat, single-weight style: a garland, holly,
 * snowflakes, ornaments, a star cookie. Everything here is scoped to
 * `.sp-festive` (on the page's body when the series has `sections.festive`,
 * and `?festive=0` / `?festive=1` previews either way), so turning it off
 * is one setting and nothing else moves.
 *
 * THE RULES IT KEEPS:
 *   - NO LAYOUT, COPY OR PRICE CHANGES. Every drawing is a background or an
 *     absolutely placed pseudo-element in padding that was already empty;
 *     nothing here has a width, a margin or a padding that moves text.
 *   - NOTHING INTERACTIVE IS COVERED: every drawing is `pointer-events:
 *     none`, and none sits over a control.
 *   - EVERY TEXT COLOUR IS UNCHANGED, so the contrast measured for Tom
 *     (who is colourblind) still holds. Snowflakes on the maroon bands are
 *     8% white; text over them is unchanged white on maroon.
 *   - STILL for anybody who asked for less motion — none of it moves anyway.
 */
.sp-festive {
  --sp-green: #1f5135;
  --sp-berry: #b3202f;
  --sp-garland: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='18' viewBox='0 0 120 18'%3E%3Cpath d='M0 3 Q30 15 60 3 T120 3' fill='none' stroke='%231f5135' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M14 8l-5-3M14 8l-2 5M46 8l5-3M46 8l2 5M74 8l-5-3M74 8l-2 5M106 8l5-3M106 8l2 5' stroke='%231f5135' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='30' cy='11' r='3' fill='%23b3202f'/%3E%3Ccircle cx='90' cy='11' r='3.2' fill='%23c98a2e'/%3E%3Cpath d='M90 6.5v1.5' stroke='%231f5135' stroke-width='1.5'/%3E%3C/svg%3E");
  --sp-holly: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='20' viewBox='0 0 64 20'%3E%3Cpath d='M30 10c-6-7-14-8-24-5 4 2 3 5 0 7 9 2 17 1 24-2zM34 10c6-7 14-8 24-5-4 2-3 5 0 7-9 2-17 1-24-2z' fill='%231f5135'/%3E%3Ccircle cx='29' cy='13' r='3' fill='%23b3202f'/%3E%3Ccircle cx='35' cy='13' r='3' fill='%23b3202f'/%3E%3Ccircle cx='32' cy='8.5' r='3' fill='%23b3202f'/%3E%3C/svg%3E");
  --sp-snow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M30 14v32M16 22l28 16M16 38l28-16M30 14l-4 4M30 14l4 4M30 46l-4-4M30 46l4-4'/%3E%3Cpath d='M104 86v28M92 93l24 14M92 107l24-14'/%3E%3Ccircle cx='108' cy='30' r='3'/%3E%3Ccircle cx='40' cy='104' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  --sp-snow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%231f5135' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M30 8v44M11 19l38 22M11 41l38-22M30 8l-5 5M30 8l5 5M30 52l-5-5M30 52l5-5M11 19l7 1M11 41l7-1M49 19l-7 1M49 41l-7-1'/%3E%3C/g%3E%3C/svg%3E");
  --sp-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='64' viewBox='0 0 48 64'%3E%3Cpath d='M24 0v12' stroke='%23c98a2e' stroke-width='1.8'/%3E%3Crect x='18' y='12' width='12' height='7' rx='1.5' fill='%23c98a2e'/%3E%3Ccircle cx='24' cy='39' r='19' fill='none' stroke='%231f5135' stroke-width='2.4'/%3E%3Cpath d='M7 34q17 8 34 0M7 44q17 8 34 0' fill='none' stroke='%23b3202f' stroke-width='2'/%3E%3C/svg%3E");
  --sp-starcookie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4l7 15 16 2-12 11 3 16-14-8-14 8 3-16L5 21l16-2z' fill='none' stroke='%23c98a2e' stroke-width='2.4' stroke-linejoin='round'/%3E%3Ccircle cx='28' cy='29' r='4' fill='%23b3202f'/%3E%3C/svg%3E");
}

/* ---- the garland: draped under the menu row at the top of the page, and
   along the top of the footer. Under the menu ONLY while the header is not
   locked, so it never hangs over the page while somebody scrolls. */
.sp-festive .sp-stick:not(.is-locked) + .sp-jumps::after,
.sp-festive .sp-brandfoot::before {
  content: ""; position: absolute; left: 0; right: 0; height: 18px;
  background: var(--sp-garland) repeat-x left center / 120px 18px;
  pointer-events: none; z-index: 2;
}
.sp-festive .sp-stick:not(.is-locked) + .sp-jumps::after { bottom: -11px; }
.sp-festive .sp-brandfoot { position: relative; }
.sp-festive .sp-brandfoot::before { top: -9px; }

/* ---- a holly sprig under each section headline, in the gap that is
   already there; absolutely placed, so the headline does not move. */
.sp-festive .sp-sec > .sp-wrap > h2,
.sp-festive #overview .sp-ov-text > h2 { position: relative; }
.sp-festive .sp-sec > .sp-wrap > h2::after {
  content: ""; position: absolute; left: 50%; bottom: -16px;
  width: 64px; height: 20px; margin-left: -32px;
  background: var(--sp-holly) no-repeat center / contain;
  pointer-events: none;
}
.sp-festive #overview .sp-ov-text > h2::after {
  content: ""; position: absolute; left: 0; bottom: -16px;
  width: 64px; height: 20px;
  background: var(--sp-holly) no-repeat center / contain;
  pointer-events: none;
}
@media (max-width: 899px) {
  .sp-festive #overview .sp-ov-text > h2::after { left: 50%;
    margin-left: -32px; }
}

/* ---- snowflakes, faint, on the four maroon bands ------------------------ */
.sp-festive .sp-strip--early,
.sp-festive .sp-join,
.sp-festive .sp-give,
.sp-festive .sp-final {
  background-image: var(--sp-snow-white);
  background-size: 140px 140px;
}

/* ---- a doodle in the empty corner of the cream sections. In the section's
   top padding, outside the content column; smaller on a phone. */
.sp-festive #how::before,
.sp-festive #pricing::before,
.sp-festive #reviews::before,
.sp-festive #faq::before,
.sp-festive #about::before {
  content: ""; position: absolute; top: 22px; width: 56px; height: 64px;
  pointer-events: none; opacity: .55;
  background: no-repeat center / contain;
}
.sp-festive #how::before { left: 4%; background-image: var(--sp-ornament); }
.sp-festive #pricing::before { right: 4%; background-image: var(--sp-snow); }
.sp-festive #reviews::before { left: 4%;
  background-image: var(--sp-starcookie); }
.sp-festive #faq::before { right: 4%; background-image: var(--sp-ornament); }
.sp-festive #about::before { left: 4%; background-image: var(--sp-snow); }
@media (max-width: 719px) {
  .sp-festive #how::before, .sp-festive #pricing::before,
  .sp-festive #reviews::before, .sp-festive #faq::before,
  .sp-festive #about::before { top: 10px; width: 34px; height: 40px;
    opacity: .5; }
}

/* ---- the green as an accent: a thin pine edge on the countdown tiles and
   the How It Works cards, drawn as an inset shadow so nothing resizes. */
.sp-festive .sp-tile { box-shadow: inset 0 3px 0 var(--sp-green),
  var(--shadow-s); }
.sp-festive .sp-step { box-shadow: inset 0 4px 0 var(--sp-green),
  var(--shadow-s); }