/* =============================================================
   HabitIt interactive plan-builder - shared widget styles
   -------------------------------------------------------------
   ONE source of truth for the homepage hero widget AND the blog-post
   embed. Host page provides the CSS custom properties (--bg, --bg2,
   --bg3, --text, --dim, --muted, --teal, --blue) on :root.

   Two variants on .plan-builder-root:
     [data-pb-variant="home"] - hero showcase (auto-cycling demo,
       form button always visible, calendar visible by default)
     [data-pb-variant="blog"] - blog embed (only the trigger button
       visible by default, expands inline with animation on click,
       no auto-cycling demo, no calendar before submit)
   ============================================================= */

/* Container reset so the widget doesn't pick up host-page styles */
.plan-builder-root,
.plan-builder-root *,
.plan-builder-root *::before,
.plan-builder-root *::after { box-sizing: border-box; }

/* Card - same chrome as before, just keyed off the new wrapper class */
.plan-builder-root .journey-demo{
  max-width:740px;margin:0 auto 40px;background:var(--bg2);
  border:1px solid rgba(0,206,201,.1);border-radius:20px;
  padding:28px 24px;position:relative;overflow:hidden;
}
.plan-builder-root .journey-demo::before{
  content:'';position:absolute;top:-50%;left:-50%;
  width:200%;height:200%;
  background:radial-gradient(circle at 30% 20%,rgba(0,206,201,.04),transparent 60%);
  pointer-events:none;
}

/* Optional showcase title above the card (homepage uses it) */
.plan-builder-root .showcase-title{
  font-size:20px;font-weight:800;letter-spacing:-.4px;
  color:var(--text);margin:0 0 14px;text-align:center;line-height:1.2;
}

/* ── Step 1 inputs (auto-cycling demo strip, only in home variant) ── */
.plan-builder-root .jd-inputs{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
  margin-bottom:16px;align-items:center;
}
.plan-builder-root .jd-field{
  background:var(--bg3);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;
  gap:2px;min-width:140px;transition:border-color .4s;
}
.plan-builder-root .jd-field.active{border-color:var(--teal)}
.plan-builder-root .jd-field .jf-label{
  font-size:13px;color:var(--muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;
}
.plan-builder-root .jd-field .jf-value{
  font-size:16px;font-weight:700;display:flex;align-items:center;gap:6px;
}
.plan-builder-root .jd-field .jf-value .jf-emoji{font-size:18px}
.plan-builder-root .jd-auto-tag{
  background:rgba(0,206,201,.12);color:var(--teal);font-size:11px;
  font-weight:700;padding:8px 16px;border-radius:50px;white-space:nowrap;
}
@keyframes pb-autoPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,206,201,.45)}
  50%{box-shadow:0 0 0 10px rgba(0,206,201,0)}
}

/* ── Calendar grid ── */
.plan-builder-root .jd-month{
  font-size:13px;font-weight:700;text-align:center;
  margin-bottom:8px;color:var(--dim);
}
.plan-builder-root .jd-cal{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:12px;
}
.plan-builder-root .jd-cal-header{
  font-size:10px;color:var(--muted);font-weight:600;
  text-align:center;padding:2px 0;
}
.plan-builder-root .jd-cal-cell{
  aspect-ratio:1;border-radius:8px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:rgba(255,255,255,.03);
  color:var(--muted);opacity:0;transform:scale(.6);
  transition:all .3s ease;position:relative;min-height:0;
}
.plan-builder-root .jd-cal-cell.show{opacity:1;transform:scale(1)}
.plan-builder-root .jd-cal-cell.filled{color:#fff}
.plan-builder-root .jd-cal-cell.empty{opacity:.3}
.plan-builder-root .jd-cal-cell .cell-date{
  font-size:10px;font-weight:600;opacity:.75;
  position:absolute;top:4px;right:5px;line-height:1;
}
.plan-builder-root .jd-cal-cell .cell-val{
  font-size:11px;font-weight:800;line-height:1;
}
.plan-builder-root .jd-cal-cell .cell-unit{
  font-size:7px;font-weight:600;opacity:.8;line-height:1;margin-top:1px;
}

/* Multi-month wrap: cap height + internal scroll for long plans */
.plan-builder-root .jd-cal-wrap{max-height:none;transition:max-height .3s ease}
.plan-builder-root .jd-cal-wrap.multi-month{
  max-height:460px;overflow-y:auto;padding-right:6px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;
}
.plan-builder-root .jd-cal-wrap.multi-month::-webkit-scrollbar{width:6px}
.plan-builder-root .jd-cal-wrap.multi-month::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.2);border-radius:3px;
}
.plan-builder-root .jd-cal-wrap.multi-month::-webkit-scrollbar-track{background:transparent}
.plan-builder-root .jd-cal-wrap .jd-month-block + .jd-month-block{
  margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06);
}

/* ── Taper bar graph ── */
.plan-builder-root .taper-bars{
  display:flex;align-items:flex-end;gap:2px;height:80px;
  margin-top:14px;padding:0 2px;flex-shrink:0;
}
.plan-builder-root .taper-bar{
  flex:1;border-radius:3px 3px 0 0;min-width:0;
  transition:height 1s cubic-bezier(.22,1,.36,1);
}

/* ── Summary line ── */
.plan-builder-root .jd-summary{
  display:flex;justify-content:space-between;
  font-size:12px;font-weight:600;padding:0 4px;
}
.plan-builder-root .jd-summary .jds-start{color:var(--pink,#FF7675)}
.plan-builder-root .jd-summary .jds-end{color:var(--teal)}
.plan-builder-root .jd-summary .jds-arrow{color:var(--dim)}

/* ── Customize trigger button (pulsing CTA with shimmer) ──
   Multi-layer glow: inner gradient surface, animated shimmer sweep,
   pulsing outer halo. Tuned so it looks aspirational, not desperate. */
.plan-builder-root .jd-customize{
  position:relative;display:inline-flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;
  width:auto;max-width:360px;margin:0 auto 14px;padding:13px 26px;
  border-radius:20px;border:none;color:#fff;cursor:pointer;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:linear-gradient(135deg,#00CEC9 0%,#00b3a8 45%,#00a395 100%);
  align-self:center;overflow:hidden;isolation:isolate;
  transition:transform .2s cubic-bezier(.16,1,.3,1),
             box-shadow .3s cubic-bezier(.16,1,.3,1),
             filter .2s ease;
  animation:pb-haloPulse 2.4s ease-in-out infinite;
  box-shadow:
    0 0 0 0 rgba(0,206,201,.55),
    0 10px 28px rgba(0,206,201,.42),
    0 0 60px rgba(0,206,201,.18),
    inset 0 1px 0 rgba(255,255,255,.18);
}
/* Animated shimmer sweep across the surface */
.plan-builder-root .jd-customize::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(120deg,
    transparent 30%,
    rgba(255,255,255,.28) 50%,
    transparent 70%);
  background-size:220% 100%;background-position:-100% 0;
  animation:pb-shimmer 3s ease-in-out infinite;
}
/* Soft outer aura - sits behind the button, blurred, color-shifting */
.plan-builder-root .jd-customize::after{
  content:'';position:absolute;left:-12%;right:-12%;top:-30%;bottom:-30%;
  z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse at center,
    rgba(0,206,201,.45),rgba(41,121,255,.18) 50%,transparent 75%);
  filter:blur(20px);opacity:.7;
  animation:pb-aura 4s ease-in-out infinite alternate;
}
.plan-builder-root .jd-customize:hover{
  transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:
    0 0 0 6px rgba(0,206,201,.16),
    0 16px 38px rgba(0,206,201,.55),
    0 0 80px rgba(0,206,201,.28),
    inset 0 1px 0 rgba(255,255,255,.22);
  animation:none;
}
.plan-builder-root .jd-customize:hover::after{opacity:1}
.plan-builder-root .jd-customize:active{transform:scale(.97) translateY(0)}
.plan-builder-root .jd-customize-icon{
  font-size:18px;line-height:1;
  animation:pb-tapNudge 1.6s ease-in-out infinite;
}
.plan-builder-root .jd-customize-main{
  font-size:15px;font-weight:800;letter-spacing:.1px;
  display:inline-flex;align-items:center;gap:8px;
  text-shadow:0 1px 2px rgba(0,80,76,.25);
}
.plan-builder-root .jd-customize-sub{
  font-size:11px;font-weight:600;opacity:.94;
  letter-spacing:.4px;text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,80,76,.2);
}
@keyframes pb-tapNudge{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(3px)}
}
@keyframes pb-shimmer{
  0%{background-position:-100% 0}
  60%,100%{background-position:200% 0}
}
@keyframes pb-haloPulse{
  0%,100%{
    box-shadow:
      0 0 0 0 rgba(0,206,201,.55),
      0 10px 28px rgba(0,206,201,.42),
      0 0 60px rgba(0,206,201,.18),
      inset 0 1px 0 rgba(255,255,255,.18);
  }
  50%{
    box-shadow:
      0 0 0 14px rgba(0,206,201,0),
      0 12px 32px rgba(0,206,201,.48),
      0 0 80px rgba(0,206,201,.24),
      inset 0 1px 0 rgba(255,255,255,.18);
  }
}
@keyframes pb-aura{
  from{opacity:.55;transform:scale(.96)}
  to  {opacity:.85;transform:scale(1.06)}
}

/* ── Form (replaces demo inputs in form mode) ── */
.plan-builder-root .jd-form{display:none;position:relative}
.plan-builder-root .jd-form.active{
  display:flex;flex-direction:column;gap:12px;margin-bottom:8px;
}

/* Step-by-step reveal */
.plan-builder-root .jdf-step{
  opacity:0;max-height:0;overflow:hidden;
  transition:opacity .35s ease,max-height .45s cubic-bezier(.22,1,.36,1),margin .3s ease;
  margin:0;pointer-events:none;
}
.plan-builder-root .jdf-step.visible{opacity:1;max-height:240px;pointer-events:auto}
.plan-builder-root .jd-form.active .jdf-step.visible + .jdf-step.visible{margin-top:0}

/* Early-exit back link */
.plan-builder-root .jdf-early-back{
  position:absolute;top:-4px;right:-4px;background:transparent;border:none;
  color:var(--dim);font-size:13px;font-weight:600;cursor:pointer;
  padding:6px 8px;border-radius:6px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  transition:color .2s,background .2s;z-index:2;
}
.plan-builder-root .jdf-early-back:hover{
  color:var(--text);background:rgba(255,255,255,.04);
}

.plan-builder-root .jdf-row{display:flex;flex-direction:column;gap:6px}
.plan-builder-root .jdf-label{
  font-size:13px;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;
}
.plan-builder-root .jdf-btns{display:flex;gap:6px;flex-wrap:wrap}
.plan-builder-root .jdf-btn{
  background:var(--bg3);border:1px solid rgba(255,255,255,.08);
  color:var(--text);border-radius:10px;padding:8px 10px;
  font-size:12px;font-weight:600;cursor:pointer;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  transition:all .2s;display:inline-flex;align-items:center;
  gap:5px;flex:1;justify-content:center;min-width:0;
}
.plan-builder-root .jdf-btn:hover{
  border-color:rgba(0,206,201,.3);background:rgba(0,206,201,.05);
}
.plan-builder-root .jdf-btn.selected{
  background:rgba(0,206,201,.15);border-color:var(--teal);color:var(--teal);
}
.plan-builder-root .jdf-input{
  background:var(--bg3);border:1px solid rgba(255,255,255,.08);
  color:var(--text);border-radius:10px;padding:8px 12px;
  font-size:13px;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  width:100%;transition:border-color .2s;
}
.plan-builder-root .jdf-input:focus{outline:none;border-color:var(--teal)}
.plan-builder-root .jdf-input::placeholder{color:var(--muted)}
.plan-builder-root .jdf-row-inline{display:flex;gap:8px;align-items:center}
.plan-builder-root .jdf-row-inline > .jdf-input{flex:1;min-width:0}

.plan-builder-root .jdf-step-amount{
  display:flex;align-items:center;gap:10px;padding:4px 0;
  font-size:14px;color:var(--text);font-weight:600;
}
.plan-builder-root .jdf-step-direction{font-weight:700;color:var(--teal)}
.plan-builder-root .jdf-step-unit{color:var(--dim);font-weight:500}
.plan-builder-root .jdf-arrow{
  color:var(--dim);font-size:14px;font-weight:700;flex-shrink:0;
}

/* Color palette */
.plan-builder-root .jdf-palette{
  display:flex;gap:12px;flex-wrap:wrap;padding:8px 4px;
}
.plan-builder-root .jdf-swatch{
  width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;
  padding:0;transition:transform .15s,box-shadow .2s;
}
.plan-builder-root .jdf-swatch:hover{transform:scale(1.12)}
.plan-builder-root .jdf-swatch.selected{
  box-shadow:0 0 0 2px var(--bg2),0 0 0 4px #fff;
}

/* Date trigger button */
.plan-builder-root .jdf-date-button{
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  background:var(--bg3);border:1.5px solid rgba(0,206,201,.3);
  border-radius:12px;color:var(--text);font-size:15px;font-weight:600;
  cursor:pointer;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  width:100%;transition:background .2s,border-color .2s,transform .15s;
  position:relative;
}
.plan-builder-root .jdf-date-button:hover{
  border-color:var(--teal);background:rgba(0,206,201,.06);transform:translateY(-1px);
}
.plan-builder-root .jdf-date-button:active{transform:scale(.99)}
.plan-builder-root .jdf-date-button.has-value{
  border-color:var(--teal);background:rgba(0,206,201,.10);color:var(--text);
}
.plan-builder-root .jdf-date-button .jdf-date-icon{font-size:18px;line-height:1}
/* Hidden native date input (kept only as value source) */
.plan-builder-root .jdf-enddate{
  position:absolute!important;opacity:0!important;left:0;top:0;
  width:1px;height:1px;pointer-events:none;
}

/* Date popover - mounted on body to escape form overflow:hidden */
.jdf-date-popover{
  position:absolute;background:var(--bg2);
  border:1px solid rgba(0,206,201,.25);border-radius:14px;padding:14px;
  z-index:1000;
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 80px rgba(0,206,201,.08);
  display:none;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}
.jdf-date-popover.open{display:block;animation:pb-popIn .2s ease-out}
@keyframes pb-popIn{
  from{opacity:0;transform:translateY(-6px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.jdf-date-popover-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.jdf-date-popover-title{
  font-size:14px;font-weight:800;color:var(--text);letter-spacing:-.2px;
}
.jdf-date-popover-nav{display:flex;gap:6px}
.jdf-date-popover-nav button{
  background:var(--bg3);border:1px solid rgba(255,255,255,.08);
  color:var(--text);width:28px;height:28px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;line-height:1;padding:0;
  font-family:inherit;transition:all .15s;
}
.jdf-date-popover-nav button:hover:not(:disabled){
  border-color:var(--teal);background:rgba(0,206,201,.08);color:var(--teal);
}
.jdf-date-popover-nav button:disabled{opacity:.3;cursor:not-allowed}
.jdf-date-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.jdf-date-day-header{
  font-size:9px;color:var(--muted);text-align:center;padding:4px 0 6px;
  font-weight:700;text-transform:uppercase;letter-spacing:.5px;
}
.jdf-date-day{
  background:transparent;border:none;color:var(--text);font-size:12px;
  font-weight:600;width:100%;aspect-ratio:1;border-radius:8px;cursor:pointer;
  transition:background .12s,color .12s;font-family:inherit;padding:0;
}
.jdf-date-day:not(.disabled):hover{background:rgba(0,206,201,.14);color:var(--teal)}
.jdf-date-day.disabled{opacity:.25;cursor:not-allowed;pointer-events:none}
.jdf-date-day.empty{cursor:default;pointer-events:none}
.jdf-date-day.today{color:var(--teal);font-weight:800;position:relative}
.jdf-date-day.today::after{
  content:'';position:absolute;left:50%;bottom:4px;width:3px;height:3px;
  border-radius:50%;background:var(--teal);transform:translateX(-50%);
}
.jdf-date-day.selected{background:var(--teal);color:#0A1628;font-weight:800}
.jdf-date-day.selected::after{display:none}
.jdf-date-day.selected:hover{background:var(--teal);color:#0A1628}

/* Form actions row */
.plan-builder-root .jdf-actions{display:flex;gap:8px;margin-top:4px}
.plan-builder-root .jdf-submit{
  flex:1;background:var(--teal);color:#0A1628;border:none;border-radius:10px;
  padding:11px 14px;font-size:14px;font-weight:800;cursor:pointer;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  transition:transform .15s,box-shadow .2s;
}
.plan-builder-root .jdf-submit:hover{
  transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,206,201,.35);
}
.plan-builder-root .jdf-submit:active{transform:scale(.97)}
.plan-builder-root .jdf-back{
  background:transparent;color:var(--dim);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:11px 14px;font-size:13px;font-weight:600;
  cursor:pointer;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  transition:color .2s,border-color .2s;
}
.plan-builder-root .jdf-back:hover{color:var(--text);border-color:rgba(255,255,255,.25)}

/* Demo inputs hidden when form is showing */
.plan-builder-root .jd-inputs.hidden{display:none}

/* ============================================================
   BLOG VARIANT - collapsed by default, expand inline on click
   ------------------------------------------------------------
   Animation goal: the card BLOOMS out from below the button with a
   subtle bounce, a one-shot glow flare, and rows cascading in with
   their own springy entrance. Feels like a magical reveal, not a
   height transition.

   Layered:
     1. Card scales .9 → overshoots 1.02 → settles 1.0 (cubic-bezier
        with overshoot, .65s)
     2. Card translateY(-10px) → 0 in the same timing
     3. Card opacity 0 → 1 in .4s ease-out
     4. Card max-height 0 → 2400px in .7s (slower so the inside
        doesn't get clipped during the scale bounce)
     5. Card border-color brightens then settles
     6. One-shot keyframe `pb-cardGlowIn` adds a flare-then-fade
        shadow during the .pb-staggering window
     7. Each form row uses transition with overshoot bezier - fades in,
        slides up 10px, slightly scales from .98 → 1, and the staggering
        delays orchestrate the cascade
   ============================================================ */

/* Container is just the button at rest - no card chrome */
.plan-builder-root[data-pb-variant="blog"]{
  background:transparent;border:none;padding:0;margin:28px auto 32px;
  max-width:740px;text-align:center;
}

/* Hide the card entirely on blog before expansion. The overshoot is
   baked into the .transform cubic-bezier (y2 of 1.45 = overshoot). */
.plan-builder-root[data-pb-variant="blog"] .journey-demo{
  max-height:0;opacity:0;
  padding-top:0;padding-bottom:0;margin:0 auto;
  border-color:transparent;overflow:hidden;
  transform:scale(.9) translateY(-10px);transform-origin:top center;
  pointer-events:none;
  transition:
    max-height .7s cubic-bezier(.19,1,.22,1),
    opacity .4s ease-out,
    transform .65s cubic-bezier(.34,1.45,.64,1),
    padding .55s cubic-bezier(.19,1,.22,1),
    margin .55s cubic-bezier(.19,1,.22,1),
    border-color .5s ease;
}

/* The trigger button lives in its own wrapper above the card so it
   stays visible while the card animates open below it. On expand the
   button shrinks + fades like it "transferred" its energy into the
   card growing below. */
.plan-builder-root[data-pb-variant="blog"] .pb-blog-trigger{
  display:block;margin:0 auto 18px;
  transition:
    opacity .35s ease,
    transform .4s cubic-bezier(.34,1.45,.64,1);
}
/* Bigger / more prominent button in blog mode */
.plan-builder-root[data-pb-variant="blog"] .pb-blog-trigger .jd-customize{
  max-width:440px;padding:15px 30px;border-radius:24px;margin:0 auto;
}
.plan-builder-root[data-pb-variant="blog"] .pb-blog-trigger .jd-customize-main{
  font-size:16px;
}
.plan-builder-root[data-pb-variant="blog"] .pb-blog-trigger .jd-customize-sub{
  font-size:11.5px;margin-top:3px;
}

/* Expanded state */
.plan-builder-root[data-pb-variant="blog"].pb-expanded .journey-demo{
  max-height:2400px;opacity:1;
  padding:28px 24px;margin:0 auto 24px;
  border-color:rgba(0,206,201,.22);
  transform:scale(1) translateY(0);
  pointer-events:auto;
}

/* One-shot glow flare while the card is opening. The .pb-staggering
   class is added by JS for ~1.1s on open, so the keyframe animation
   only runs once at entry. After it removes, the card's normal subtle
   shadow takes over (via the transition above). */
.plan-builder-root[data-pb-variant="blog"].pb-expanded.pb-staggering .journey-demo{
  animation:pb-cardGlowIn 1.05s cubic-bezier(.19,1,.22,1);
}
@keyframes pb-cardGlowIn{
  0%   { box-shadow:0 0 0 0 rgba(0,206,201,0),
                    0 0 0 0 rgba(0,206,201,0); }
  35%  { box-shadow:0 0 0 4px rgba(0,206,201,.18),
                    0 0 80px 12px rgba(0,206,201,.32); }
  70%  { box-shadow:0 0 0 2px rgba(0,206,201,.10),
                    0 0 60px 4px rgba(0,206,201,.18); }
  100% { box-shadow:0 0 0 0 rgba(0,206,201,0),
                    0 22px 60px rgba(0,0,0,.32); }
}
/* Settled-state shadow once the flare keyframe ends */
.plan-builder-root[data-pb-variant="blog"].pb-expanded .journey-demo{
  box-shadow:0 22px 60px rgba(0,0,0,.32),
             0 0 40px rgba(0,206,201,.06);
}

/* On expand, the trigger button does a quick "depart" upward */
.plan-builder-root[data-pb-variant="blog"].pb-expanded .pb-blog-trigger{
  opacity:0;transform:translateY(-10px) scale(.92);pointer-events:none;
}

/* ── Form-row springy entrance ──
   Each visible row fades + slides up + scales 0.98 → 1 with an
   overshoot bezier so it lands with a tiny "pop." Only runs the
   stagger cascade while .pb-staggering is active (the first ~1.1s
   after open). After that, rows that appear later during user input
   transition normally without delay. */
.plan-builder-root[data-pb-variant="blog"] .jdf-step.visible,
.plan-builder-root[data-pb-variant="blog"] .jdf-actions.jdf-step.visible{
  opacity:0;transform:translateY(10px) scale(.98);
  transition:
    opacity .5s ease-out,
    transform .55s cubic-bezier(.34,1.45,.64,1);
}
.plan-builder-root[data-pb-variant="blog"].pb-expanded .jdf-step.visible,
.plan-builder-root[data-pb-variant="blog"].pb-expanded .jdf-actions.jdf-step.visible{
  opacity:1;transform:translateY(0) scale(1);
}
/* Stagger delays - only active during the initial open burst */
.plan-builder-root[data-pb-variant="blog"].pb-staggering .jdf-step:nth-child(1){transition-delay:.22s}
.plan-builder-root[data-pb-variant="blog"].pb-staggering .jdf-step:nth-child(2){transition-delay:.30s}
.plan-builder-root[data-pb-variant="blog"].pb-staggering .jdf-step:nth-child(3){transition-delay:.38s}
.plan-builder-root[data-pb-variant="blog"].pb-staggering .jdf-step:nth-child(4){transition-delay:.46s}
.plan-builder-root[data-pb-variant="blog"].pb-staggering .jdf-step:nth-child(5){transition-delay:.54s}
.plan-builder-root[data-pb-variant="blog"].pb-staggering .jdf-step:nth-child(6){transition-delay:.60s}
.plan-builder-root[data-pb-variant="blog"].pb-staggering .jdf-step:nth-child(7){transition-delay:.66s}
.plan-builder-root[data-pb-variant="blog"].pb-staggering .jdf-actions{transition-delay:.72s}

/* Hide the demo cycle inputs entirely on blog variant */
.plan-builder-root[data-pb-variant="blog"] .jd-inputs{display:none!important}

/* Hide the Back button in blog variant - the close × at top-right
   serves the same purpose (collapse the card). The submit button is
   flex:1 so it expands to fill the row by itself. Home variant keeps
   the Back button because it has no close × (no collapsed state). */
.plan-builder-root[data-pb-variant="blog"] .pb-back{display:none}

/* ── Edit pill ──
   Small affordance at the top-left of the card, shown only after a
   plan has rendered (root has .pb-has-plan). Same UX on home + blog
   so the post-result view is consistent across all entry points.
   Click takes the user back to form mode with all values preserved. */
.plan-builder-root .pb-edit-btn{
  display:none;
  position:absolute;top:10px;left:10px;z-index:3;
  align-items:center;gap:5px;
  padding:6px 13px 6px 11px;
  background:rgba(0,206,201,.10);
  border:1px solid rgba(0,206,201,.28);
  border-radius:50px;color:var(--teal);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;cursor:pointer;
  transition:background .2s,border-color .2s,transform .15s,box-shadow .2s;
}
.plan-builder-root .pb-edit-btn .pb-edit-icon{font-size:12px;line-height:1}
.plan-builder-root .pb-edit-btn:hover{
  background:rgba(0,206,201,.18);
  border-color:var(--teal);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,206,201,.18);
}
.plan-builder-root .pb-edit-btn:active{transform:scale(.95)}
.plan-builder-root.pb-has-plan .pb-edit-btn{display:inline-flex}

/* ── Close X (replaces the "Back to examples" link in blog mode) ──
   Small floating × in the card's top-right corner. Functions identically
   to early-back: collapses the card back to just the trigger button. */
.plan-builder-root[data-pb-variant="blog"] .pb-close-x{
  position:absolute;top:10px;right:10px;
  width:30px;height:30px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:50%;color:var(--dim);
  font-size:18px;font-weight:600;line-height:1;
  letter-spacing:0;text-transform:none;
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .15s;
}
.plan-builder-root[data-pb-variant="blog"] .pb-close-x:hover{
  background:rgba(255,80,80,.10);
  border-color:rgba(255,120,120,.4);
  color:#ff7676;transform:scale(1.08);
}
.plan-builder-root[data-pb-variant="blog"] .pb-close-x:active{transform:scale(.94)}

/* ============================================================
   END-OF-FLOW DOWNLOAD CTA (shown only after a user plan renders)
   ============================================================ */
.plan-builder-root .pb-download-cta{
  display:none;margin-top:20px;padding:22px 22px 18px;
  background:linear-gradient(135deg,rgba(0,206,201,.07),rgba(41,121,255,.05));
  border:1px solid rgba(0,206,201,.22);border-radius:14px;text-align:center;
}
.plan-builder-root.pb-has-plan .pb-download-cta{display:block}

/* FREE pill sits literally between the App Store and Google Play
   badges - visually anchors the "free" claim to the downloads (not the
   plan-builder above). On narrow screens where badges stack vertically,
   the pill is re-ordered to the top of the column so it doesn't get
   sandwiched between two stacked badges. */
.plan-builder-root .pb-download-cta-free-badge{
  display:inline-block;padding:6px 14px;
  background:linear-gradient(135deg,#00CEC9,#00B894);
  color:#0A1628;
  font-size:11.5px;font-weight:900;letter-spacing:1.5px;
  border-radius:50px;text-transform:uppercase;
  box-shadow:0 3px 12px rgba(0,206,201,.35),0 0 0 1px rgba(0,206,201,.18);
  flex-shrink:0;line-height:1.1;
}

.plan-builder-root .pb-download-cta-title{
  font-size:16px;font-weight:800;color:var(--text);
  letter-spacing:-.2px;margin-bottom:8px;line-height:1.3;
}
/* Sub text uses a deliberate brighter color (not var(--dim)) because the
   CTA card has a soft teal-tinted background that washes out --dim.
   Bright enough to scan; soft enough to stay secondary to the title. */
.plan-builder-root .pb-download-cta-sub{
  font-size:13px;color:#BCD0E5;font-weight:500;
  margin:0 auto 14px;line-height:1.5;
  max-width:440px;
}
.plan-builder-root .pb-download-cta-badges{
  display:flex;gap:14px;justify-content:center;align-items:center;
  flex-wrap:wrap;
}
/* When the badges row wraps (narrow viewport), re-order so the FREE
   pill ends up at the top of the column instead of sandwiched between
   two stacked badges. Apple = order 1, FREE = order 0 (first), Play = 2.
   No-wrap layout still reads left→FREE→right because flex order applies
   uniformly; visually [App Store]  [FREE]  [Google Play] still works
   because the pill's order doesn't change row position when not wrapped. */
.plan-builder-root .pb-download-cta-badges > *{order:1}
.plan-builder-root .pb-download-cta-badges .pb-download-cta-free-badge{order:0;flex-basis:auto}
@media (min-width:520px){
  /* Wide enough for all three side-by-side - restore visual order so
     the pill sits BETWEEN the two badges. */
  .plan-builder-root .pb-download-cta-badges .pb-cta-apple{order:1}
  .plan-builder-root .pb-download-cta-badges .pb-download-cta-free-badge{order:2}
  .plan-builder-root .pb-download-cta-badges .pb-cta-google{order:3}
  /* The Google Play badge PNG has internal left padding (whitespace
     inside the asset before the colored play icon starts). Physical-
     pixel centering by flex makes the pill appear closer to the App
     Store badge than to Google Play's visible content. Shift the pill
     right slightly so it lands visually between the two badges' icons,
     not their bounding boxes. */
  .plan-builder-root .pb-download-cta-badges .pb-download-cta-free-badge{
    margin-left:9px;
  }
}
.plan-builder-root .pb-download-cta-badges a{
  display:inline-flex;align-items:center;transition:transform .15s,filter .2s;
}
.plan-builder-root .pb-download-cta-badges a:hover{
  transform:translateY(-1.5px);filter:brightness(1.08);
}
.plan-builder-root .pb-download-cta-badges img{display:block}

@media (prefers-reduced-motion:reduce){
  .plan-builder-root .jd-customize{animation:none}
  .plan-builder-root .jd-customize-icon{animation:none}
  .plan-builder-root[data-pb-variant="blog"] .journey-demo{transition:none}
}