.occasion-bloom{max-width:1060px;margin:0 auto;padding:4px 0 16px}
.occasion-bloom .at-step-heading{max-width:750px;margin-bottom:24px}
.occasion-bloom h2{font:400 clamp(34px,3.6vw,48px)/1.12 'Cormorant Garamond',serif!important;letter-spacing:-.035em}
.occasion-bloom h2 em{color:var(--at-accent);font-weight:400}
.ob-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;padding-top:12px}
.ob-choice{--petal:#dca0ac;--leaf:#91a99a;--ink:#74445b;--paper:#fae9d9;--envelope:#dba9af;--light:#ecc3c1;--dark:#bc8799;appearance:none;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid var(--at-line);border-radius:152px 152px 10px 10px;background:var(--at-surface);color:var(--at-ink);padding:34px 24px 0;cursor:pointer;isolation:isolate;box-shadow:0 16px 44px -28px color-mix(in srgb,var(--petal) 75%,transparent),0 0 32px -20px color-mix(in srgb,var(--petal) 60%,transparent);transition:border-color .3s,transform .35s,background .3s,box-shadow .4s}
.ob-anniversary{--petal:#b9acd6;--envelope:#b4a5c9;--light:#d1c4df;--dark:#8c7da7;--ink:#5d5078}
.ob-love{--petal:#dda8bb;--envelope:#a5bbaa;--light:#c4d1bd;--dark:#7e9b8a;--ink:#4e7065}
.ob-choice:hover,.ob-choice:focus-visible{transform:translateY(-5px);border-color:var(--petal)}
/* the glow answers the pointer and the choice; it never pulses on its own */
.ob-choice:is(:hover,:focus-visible,[aria-pressed=true]){box-shadow:0 22px 56px -26px color-mix(in srgb,var(--petal) 85%,transparent),0 0 52px -14px color-mix(in srgb,var(--petal) 65%,transparent)}
:root[data-mode=light] .ob-choice{box-shadow:0 14px 34px -24px color-mix(in srgb,var(--dark) 65%,transparent),0 0 26px -16px color-mix(in srgb,var(--petal) 45%,transparent)}
:root[data-mode=light] .ob-choice:is(:hover,:focus-visible,[aria-pressed=true]){box-shadow:0 20px 44px -22px color-mix(in srgb,var(--dark) 75%,transparent),0 0 38px -12px color-mix(in srgb,var(--petal) 70%,transparent)}
.ob-choice:focus-visible{outline:2px solid var(--at-accent);outline-offset:5px}
.ob-choice[aria-pressed=true]{border-color:var(--petal);background:var(--at-surface2)}
.ob-selection{position:absolute;top:92px;right:22px;border:1px solid var(--at-line);width:25px;height:25px;border-radius:50%;display:grid;place-items:center;color:var(--at-muted);font:12px 'Jost',sans-serif;z-index:2}
.ob-choice[aria-pressed=true] .ob-selection{background:var(--petal);border-color:var(--petal);color:#382838}
/* Sprigs sit BEHIND the card (z-index:-1, which works because .ob-choice isolates),
   so only the part overhanging the arch is seen and nothing lands on the text. */
.ob-deco{position:absolute;pointer-events:none;z-index:-1;overflow:visible}
.ob-deco svg{display:block;width:100%;height:100%;overflow:visible}
.ob-deco-l{left:-44px;bottom:44px;width:96px;height:190px}
.ob-deco-r{right:-44px;bottom:96px;width:96px;height:190px;transform:scaleX(-1)}
.ob-stem{transition:transform .7s cubic-bezier(.2,.75,.2,1);transform-box:fill-box;transform-origin:bottom center}
.ob-choice:is(:hover,:focus-visible,[aria-pressed=true]) .ob-stem{transform:rotate(var(--lean,-3deg))}
/* Declared once and unconditionally: a second `animation` in a hover rule would restart
   it. Frame 0 and frame 100 are both the resting pose, so a frozen first frame — which
   is what .ob-still and prefers-reduced-motion leave behind — is still the right picture. */
.ob-breeze{animation:ob-breeze 5.5s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}
@keyframes ob-breeze{0%,100%{transform:rotate(0)}50%{transform:rotate(2.5deg)}}

.ob-scene{position:relative;display:block;width:100%;height:205px;margin:0 0 12px}
.ob-scene svg{height:100%;width:100%;overflow:visible}
.ob-eyebrow{font:500 9px 'Jost',sans-serif;letter-spacing:.2em;color:var(--at-muted)}
.ob-title{font:400 35px/1.12 'Cormorant Garamond',serif;letter-spacing:-.02em;margin:10px 0}
.ob-description{font:12px/1.7 'Jost',sans-serif;color:var(--at-muted);min-height:42px;max-width:220px;margin-bottom:24px}
.ob-action{display:flex;justify-content:space-between;align-items:center;align-self:stretch;border-top:1px solid var(--at-line);font:11px 'Jost',sans-serif;padding:17px 0;color:var(--at-muted)}
.ob-action>span{font-size:18px;color:var(--petal);transition:transform .3s}.ob-choice:hover .ob-action>span{transform:translate(2px,-2px)}
.ob-choice[aria-pressed=true] .ob-action{color:var(--at-accent)}
.ob-growing{transform:translateY(-18px) scale(.95);transform-origin:140px 177px;transition:transform .7s cubic-bezier(.2,.75,.2,1)}
.ob-flower{transform:scale(.7);transition:transform .65s cubic-bezier(.2,1.5,.4,1);transition-delay:var(--delay);transform-box:fill-box;transform-origin:center}
.ob-heart{transform:scale(.86);transform-box:fill-box;transform-origin:50% 90%;transition:transform .7s cubic-bezier(.2,1.5,.4,1)}
.ob-envelope{transform-origin:140px 210px;transition:transform .5s}
.ob-specks{opacity:.25;transition:opacity .5s}
.ob-choice:is(:hover,:focus-visible,[aria-pressed=true]) .ob-growing{transform:translateY(-30px) scale(1)}
.ob-choice:is(:hover,:focus-visible,[aria-pressed=true]) .ob-flower{transform:scale(1.1) rotate(12deg)}
.ob-choice:is(:hover,:focus-visible,[aria-pressed=true]) .ob-heart{transform:scale(1.1)}
.ob-choice:is(:hover,:focus-visible) .ob-envelope{transform:translateY(3px) rotate(-2deg)}
.ob-choice:is(:hover,:focus-visible,[aria-pressed=true]) .ob-specks{opacity:.85}
.ob-choice:is(:hover,:focus-visible) .ob-flame{transform-box:fill-box;transform-origin:center bottom;animation:ob-flicker .85s ease-in-out infinite alternate}
.ob-petal{position:absolute;left:50%;top:48%;width:9px;height:15px;border-radius:80% 0 80% 20%;background:var(--petal);opacity:0;pointer-events:none}
.ob-celebrate .ob-petal{animation:ob-petal-flight .9s var(--delay) ease-out both}
.ob-note{color:var(--at-muted);font:11px/1.7 'Jost',sans-serif;margin:24px 0 0}
@keyframes ob-petal-flight{0%{opacity:0;transform:translate(0,20px) scale(.5)}20%{opacity:.9}100%{opacity:0;transform:translate(var(--flight-x),var(--flight-y)) rotate(var(--spin)) scale(.6)}}
@keyframes ob-flicker{to{transform:scale(.8,1.1) rotate(8deg);opacity:.75}}
/* A single selection gesture: press, illustration flourish, then a settling seal. */
.ob-choice::after{content:'';position:absolute;inset:0;border:2px solid var(--petal);border-radius:inherit;opacity:0;pointer-events:none}
.ob-choice:active{transform:scale(.97)!important;transition:transform 90ms ease-out}
.ob-celebrate{animation:ob-select-rebound .55s cubic-bezier(.2,.8,.3,1) both}
.ob-celebrate::after{animation:ob-selection-ring .8s ease-out both}
.ob-celebrate .ob-selection{animation:ob-seal-pop .65s .12s both}
.ob-celebrate .ob-scene{animation:ob-art-lift .85s cubic-bezier(.2,.8,.3,1) both}
.ob-birthday.ob-celebrate .ob-growing{animation:ob-candle-wish 1s both}
.ob-anniversary.ob-celebrate .ob-growing{animation:ob-bouquet-sway 1.1s both}
.ob-love.ob-celebrate .ob-heart{animation:ob-heartbeat 1s both}
.ob-celebrate .ob-petal{width:10px;height:16px;animation:ob-petal-flight 1.1s var(--delay) ease-out both}
.ob-birthday .ob-petal:nth-of-type(2n){background:#edcb85;border-radius:2px;width:7px;height:10px}
.ob-anniversary .ob-petal:nth-of-type(2n){background:var(--paper)}
.ob-love .ob-petal{clip-path:polygon(50% 20%,65% 0,85% 0,100% 20%,100% 45%,50% 100%,0 45%,0 20%,15% 0,35% 0);border-radius:0}
@keyframes ob-select-rebound{0%{transform:scale(.97)}45%{transform:scale(1.015)}75%{transform:scale(.995)}100%{transform:scale(1)}}
@keyframes ob-selection-ring{0%{opacity:.8;transform:scale(.98)}100%{opacity:0;transform:scale(1.035,1.08)}}
@keyframes ob-seal-pop{0%{transform:scale(.4) rotate(-35deg)}55%{transform:scale(1.3) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@keyframes ob-art-lift{0%{transform:translateY(4px) scale(.88)}40%{transform:translateY(-7px) scale(1.18)}100%{transform:translateY(0) scale(1)}}
@keyframes ob-candle-wish{0%{transform:translateY(4px) scale(.8)}45%{transform:translateY(-46px) scale(1.1)}100%{transform:translateY(-30px) scale(1)}}
@keyframes ob-bouquet-sway{0%{transform:translateY(-18px) rotate(-10deg) scale(.85)}35%{transform:translateY(-38px) rotate(9deg) scale(1.08)}65%{transform:translateY(-30px) rotate(-5deg)}100%{transform:translateY(-30px) rotate(0) scale(1)}}
@keyframes ob-heartbeat{0%,100%{transform:scale(1.1)}25%{transform:scale(1.4)}45%{transform:scale(1)}65%{transform:scale(1.3)}}
.ob-still .ob-choice::after{animation:none!important}
.ob-still .ob-choice:active{transform:none!important}
@media(prefers-reduced-motion:reduce){.ob-choice::after{animation:none!important}.ob-choice:active{transform:none!important}}
.ob-still *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.occasion-bloom *{animation:none!important;transition:none!important}}
@media(max-width:760px){
  .occasion-bloom{padding:0 0 12px}
  .occasion-bloom .at-step-heading{margin-bottom:18px!important}
  .ob-choices{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:0}
  .ob-choice{display:grid;grid-template-columns:76px minmax(0,1fr) 26px;grid-template-rows:auto auto auto;column-gap:12px;row-gap:4px;align-items:center;text-align:left;padding:16px 12px;border-radius:20px;min-height:120px;box-sizing:border-box;box-shadow:none}
  .ob-scene{grid-column:1;grid-row:1 / 4;width:76px;height:90px;margin:0}
  .ob-eyebrow{grid-column:2;grid-row:1;align-self:end;font-size:9px;letter-spacing:.12em}
  .ob-title{grid-column:2;grid-row:2;font-size:27px;line-height:1.08;margin:0;overflow-wrap:anywhere}
  .ob-description{grid-column:2;grid-row:3;align-self:start;font-size:12px;line-height:1.45;min-height:0;max-width:none;margin:0}
  .ob-selection{position:static;grid-column:3;grid-row:1 / 4;width:24px;height:24px}
  .ob-action,.ob-deco{display:none}
  .ob-choice:hover,.ob-choice:focus-visible{transform:none}
  .ob-choice[aria-pressed=true]{box-shadow:inset 3px 0 0 var(--petal)}
  .ob-note{font-size:12px;line-height:1.5;margin-top:16px}
}
@media(max-width:360px){
  .ob-choice{grid-template-columns:56px minmax(0,1fr) 24px;column-gap:9px;padding:12px 10px}
  .ob-scene{width:56px;height:78px}
  .ob-title{font-size:24px}
}