COUNTDOWN TIMER SECTION RULES:
- Use a dark background section (var(--color-dark) or var(--color-danger)) to create urgency
- Include: urgency headline, subtext explaining the deadline, the countdown timer, and a CTA button
- Countdown timer HTML structure:
  <div class="countdown-timer">
    <div class="countdown-unit"><span class="countdown-number" id="cd-days">00</span><span class="countdown-label">Days</span></div>
    <div class="countdown-unit"><span class="countdown-number" id="cd-hours">00</span><span class="countdown-label">Hours</span></div>
    <div class="countdown-unit"><span class="countdown-number" id="cd-minutes">00</span><span class="countdown-label">Minutes</span></div>
    <div class="countdown-unit"><span class="countdown-number" id="cd-seconds">00</span><span class="countdown-label">Seconds</span></div>
  </div>
- EDITABLE DEADLINE: The deadline date MUST be set via a <span> with id="countdown-deadline" that contains an ISO date string, so the user can edit it in GrapesJS without touching JavaScript:
  <span id="countdown-deadline" style="display:none;">2025-12-31T23:59:59</span>
- JavaScript for countdown:
  (function() {
    const deadlineEl = document.getElementById('countdown-deadline');
    if (!deadlineEl) return;
    const deadline = new Date(deadlineEl.textContent.trim()).getTime();
    function update() {
      const now = Date.now();
      const diff = deadline - now;
      if (diff <= 0) {
        ['cd-days','cd-hours','cd-minutes','cd-seconds'].forEach(id => {
          const el = document.getElementById(id);
          if (el) el.textContent = '00';
        });
        return;
      }
      const d = Math.floor(diff / 86400000);
      const h = Math.floor((diff % 86400000) / 3600000);
      const m = Math.floor((diff % 3600000) / 60000);
      const s = Math.floor((diff % 60000) / 1000);
      const pad = n => String(n).padStart(2, '0');
      const days = document.getElementById('cd-days');
      const hours = document.getElementById('cd-hours');
      const mins = document.getElementById('cd-minutes');
      const secs = document.getElementById('cd-seconds');
      if (days) days.textContent = pad(d);
      if (hours) hours.textContent = pad(h);
      if (mins) mins.textContent = pad(m);
      if (secs) secs.textContent = pad(s);
    }
    update();
    setInterval(update, 1000);
  })();
- CSS: .countdown-timer { display: flex; gap: var(--space-lg); justify-content: center; }
- .countdown-unit { text-align: center; }
- .countdown-number { font-size: clamp(3rem, 8vw, 5rem); font-weight: 800; display: block; }
- .countdown-label { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.8; }
- On mobile: countdown-timer must use display:flex (not grid) so units stay in a row


MOBILE HORIZONTAL SPACING REMINDER: This section is subject to the MOBILE HORIZONTAL SPACING rule in non_negotiable_rules.md — on mobile (max-width:767px), no element you write for this section (outer wrapper, inner container, cards, headings, paragraphs, buttons, icons, anything) may have padding-left, padding-right, margin-left, or margin-right greater than 10px, and this section's outermost div must have at least 10px. Check this section's mobile CSS against that rule before finalizing.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
GRAPESJS MOBILE CHECKS — COUNTDOWN TIMER
[GRAPESJS BUILDER ONLY — page generator: ignore this section]
Run these checks after adding or modifying a countdown timer in GrapesJS.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

1. COUNTDOWN-TIMER stays as a FLEX ROW on mobile — the platform's nuclear mobile grid collapse sets grid-template-columns:1fr on ALL elements including countdown-timer, so it gets an override:
   editor.addStyle('@media (max-width:767px) { .countdown-timer { display: flex !important; flex-direction: row !important; gap: 0.75rem; justify-content: center; flex-wrap: nowrap; } }');

2. COUNTDOWN NUMBERS scale down on mobile (don't overflow narrow screens):
   editor.addStyle('@media (max-width:767px) { .countdown-number { font-size: clamp(2rem,8vw,3rem); } }');

3. COUNTDOWN LABELS readable at small size:
   editor.addStyle('@media (max-width:767px) { .countdown-label { font-size: 0.65rem; letter-spacing: 0.05em; } }');

4. COUNTDOWN UNIT doesn't overflow (4 units must fit on one line at 375px):
   editor.addStyle('@media (max-width:767px) { .countdown-unit { min-width: 0; flex: 1 1 0; } }');

5. SECTION WRAPPER 10px horizontal padding:
   editor.addStyle('@media (max-width:767px) { [id*="countdown"], [id*="urgency"] { padding-left: 10px; padding-right: 10px; } }');
