/* My Flower Heart Studio, draft 2: "Plan your flowers" sheet. Everything scoped to #plan-root / .mfhp-.
   Bodoni Moda headings, Cormorant Garamond italic accents, Manrope body (loaded by the page; Georgia/system fallback). */
#plan-root, .mfhp-sheet {
  --mfhp-ink: #211c19; --mfhp-ink2: #2b2420; --mfhp-cream: #f6eee3; --mfhp-gold: #ead0a2;
  --mfhp-dim: rgba(246, 238, 227, .66); --mfhp-hair: rgba(234, 208, 162, .28);
  --mfhp-e: cubic-bezier(.22, .8, .2, 1);
  --mfhp-head: "Bodoni Moda", "Didot", "Bodoni Fallback", Georgia, serif;
  --mfhp-acc: "Cormorant Garamond", Georgia, serif;
  --mfhp-body: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- the pill ---------- */
#plan-root { display: flex; justify-content: flex-start; }
#plan-root .mfhp-pill {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 34px 0 28px; margin: 0;
  border: 0; border-radius: 999px; cursor: pointer; color: var(--mfhp-cream);
  background: linear-gradient(180deg, rgba(255, 247, 232, .16), rgba(255, 247, 232, .06));
  -webkit-backdrop-filter: blur(14px) saturate(1.35); backdrop-filter: blur(14px) saturate(1.35);
  box-shadow: inset 0 0 0 1px rgba(234, 208, 162, .5), inset 0 1px 0 rgba(255, 250, 242, .28), 0 14px 34px -18px rgba(10, 4, 2, .8);
  font: italic 600 clamp(22px, 2.2vw, 26px)/1 var(--mfhp-acc); letter-spacing: .01em;
  transition: transform .6s var(--mfhp-e), box-shadow .6s var(--mfhp-e), background .6s var(--mfhp-e);
  -webkit-tap-highlight-color: transparent;
}
#plan-root .mfhp-pill:hover { transform: translateY(-2px); background: linear-gradient(180deg, rgba(255, 247, 232, .22), rgba(255, 247, 232, .08)); }
#plan-root .mfhp-pill:active { transform: translateY(0) scale(.985); }
#plan-root .mfhp-pill:focus-visible { outline: 2px solid var(--mfhp-gold); outline-offset: 4px; }
#plan-root .mfhp-leafmark { width: 10px; height: 16px; color: var(--mfhp-gold); transform: rotate(-28deg); transition: transform .9s var(--mfhp-e); flex: none; }
#plan-root .mfhp-pill:hover .mfhp-leafmark { transform: rotate(-6deg); }
#plan-root .mfhp-pill__lab { position: relative; z-index: 1; }
#plan-root .mfhp-pill__sheen {
  position: absolute; z-index: 0; top: -30%; bottom: -30%; left: 0; width: 42%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 230, 190, 0), rgba(255, 236, 205, .32) 50%, rgba(255, 230, 190, 0));
  transform: translateX(-140%) skewX(-18deg); animation: mfhpSheen 6.5s var(--mfhp-e) 1.2s infinite;
}
@keyframes mfhpSheen { 0% { transform: translateX(-140%) skewX(-18deg); } 38%, 100% { transform: translateX(330%) skewX(-18deg); } }

/* ---------- the sheet ---------- */
.mfhp-sheet { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: stretch; justify-content: center; }
.mfhp-sheet[hidden] { display: none; }
.mfhp-sheet *, .mfhp-sheet *::before, .mfhp-sheet *::after { box-sizing: border-box; }
.mfhp-sheet .mfhp-scrim { position: absolute; inset: 0; background: rgba(14, 10, 8, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .42s var(--mfhp-e); }
.mfhp-sheet .mfhp-panel {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; max-height: 100%; overflow: hidden;
  color: var(--mfhp-cream); font: 400 16px/1.55 var(--mfhp-body);
  background: radial-gradient(120% 70% at 85% -10%, rgba(234, 208, 162, .14), transparent 60%),
              radial-gradient(90% 60% at 0% 110%, rgba(150, 70, 60, .16), transparent 60%), var(--mfhp-ink);
  opacity: 0; transform: translateY(24px); transition: opacity .42s var(--mfhp-e), transform .52s var(--mfhp-e);
  text-align: left;
}
.mfhp-sheet.is-open .mfhp-scrim { opacity: 1; }
.mfhp-sheet.is-open .mfhp-panel { opacity: 1; transform: none; }
@media (min-width: 760px) {
  .mfhp-sheet { align-items: center; padding: 24px; }
  .mfhp-sheet .mfhp-panel { width: min(720px, 100%); height: min(860px, calc(100vh - 48px)); height: min(860px, calc(100dvh - 48px)); max-height: min(860px, calc(100vh - 48px)); max-height: min(860px, calc(100dvh - 48px));
    border-radius: 22px; box-shadow: inset 0 0 0 1px var(--mfhp-hair), 0 40px 90px -30px rgba(0, 0, 0, .8); }
}
.mfhp-sheet .mfhp-leaf { position: absolute; right: 18px; bottom: 16px; width: 54px; height: 46px; opacity: .5; pointer-events: none;
  background: url(leaf.webp) center/contain no-repeat; transform: rotate(-12deg); }

.mfhp-sheet .mfhp-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px;
  padding: max(14px, env(safe-area-inset-top)) 14px 10px; flex: none; }
.mfhp-sheet .mfhp-ico { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  color: var(--mfhp-cream); background: rgba(255, 247, 232, .07); box-shadow: inset 0 0 0 1px var(--mfhp-hair); transition: background .3s; }
.mfhp-sheet .mfhp-ico:hover { background: rgba(255, 247, 232, .14); }
.mfhp-sheet .mfhp-ico svg { width: 20px; height: 20px; }
.mfhp-sheet .mfhp-meta { text-align: center; min-width: 0; }
.mfhp-sheet .mfhp-step { margin: 0; font: 600 11px/1.2 var(--mfhp-body); letter-spacing: .18em; text-transform: uppercase; color: var(--mfhp-gold); }
.mfhp-sheet .mfhp-tag { margin: 4px 0 0; font: italic 500 17px/1.2 var(--mfhp-acc); color: var(--mfhp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mfhp-sheet .mfhp-bar { height: 2px; margin: 0 22px; background: rgba(234, 208, 162, .16); border-radius: 2px; overflow: hidden; flex: none; }
.mfhp-sheet .mfhp-bar i { display: block; height: 100%; background: var(--mfhp-gold); transform-origin: 0 50%; transform: scaleX(.125); transition: transform .6s var(--mfhp-e); }

.mfhp-sheet .mfhp-body { position: relative; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; display: grid; min-height: 0; }
.mfhp-sheet .mfhp-screen { grid-area: 1 / 1; padding: 30px 24px max(40px, env(safe-area-inset-bottom)); min-width: 0;
  transition: opacity .36s var(--mfhp-e), transform .46s var(--mfhp-e); }
@media (min-width: 760px) { .mfhp-sheet .mfhp-screen { padding: 34px 56px 48px; } }
.mfhp-sheet .mfhp-screen.is-entering { opacity: 0; transform: translateX(calc(var(--d, 1) * 36px)); transition: none; }
.mfhp-sheet .mfhp-screen.is-leaving { opacity: 0; transform: translateX(calc(var(--d, -1) * 36px)); pointer-events: none; }

.mfhp-sheet .mfhp-q { margin: 0; font: 500 clamp(28px, 7.4vw, 40px)/1.12 var(--mfhp-head); letter-spacing: -.01em; color: var(--mfhp-cream); outline: none; text-wrap: balance; }
.mfhp-sheet .mfhp-q em { font: italic 500 1.12em/1 var(--mfhp-acc); color: var(--mfhp-gold); }
.mfhp-sheet .mfhp-hint { margin: 10px 0 0; font: italic 500 19px/1.3 var(--mfhp-acc); color: var(--mfhp-dim); }
.mfhp-sheet .mfhp-k { margin: 26px 0 10px; font: 600 11px/1.2 var(--mfhp-body); letter-spacing: .18em; text-transform: uppercase; color: var(--mfhp-gold); }

/* tiles */
.mfhp-sheet .mfhp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.mfhp-sheet .mfhp-tiles--wide { grid-template-columns: 1fr; }
.mfhp-sheet .mfhp-tiles--three { grid-template-columns: 1fr; margin-top: 0; }
@media (min-width: 560px) { .mfhp-sheet .mfhp-tiles--wide { grid-template-columns: 1fr 1fr; } .mfhp-sheet .mfhp-tiles--three { grid-template-columns: repeat(3, 1fr); } }
.mfhp-sheet .mfhp-tiles.is-nudge { animation: mfhpNudge .5s var(--mfhp-e); }
@keyframes mfhpNudge { 25% { transform: translateX(-6px); } 60% { transform: translateX(5px); } }
.mfhp-sheet .mfhp-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  min-height: 64px; padding: 12px 40px 12px 16px; margin: 0; border: 0; border-radius: 14px; cursor: pointer; text-align: left;
  color: var(--mfhp-cream); background: rgba(255, 247, 232, .05); box-shadow: inset 0 0 0 1px var(--mfhp-hair);
  font: 500 16px/1.25 var(--mfhp-body); transition: background .35s var(--mfhp-e), box-shadow .35s var(--mfhp-e), transform .35s var(--mfhp-e);
  -webkit-tap-highlight-color: transparent; min-width: 0;
}
.mfhp-sheet .mfhp-tile:hover { background: rgba(255, 247, 232, .1); }
.mfhp-sheet .mfhp-tile:active { transform: scale(.98); }
.mfhp-sheet .mfhp-tile.on { background: rgba(234, 208, 162, .16); box-shadow: inset 0 0 0 1.5px var(--mfhp-gold); }
.mfhp-sheet .mfhp-tile__no { font: italic 500 14px/1 var(--mfhp-acc); color: var(--mfhp-gold); opacity: .8; }
.mfhp-sheet .mfhp-tile__lab { overflow-wrap: anywhere; }
.mfhp-sheet .mfhp-tile small { font: italic 500 16px/1.2 var(--mfhp-acc); color: var(--mfhp-dim); }
.mfhp-sheet .mfhp-tick { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--mfhp-ink);
  background: var(--mfhp-gold); border-radius: 50%; padding: 2px; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s var(--mfhp-e); }
.mfhp-sheet .mfhp-tile.on .mfhp-tick { opacity: 1; transform: none; }
.mfhp-sheet .mfhp-tiles--chips .mfhp-tile { min-height: 54px; }

/* fields */
.mfhp-sheet .mfhp-field { display: block; margin-top: 22px; }
.mfhp-sheet .mfhp-field span { display: block; margin-bottom: 8px; font: italic 500 18px/1.2 var(--mfhp-acc); color: var(--mfhp-dim); }
.mfhp-sheet .mfhp-field input, .mfhp-sheet .mfhp-field textarea {
  display: block; width: 100%; max-width: 100%; min-height: 52px; padding: 13px 16px; margin: 0; border: 0; border-radius: 12px;
  color: var(--mfhp-cream); background: rgba(255, 247, 232, .06); box-shadow: inset 0 0 0 1px var(--mfhp-hair);
  font: 400 16px/1.4 var(--mfhp-body); color-scheme: dark; resize: vertical; -webkit-appearance: none; appearance: none;
}
.mfhp-sheet .mfhp-field input:focus, .mfhp-sheet .mfhp-field textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--mfhp-gold); }

/* actions */
.mfhp-sheet .mfhp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 28px; }
.mfhp-sheet .mfhp-next {
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 28px; margin: 0; border: 0; border-radius: 999px; cursor: pointer;
  color: var(--mfhp-ink); background: linear-gradient(180deg, #f3dfb9, var(--mfhp-gold)); box-shadow: 0 10px 26px -14px rgba(234, 208, 162, .7);
  font: italic 600 21px/1 var(--mfhp-acc); transition: transform .4s var(--mfhp-e), filter .4s;
}
.mfhp-sheet .mfhp-next:hover { transform: translateY(-1px); filter: brightness(1.05); }
.mfhp-sheet .mfhp-link { min-height: 44px; padding: 0 4px; margin: 0; border: 0; background: none; cursor: pointer; color: var(--mfhp-cream);
  font: italic 500 19px/1 var(--mfhp-acc); text-decoration: underline; text-decoration-color: var(--mfhp-hair); text-underline-offset: 5px; }
.mfhp-sheet .mfhp-link:hover { text-decoration-color: var(--mfhp-gold); }
.mfhp-sheet button:focus-visible, .mfhp-sheet .mfhp-q:focus-visible { outline: 2px solid var(--mfhp-gold); outline-offset: 3px; }
.mfhp-sheet .mfhp-err { min-height: 1.4em; margin: 14px 0 0; font-size: 14px; color: #f2b3a0; }
.mfhp-sheet .mfhp-note { margin: 18px 0 0; font-size: 13px; letter-spacing: .02em; color: var(--mfhp-dim); }

/* end card */
.mfhp-sheet .mfhp-done { position: relative; }
.mfhp-sheet .mfhp-done > .mfhp-k:first-of-type { margin-top: 0; }
.mfhp-sheet .mfhp-glow { position: absolute; left: -40px; top: -60px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(234, 208, 162, .22), transparent 68%); animation: mfhpGlow 1.8s var(--mfhp-e) .2s backwards; }
.mfhp-sheet .mfhp-done { isolation: isolate; }
@keyframes mfhpGlow { from { transform: scale(.4); opacity: 0; } }
.mfhp-sheet .mfhp-sum { margin: 26px 0 0; padding: 0; border-top: 1px solid var(--mfhp-hair); }
.mfhp-sheet .mfhp-sum div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--mfhp-hair); }
.mfhp-sheet .mfhp-sum dt { font: 600 11px/1.6 var(--mfhp-body); letter-spacing: .16em; text-transform: uppercase; color: var(--mfhp-gold); }
.mfhp-sheet .mfhp-sum dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mfhp-sheet .mfhp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mfhp-sheet .mfhp-chips li { padding: 7px 14px; border-radius: 999px; font: italic 500 17px/1.1 var(--mfhp-acc);
  background: rgba(234, 208, 162, .1); box-shadow: inset 0 0 0 1px var(--mfhp-hair); }
.mfhp-sheet .mfhp-note--done { margin-top: 26px; font: italic 500 18px/1.3 var(--mfhp-acc); color: var(--mfhp-gold); }

@media (prefers-reduced-motion: reduce) {
  #plan-root .mfhp-pill__sheen { animation: none; opacity: 0; }
  #plan-root .mfhp-pill, .mfhp-sheet .mfhp-panel, .mfhp-sheet .mfhp-scrim, .mfhp-sheet .mfhp-screen, .mfhp-sheet .mfhp-bar i { transition: none; }
  .mfhp-sheet .mfhp-glow, .mfhp-sheet .mfhp-tiles.is-nudge { animation: none; }
}

/* ---------- v8.4: end card (copy my plan + send it on Instagram), iPhone polish ---------- */
/* no double-tap zoom delay on any control; the small text links still give a 44 px finger target */
.mfhp-sheet button, .mfhp-sheet a, .mfhp-sheet .mfhp-head, .mfhp-sheet .mfhp-bar { touch-action: manipulation; }
.mfhp-sheet .mfhp-link { min-width: 44px; }
.mfhp-sheet a.mfhp-next { text-decoration: none; -webkit-tap-highlight-color: transparent; }
.mfhp-sheet a.mfhp-next:focus-visible { outline: 2px solid var(--mfhp-gold); outline-offset: 3px; }
.mfhp-sheet .mfhp-actions--main { margin-top: 24px; }
.mfhp-sheet .mfhp-actions--main .mfhp-next { justify-content: center; min-height: 52px; }
/* "Copy my plan" = the quiet glass twin of the gold Instagram button */
.mfhp-sheet #mfhpCopy { color: var(--mfhp-cream); background: rgba(255, 247, 232, .07); box-shadow: inset 0 0 0 1px rgba(234, 208, 162, .55); }
.mfhp-sheet #mfhpCopy:hover { background: rgba(255, 247, 232, .13); }
.mfhp-sheet .mfhp-actions--small { margin-top: 14px; gap: 6px 20px; }
.mfhp-sheet .mfhp-actions--small .mfhp-link { font-size: 18px; color: var(--mfhp-dim); }
.mfhp-sheet .mfhp-copybox {
  display: block; width: 100%; margin: 16px 0 0; padding: 13px 16px; border: 0; border-radius: 12px; resize: none;
  color: var(--mfhp-cream); background: rgba(255, 247, 232, .06); box-shadow: inset 0 0 0 1.5px var(--mfhp-gold);
  font: 400 15px/1.45 var(--mfhp-body); color-scheme: dark;
}
.mfhp-sheet .mfhp-copybox[hidden] { display: none; }
@media (max-width: 559px) {
  .mfhp-sheet .mfhp-actions--main { flex-direction: column; align-items: stretch; gap: 10px; }
  .mfhp-sheet .mfhp-actions--main .mfhp-next { width: 100%; }
}

/* ---------- v8.5: premium pass (V85-P). Her blush pink with the site's cream / gold / ink.
   Motion is transform + opacity only (plus a 16 px tick stroke draw); sizes and the laptop panel height are unchanged. ---------- */
.mfhp-sheet { --mfhp-blush: #f2c7c3; --mfhp-rose: #e2a3a5; --mfhp-blush-dim: rgba(242, 199, 195, .78);
  --mfhp-sheen: linear-gradient(135deg, #f7ddd6 0%, #f1cbbf 38%, #ead0a2 100%); }
.mfhp-sheet .mfhp-panel {
  background: radial-gradient(90% 55% at 0% -8%, rgba(226, 163, 165, .17), transparent 62%),
              radial-gradient(120% 70% at 92% -12%, rgba(234, 208, 162, .15), transparent 60%),
              radial-gradient(90% 60% at 10% 112%, rgba(170, 80, 86, .17), transparent 62%), var(--mfhp-ink);
}
@media (min-width: 760px) {
  .mfhp-sheet .mfhp-panel { box-shadow: inset 0 0 0 1px var(--mfhp-hair), inset 0 1px 0 rgba(255, 238, 230, .12), 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .25); }
}
/* a second, fainter leaf at the top: the sheet is framed by her greenery, never busy */
.mfhp-sheet .mfhp-panel::before { content: ""; position: absolute; left: -10px; top: 62px; width: 78px; height: 66px; pointer-events: none; z-index: 0;
  background: url(leaf.webp) center/contain no-repeat; opacity: .13; transform: rotate(168deg) scaleX(-1); }
.mfhp-sheet .mfhp-leaf { opacity: .42; z-index: 0; }
.mfhp-sheet .mfhp-head, .mfhp-sheet .mfhp-bar, .mfhp-sheet .mfhp-body { position: relative; z-index: 1; }

/* header: small caps gold label, blush italic tag */
.mfhp-sheet .mfhp-step { letter-spacing: .24em; }
.mfhp-sheet .mfhp-tag { color: var(--mfhp-blush-dim); }
.mfhp-sheet .mfhp-ico { transition: background .3s, transform .3s var(--mfhp-e); }
.mfhp-sheet .mfhp-ico:active { transform: scale(.92); }

/* progress: a blush-to-gold thread that fills smoothly */
.mfhp-sheet .mfhp-bar { background: rgba(242, 199, 195, .13); }
.mfhp-sheet .mfhp-bar i { background: linear-gradient(90deg, var(--mfhp-rose), var(--mfhp-blush) 45%, var(--mfhp-gold));
  transition: transform .9s cubic-bezier(.65, 0, .25, 1); }

/* type: Bodoni question, Cormorant italic accent in blush, a fine gold rule under it */
.mfhp-sheet .mfhp-q { letter-spacing: -.015em; }
.mfhp-sheet .mfhp-q em { color: var(--mfhp-blush); }
.mfhp-sheet .mfhp-hint { color: var(--mfhp-blush-dim); }
.mfhp-sheet .mfhp-screen > .mfhp-q::after { content: ""; display: block; width: 44px; height: 1px; margin-top: 16px;
  background: linear-gradient(90deg, var(--mfhp-gold), rgba(234, 208, 162, 0)); transform-origin: 0 50%; }

/* step to step: the screen slides and fades, then its content rises in softly */
.mfhp-sheet .mfhp-screen { transition: opacity .42s var(--mfhp-e), transform .58s var(--mfhp-e); }
.mfhp-sheet .mfhp-screen.is-entering { transform: translateX(calc(var(--d, 1) * 28px)) scale(.992); }
.mfhp-sheet .mfhp-screen.is-leaving { transform: translateX(calc(var(--d, -1) * 22px)) scale(.992); transition: opacity .26s ease, transform .4s var(--mfhp-e); }
.mfhp-sheet .mfhp-screen > .mfhp-q { animation: mfhpRise .7s var(--mfhp-e) backwards; }
.mfhp-sheet .mfhp-screen > .mfhp-q::after { animation: mfhpRule .9s var(--mfhp-e) .25s backwards; }
.mfhp-sheet .mfhp-screen > .mfhp-hint, .mfhp-sheet .mfhp-screen > .mfhp-field, .mfhp-sheet .mfhp-screen > .mfhp-actions { animation: mfhpRise .7s var(--mfhp-e) .12s backwards; }
.mfhp-sheet .mfhp-tile { animation: mfhpRise .62s var(--mfhp-e) backwards; }
.mfhp-sheet .mfhp-tile:nth-child(1) { animation-delay: .08s; } .mfhp-sheet .mfhp-tile:nth-child(2) { animation-delay: .12s; }
.mfhp-sheet .mfhp-tile:nth-child(3) { animation-delay: .16s; } .mfhp-sheet .mfhp-tile:nth-child(4) { animation-delay: .2s; }
.mfhp-sheet .mfhp-tile:nth-child(5) { animation-delay: .24s; } .mfhp-sheet .mfhp-tile:nth-child(6) { animation-delay: .28s; }
.mfhp-sheet .mfhp-tile:nth-child(7) { animation-delay: .32s; } .mfhp-sheet .mfhp-tile:nth-child(8) { animation-delay: .36s; }
@keyframes mfhpRise { from { opacity: 0; transform: translateY(10px); } }
@keyframes mfhpRule { from { opacity: 0; transform: scaleX(0); } }

/* tiles: glass card; choosing one fills it with blush, lifts it gently and draws the tick */
.mfhp-sheet .mfhp-tile { isolation: isolate; overflow: hidden; background: rgba(255, 247, 232, .045);
  box-shadow: inset 0 0 0 1px var(--mfhp-hair), inset 0 1px 0 rgba(255, 250, 242, .06);
  transition: box-shadow .4s var(--mfhp-e), transform .45s var(--mfhp-e); }
.mfhp-sheet .mfhp-tile::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 140% at 0% 0%, rgba(242, 199, 195, .34), rgba(226, 163, 165, .16) 55%, rgba(234, 208, 162, .12));
  opacity: 0; transform: scale(.94); transition: opacity .45s var(--mfhp-e), transform .55s var(--mfhp-e); }
.mfhp-sheet .mfhp-tile::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: rgba(255, 247, 232, .06); opacity: 0; transition: opacity .3s; }
.mfhp-sheet .mfhp-tile:hover { background: rgba(255, 247, 232, .045); }
@media (hover: hover) { .mfhp-sheet .mfhp-tile:hover::after { opacity: 1; } .mfhp-sheet .mfhp-tile:hover { transform: translateY(-1px); } }
.mfhp-sheet .mfhp-tile:active { transform: scale(.975); }
.mfhp-sheet .mfhp-tile.on { background: rgba(255, 247, 232, .045);
  box-shadow: inset 0 0 0 1.5px rgba(242, 199, 195, .9), 0 12px 28px -18px rgba(226, 163, 165, .75); animation: mfhpPop .5s var(--mfhp-e); }
.mfhp-sheet .mfhp-tile.on::before { opacity: 1; transform: none; }
@keyframes mfhpPop { 0% { transform: scale(.975); } 55% { transform: scale(1.025); } 100% { transform: none; } }
.mfhp-sheet .mfhp-tile__no { color: var(--mfhp-blush); opacity: .85; transition: opacity .3s; }
.mfhp-sheet .mfhp-tile.on .mfhp-tile__no { opacity: 1; }
.mfhp-sheet .mfhp-tick { z-index: 1; color: var(--mfhp-ink); background: var(--mfhp-sheen); box-shadow: 0 2px 8px -2px rgba(226, 163, 165, .8);
  transform: scale(.3) rotate(-30deg); transition: opacity .25s, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.mfhp-sheet .mfhp-tile.on .mfhp-tick { transform: none; }
.mfhp-sheet .mfhp-tick path { stroke-width: 1.9; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .4s var(--mfhp-e) .12s; }
.mfhp-sheet .mfhp-tile.on .mfhp-tick path { stroke-dashoffset: 0; }

/* fields: blush focus ring */
.mfhp-sheet .mfhp-field span { color: var(--mfhp-blush-dim); }
.mfhp-sheet .mfhp-field input, .mfhp-sheet .mfhp-field textarea { transition: box-shadow .3s var(--mfhp-e), background .3s; }
.mfhp-sheet .mfhp-field input:focus, .mfhp-sheet .mfhp-field textarea:focus { background: rgba(255, 247, 232, .08);
  box-shadow: inset 0 0 0 1.5px var(--mfhp-blush), 0 0 0 4px rgba(242, 199, 195, .12); }

/* primary button: blush-to-gold satin, a light sheen on hover, a clear press */
.mfhp-sheet .mfhp-next { position: relative; overflow: hidden; isolation: isolate; color: var(--mfhp-ink); background: var(--mfhp-sheen);
  box-shadow: inset 0 1px 0 rgba(255, 252, 247, .7), inset 0 -1px 0 rgba(120, 70, 50, .18), 0 14px 30px -16px rgba(226, 163, 165, .75);
  transition: transform .4s var(--mfhp-e), box-shadow .4s var(--mfhp-e), filter .3s; }
.mfhp-sheet .mfhp-next::after { content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 250, 244, .55) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-160%) skewX(-18deg); transition: transform .9s var(--mfhp-e); }
.mfhp-sheet .mfhp-next span { display: inline-block; transition: transform .4s var(--mfhp-e); }
@media (hover: hover) {
  .mfhp-sheet .mfhp-next:hover { transform: translateY(-2px); filter: none;
    box-shadow: inset 0 1px 0 rgba(255, 252, 247, .75), inset 0 -1px 0 rgba(120, 70, 50, .18), 0 20px 36px -16px rgba(226, 163, 165, .85); }
  .mfhp-sheet .mfhp-next:hover::after { transform: translateX(330%) skewX(-18deg); }
  .mfhp-sheet .mfhp-next:hover span { transform: translateX(4px); }
}
.mfhp-sheet .mfhp-next:active { transform: translateY(0) scale(.965); transition-duration: .12s; filter: brightness(.96);
  box-shadow: inset 0 2px 6px rgba(120, 70, 50, .28), 0 6px 14px -10px rgba(226, 163, 165, .6); }
.mfhp-sheet .mfhp-link { text-decoration-color: rgba(242, 199, 195, .4); transition: text-decoration-color .3s, color .3s; }
.mfhp-sheet .mfhp-link:hover { color: var(--mfhp-blush); text-decoration-color: var(--mfhp-blush); }
.mfhp-sheet button:focus-visible, .mfhp-sheet a.mfhp-next:focus-visible { outline-color: var(--mfhp-blush); }

/* end card: blush bloom, blush chips, "Copy my plan" stays the quiet glass twin */
.mfhp-sheet .mfhp-glow { background: radial-gradient(circle at 40% 40%, rgba(242, 199, 195, .26), rgba(234, 208, 162, .1) 45%, transparent 70%); }
.mfhp-sheet .mfhp-done > .mfhp-k:first-of-type { color: var(--mfhp-blush); }
.mfhp-sheet .mfhp-done > * { animation: mfhpRise .7s var(--mfhp-e) backwards; }
.mfhp-sheet .mfhp-done > :nth-child(3) { animation-delay: .08s; } .mfhp-sheet .mfhp-done > :nth-child(4) { animation-delay: .16s; }
.mfhp-sheet .mfhp-done > :nth-child(5) { animation-delay: .24s; } .mfhp-sheet .mfhp-done > :nth-child(6) { animation-delay: .32s; }
.mfhp-sheet .mfhp-done > :nth-child(n+7) { animation-delay: .4s; }
.mfhp-sheet .mfhp-done > .mfhp-glow { animation: mfhpGlow 1.8s var(--mfhp-e) .2s backwards; }
.mfhp-sheet .mfhp-sum { border-top-color: rgba(242, 199, 195, .2); }
.mfhp-sheet .mfhp-sum div { border-bottom-color: rgba(242, 199, 195, .16); }
.mfhp-sheet .mfhp-chips li { background: linear-gradient(135deg, rgba(242, 199, 195, .16), rgba(234, 208, 162, .1)); box-shadow: inset 0 0 0 1px rgba(242, 199, 195, .3); }
.mfhp-sheet .mfhp-note--done { color: var(--mfhp-cream); opacity: .9; }
.mfhp-sheet #mfhpCopy { color: var(--mfhp-cream); background: rgba(255, 247, 232, .06);
  box-shadow: inset 0 0 0 1px rgba(242, 199, 195, .55), inset 0 1px 0 rgba(255, 250, 242, .12); }
.mfhp-sheet #mfhpCopy::after { background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(242, 199, 195, .22) 50%, rgba(255, 255, 255, 0)); }
@media (hover: hover) { .mfhp-sheet #mfhpCopy:hover { background: rgba(255, 247, 232, .1); box-shadow: inset 0 0 0 1px var(--mfhp-blush), 0 14px 30px -18px rgba(226, 163, 165, .6); } }
.mfhp-sheet #mfhpCopy:active { box-shadow: inset 0 0 0 1px var(--mfhp-blush), inset 0 2px 6px rgba(0, 0, 0, .3); }
.mfhp-sheet #mfhpCopy.is-copied { animation: mfhpPop .5s var(--mfhp-e); box-shadow: inset 0 0 0 1.5px var(--mfhp-blush); }
.mfhp-sheet .mfhp-copybox { box-shadow: inset 0 0 0 1.5px var(--mfhp-blush); }

@media (prefers-reduced-motion: reduce) {
  .mfhp-sheet .mfhp-screen > *, .mfhp-sheet .mfhp-screen > .mfhp-q::after, .mfhp-sheet .mfhp-tile, .mfhp-sheet .mfhp-tile.on,
  .mfhp-sheet .mfhp-done > *, .mfhp-sheet #mfhpCopy.is-copied { animation: none !important; }
  .mfhp-sheet .mfhp-tile, .mfhp-sheet .mfhp-tile::before, .mfhp-sheet .mfhp-tick, .mfhp-sheet .mfhp-tick path, .mfhp-sheet .mfhp-next,
  .mfhp-sheet .mfhp-next::after, .mfhp-sheet .mfhp-next span, .mfhp-sheet .mfhp-ico, .mfhp-sheet .mfhp-bar i { transition: none !important; }
  .mfhp-sheet .mfhp-next:hover::after { transform: translateX(-160%) skewX(-18deg); }
}
/* the step heading takes focus only so screen readers start there; it is not a control, so no box around it */
.mfhp-sheet .mfhp-q:focus, .mfhp-sheet .mfhp-q:focus-visible { outline: none; }

/* ---------- v8.6: premium pass 2 (V86-P). Her own wide wedding-table photo (wed-7), blurred ahead of time (no live blur
   over a big photo), under a warm blush glass panel with a gold hairline. Dark ink text on the light glass.
   Step 1 = photo cards from her photos; gold stem progress with one petal per finished step; a one-time bloom burst
   on the end card. Motion is transform + opacity only; nothing loops at rest; the laptop panel height is unchanged. ---------- */
.mfhp-sheet {
  --mfhp-cream: #2a1c19; --mfhp-dim: rgba(64, 40, 36, .74); --mfhp-gold: #8f6326; --mfhp-hair: rgba(176, 132, 70, .34);
  --mfhp-blush: #a8485e; --mfhp-blush-dim: rgba(118, 56, 68, .86); --mfhp-goldl: #d9b46f;
  --mfhp-glass: linear-gradient(168deg, rgba(255, 249, 244, .80) 0%, rgba(250, 232, 226, .76) 52%, rgba(246, 226, 210, .80) 100%);
}
.mfhp-sheet .mfhp-scrim { background: #3a2722 url(img/bg-phone.webp) center / cover no-repeat; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (min-width: 760px) { .mfhp-sheet .mfhp-scrim { background-image: url(img/bg-wide.webp); } }
.mfhp-sheet .mfhp-scrim::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, rgba(60, 30, 26, .05), rgba(40, 20, 18, .38)); }
.mfhp-sheet .mfhp-panel {
  background: radial-gradient(80% 45% at 100% 0%, rgba(234, 208, 162, .30), transparent 62%),
              radial-gradient(80% 50% at 0% 100%, rgba(242, 199, 195, .34), transparent 62%), var(--mfhp-glass);
  box-shadow: inset 0 0 0 1px rgba(217, 180, 111, .55), inset 0 1px 0 rgba(255, 255, 255, .7);
}
@media (min-width: 760px) {
  .mfhp-sheet .mfhp-panel { box-shadow: inset 0 0 0 1px rgba(217, 180, 111, .7), inset 0 0 0 5px rgba(255, 250, 244, .35),
    inset 0 1px 0 rgba(255, 255, 255, .8), 0 40px 90px -30px rgba(40, 16, 12, .6); }
}
.mfhp-sheet .mfhp-panel::before { opacity: .22; }
.mfhp-sheet .mfhp-leaf { opacity: .55; }
.mfhp-sheet .mfhp-ico { background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px var(--mfhp-hair); }
.mfhp-sheet .mfhp-ico:hover { background: rgba(255, 255, 255, .75); }
.mfhp-sheet .mfhp-screen > .mfhp-q::after { background: linear-gradient(90deg, var(--mfhp-goldl), rgba(217, 180, 111, 0)); }

/* progress: a thin gold stem that grows, one small petal per finished step */
.mfhp-sheet .mfhp-bar { position: relative; height: 14px; margin: -4px 26px -2px; background: none; overflow: visible; border-radius: 0; }
.mfhp-sheet .mfhp-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 6.5px; height: 1px; background: rgba(176, 132, 70, .22); }
.mfhp-sheet .mfhp-bar i { position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #7f9a62, #b99a55 40%, var(--mfhp-goldl)); }
.mfhp-sheet .mfhp-bar b { position: absolute; top: 0; left: calc((var(--j) + 1) * 12.5% - 4px); width: 8px; height: 8px;
  border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #f0b9b6, #c9707e); box-shadow: 0 1px 2px rgba(120, 50, 60, .25);
  opacity: 0; transform: rotate(-45deg) scale(.1); transform-origin: 0 100%; transition: opacity .35s, transform .6s cubic-bezier(.34, 1.56, .64, 1) .25s; }
.mfhp-sheet .mfhp-bar b:nth-of-type(even) { top: 6px; transform: rotate(135deg) scale(.1); transform-origin: 0 100%; }
.mfhp-sheet .mfhp-bar b.on { opacity: 1; transform: rotate(-45deg) scale(1); }
.mfhp-sheet .mfhp-bar b.on:nth-of-type(even) { transform: rotate(135deg) scale(1); }

/* tiles harmonised: pearl glass on the blush panel */
.mfhp-sheet .mfhp-tile { background: rgba(255, 255, 255, .52); box-shadow: inset 0 0 0 1px var(--mfhp-hair), 0 6px 18px -14px rgba(90, 40, 30, .5); }
.mfhp-sheet .mfhp-tile:hover { background: rgba(255, 255, 255, .52); }
.mfhp-sheet .mfhp-tile::before { background: radial-gradient(120% 140% at 0% 0%, rgba(250, 214, 208, .9), rgba(242, 199, 195, .55) 55%, rgba(234, 208, 162, .45)); }
.mfhp-sheet .mfhp-tile::after { background: rgba(255, 255, 255, .35); }
.mfhp-sheet .mfhp-tile.on { background: rgba(255, 255, 255, .52);
  box-shadow: inset 0 0 0 1.5px var(--mfhp-goldl), 0 0 0 4px rgba(217, 180, 111, .22), 0 14px 30px -16px rgba(150, 90, 40, .55); }
.mfhp-sheet .mfhp-tile__no { color: var(--mfhp-blush); }
.mfhp-sheet .mfhp-tile small { color: var(--mfhp-dim); }

/* step 1: photo cards, her photos, the label in the italic serif */
.mfhp-sheet .mfhp-tiles--cards { gap: 12px; margin-top: 20px; }
@media (min-width: 560px) { .mfhp-sheet .mfhp-tiles--cards { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.mfhp-sheet .mfhp-card { display: block; padding: 0; min-height: 0; aspect-ratio: 9 / 8.6; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, #fbe9e4, #f3d3cc 60%, #ecd2b4);
  transition: box-shadow .45s var(--mfhp-e), transform .5s var(--mfhp-e); }
.mfhp-sheet .mfhp-card.on { background: linear-gradient(160deg, #fbe9e4, #f3d3cc 60%, #ecd2b4); animation: none; transform: translateY(-5px);
  box-shadow: inset 0 0 0 1.5px var(--mfhp-goldl), 0 0 0 4px rgba(217, 180, 111, .3), 0 0 26px 2px rgba(232, 196, 120, .55), 0 20px 34px -16px rgba(120, 70, 30, .6); }
.mfhp-sheet .mfhp-card::before { display: none; }
.mfhp-sheet .mfhp-card__ph { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.mfhp-sheet .mfhp-card__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--mfhp-e); }
.mfhp-sheet .mfhp-card.on .mfhp-card__ph img { transform: scale(1.05); }
.mfhp-sheet .mfhp-card--bloom .mfhp-card__ph { inset: 12% 22% 30%; border-radius: 50%; box-shadow: 0 10px 22px -10px rgba(120, 50, 50, .55), 0 0 0 3px rgba(255, 255, 255, .7); }
.mfhp-sheet .mfhp-card--bloom .mfhp-card__ph img { object-fit: contain; }
.mfhp-sheet .mfhp-card::after { opacity: 1; z-index: -1; background: linear-gradient(180deg, rgba(40, 20, 16, 0) 48%, rgba(40, 20, 16, .62) 100%); transition: none; }
.mfhp-sheet .mfhp-card--bloom::after { background: none; }
.mfhp-sheet .mfhp-card .mfhp-tile__no { position: absolute; left: 12px; top: 10px; padding: 3px 7px; border-radius: 999px; font-size: 13px;
  color: #6b3a42; background: rgba(255, 249, 244, .82); opacity: 1; }
.mfhp-sheet .mfhp-card .mfhp-tile__lab { position: absolute; left: 14px; right: 12px; bottom: 10px; font: italic 600 25px/1.05 var(--mfhp-acc);
  color: #fffaf4; text-shadow: 0 1px 10px rgba(30, 12, 8, .55); }
.mfhp-sheet .mfhp-card--bloom .mfhp-tile__lab { color: #4a2a2c; text-shadow: none; }
/* the bloom that opens behind the tick on tap (her blush garden rose crop) */
.mfhp-sheet .mfhp-open { position: absolute; right: 8px; top: 8px; width: 38px; height: 38px; border-radius: 50%; z-index: 0;
  background: url(img/bl.webp) center / cover no-repeat; box-shadow: 0 0 0 2px rgba(255, 250, 244, .9), 0 6px 14px -4px rgba(120, 60, 40, .6);
  opacity: 0; transform: scale(.2) rotate(-120deg); transition: opacity .2s, transform .42s cubic-bezier(.34, 1.4, .64, 1); }
.mfhp-sheet .mfhp-card.on .mfhp-open { opacity: 1; transform: none; }
.mfhp-sheet .mfhp-card .mfhp-tick { top: 18px; right: 18px; margin-top: 0; z-index: 2; transition-delay: .1s; }

/* fields + buttons on the light glass */
.mfhp-sheet .mfhp-field input, .mfhp-sheet .mfhp-field textarea, .mfhp-sheet .mfhp-copybox {
  color: var(--mfhp-cream); background: rgba(255, 255, 255, .62); color-scheme: light; }
.mfhp-sheet .mfhp-field input:focus, .mfhp-sheet .mfhp-field textarea:focus { background: rgba(255, 255, 255, .85);
  box-shadow: inset 0 0 0 1.5px var(--mfhp-goldl), 0 0 0 4px rgba(217, 180, 111, .2); }
.mfhp-sheet .mfhp-err { color: #a3392b; }
.mfhp-sheet .mfhp-next { box-shadow: inset 0 0 0 1px rgba(176, 132, 70, .45), inset 0 1px 0 rgba(255, 252, 247, .8), 0 14px 28px -16px rgba(150, 80, 50, .65); }
.mfhp-sheet #mfhpCopy { color: var(--mfhp-cream); background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--mfhp-goldl); }
@media (hover: hover) { .mfhp-sheet #mfhpCopy:hover { background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px var(--mfhp-gold); } }
.mfhp-sheet .mfhp-link { text-decoration-color: rgba(168, 72, 94, .4); }
.mfhp-sheet .mfhp-chips li { background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(217, 180, 111, .55); }
.mfhp-sheet .mfhp-sum { border-top-color: var(--mfhp-hair); }
.mfhp-sheet .mfhp-sum div { border-bottom-color: rgba(176, 132, 70, .22); }
.mfhp-sheet .mfhp-glow { background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, .6), rgba(242, 199, 195, .3) 45%, transparent 70%); }

/* end card: a gentle bloom burst, once (~1.2 s), then gone */
.mfhp-sheet .mfhp-done > .mfhp-burst { position: absolute; left: 62%; top: 34px; width: 0; height: 0; z-index: 2; pointer-events: none; animation: none; }
.mfhp-sheet .mfhp-burst b { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; opacity: 0;
  background: url(img/bl.webp) center / cover; animation: mfhpBurst 1.25s cubic-bezier(.2, .7, .3, 1) .15s 1 both; }
.mfhp-sheet .mfhp-burst b:nth-child(3n+2) { background-image: url(img/c-basket.webp); width: 16px; height: 16px; left: -8px; top: -8px; }
.mfhp-sheet .mfhp-burst b:nth-child(3n) { background: linear-gradient(135deg, #f6c9c4, #d07c88); border-radius: 0 100% 0 100%; width: 12px; height: 12px; left: -6px; top: -6px; }
.mfhp-sheet .mfhp-burst b:nth-child(1) { --x: -96px; --y: -18px; --r: -140deg; }
.mfhp-sheet .mfhp-burst b:nth-child(2) { --x: -60px; --y: 44px; --r: 120deg; }
.mfhp-sheet .mfhp-burst b:nth-child(3) { --x: -20px; --y: -40px; --r: -200deg; }
.mfhp-sheet .mfhp-burst b:nth-child(4) { --x: 28px; --y: 52px; --r: 160deg; }
.mfhp-sheet .mfhp-burst b:nth-child(5) { --x: 70px; --y: -30px; --r: -90deg; }
.mfhp-sheet .mfhp-burst b:nth-child(6) { --x: 96px; --y: 22px; --r: 220deg; }
.mfhp-sheet .mfhp-burst b:nth-child(7) { --x: 40px; --y: -58px; --r: 100deg; }
.mfhp-sheet .mfhp-burst b:nth-child(8) { --x: -110px; --y: 30px; --r: -180deg; }
.mfhp-sheet .mfhp-burst b:nth-child(9) { --x: 4px; --y: 70px; --r: 140deg; }
@keyframes mfhpBurst {
  0% { opacity: 0; transform: translate(0, 0) scale(.2) rotate(0); }
  22% { opacity: 1; }
  70% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); }
}

@media (prefers-reduced-motion: reduce) {
  .mfhp-sheet .mfhp-burst { display: none; }
  .mfhp-sheet .mfhp-bar b, .mfhp-sheet .mfhp-card, .mfhp-sheet .mfhp-card__ph img, .mfhp-sheet .mfhp-open { transition: none !important; }
}