.auth-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); width: min(1080px, 100%); }
.auth-layout > .auth-card { width: 100%; }
.auth-layout .auth-card h1 { font-size: clamp(28px, 3vw, 36px); }
.promise-garden { --garden-duration: 14s; min-width: 0; margin: 0; }
.promise-garden-scene { display: block; width: 100%; height: auto; overflow: visible; }
.promise-garden figcaption { margin: 20px 0 0; text-align: center; }
.promise-garden h2 { margin: 0; color: var(--accent-2); font-family: var(--serif); font-size: clamp(24px, 2.5vw, 30px); font-weight: 560; letter-spacing: -.035em; }
.promise-garden figcaption p { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.promise-garden-footer { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 24px 0 0; }
.promise-garden-steps { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.promise-garden-steps li { position: relative; padding: 4px 0; border-bottom: 2px solid transparent; color: var(--muted); font-size: 12px; }
.promise-garden-steps li + li::before { position: absolute; top: 50%; left: -15px; width: 7px; height: 1px; background: var(--line-strong); content: ""; }
.promise-garden-toggle { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); color: var(--ink-soft); background: transparent; font-size: 12px; }
.promise-garden-toggle:hover { border-color: var(--accent); background: var(--accent-soft); }

.invite-story-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: center; gap: 36px; width: min(1160px, 100%); }
.invite-story-layout > .invite-contract-form { min-width: 0; width: 100%; }
.invite-story-layout .promise-garden h2 { font-size: 24px; }
.invite-story-layout .promise-garden figcaption { margin-top: 8px; }
.invite-story-layout .promise-garden figcaption p { font-size: 12px; }
.invite-story-layout .promise-garden-footer { gap: 16px; margin-top: 16px; }
.claim-contract-preview .promise-garden { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(0, 2fr); align-items: center; column-gap: 12px; margin-top: 22px; }
.claim-contract-preview .promise-garden figcaption { margin: 0; text-align: left; }
.claim-contract-preview .promise-garden h2 { font-size: 19px; }
.claim-contract-preview .promise-garden figcaption p { margin-top: 6px; font-size: 11px; }
.claim-contract-preview .promise-garden-footer { grid-column: 1 / -1; gap: 16px; margin-top: 4px; }

@media (min-width: 681px) {
  .invite-story-layout .invite-contract-cover { min-height: 480px; }
  .invite-story-layout .cover-band { top: 28%; padding: 18px 8%; }
  .invite-story-layout .cover-band strong { font-size: clamp(28px, 3.4vw, 44px); }
}
@media (max-width: 960px) {
  .invite-story-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; width: min(760px, 100%); }
  .invite-story-layout > .promise-garden { width: min(400px, 100%); justify-self: center; }
  .invite-story-layout .promise-garden-scene { max-width: 260px; margin: 0 auto; }
  .invite-story-layout .promise-garden-footer { margin-top: 8px; }
}
@media (max-width: 680px) {
  .invite-story-layout { gap: 16px; }
  .invite-story-layout .cover-band { top: 26%; min-height: 48%; }
  .invite-story-layout .promise-garden-scene { max-width: 220px; }
  .invite-story-layout .promise-garden h2 { font-size: 21px; }
  .invite-story-layout .promise-garden figcaption { margin-top: 0; }
  .invite-story-layout .promise-garden figcaption p { margin-top: 6px; }
}

/* One shared timeline: agree (0–22%), nurture (22–66%), witness (66–94%).
   Fade the whole scene at the loop boundary so a new seed starts a new story. */
.garden-cycle { animation: garden-cycle var(--garden-duration) linear infinite; }
.garden-cloud { animation: garden-cloud var(--garden-duration) ease-in-out infinite; }
.garden-seed { opacity: 0; animation: garden-seed var(--garden-duration) ease-in-out infinite; }
.garden-watering { transform-origin: 226px 233px; animation: garden-watering var(--garden-duration) ease-in-out infinite; }
.garden-water { opacity: 0; animation: garden-water var(--garden-duration) linear infinite; }
.garden-drop { animation: garden-drop .7s linear infinite; }
.garden-plant { transform-origin: 282px 282px; animation: garden-plant var(--garden-duration) ease-in-out infinite; }
.garden-flower { transform-box: fill-box; transform-origin: center; animation: garden-flower var(--garden-duration) ease-in-out infinite; }
.garden-witness { transform-box: fill-box; transform-origin: center bottom; animation: garden-witness var(--garden-duration) ease-in-out infinite; }
.garden-sparkles { opacity: 0; animation: garden-sparkles var(--garden-duration) linear infinite; }
.garden-step-agree { animation: garden-step-agree var(--garden-duration) linear infinite; }
.garden-step-care { animation: garden-step-care var(--garden-duration) linear infinite; }
.garden-step-witness { animation: garden-step-witness var(--garden-duration) linear infinite; }
.promise-garden[data-paused="true"] *, .promise-garden[data-paused="true"] *::before { animation-play-state: paused !important; }

@keyframes garden-cycle { 0%, 100% { opacity: 0; } 5%, 94% { opacity: 1; } }
@keyframes garden-cloud { 0%, 100% { transform: translateX(-5px); } 50% { transform: translateX(8px); } }
@keyframes garden-seed {
  0%, 7% { opacity: 0; transform: translate(0, 0) rotate(0); }
  8%, 11% { opacity: 1; transform: translate(0, 0); }
  16% { opacity: 1; transform: translate(40px, 4px); }
  21% { opacity: 1; transform: translate(67px, 74px); }
  24%, 100% { opacity: 0; transform: translate(67px, 78px); }
}
@keyframes garden-watering { 0%, 23%, 60%, 100% { transform: rotate(0); } 29%, 36%, 44%, 53% { transform: rotate(15deg); } 40%, 48% { transform: rotate(9deg); } }
@keyframes garden-water { 0%, 28%, 57%, 100% { opacity: 0; } 31%, 53% { opacity: 1; } }
@keyframes garden-drop { from { transform: translate(-2px, -3px); } to { transform: translate(3px, 8px); } }
@keyframes garden-plant { 0%, 30% { transform: scale(0); } 42% { transform: scale(.3); } 62%, 100% { transform: scale(1); } }
@keyframes garden-flower { 0%, 52% { transform: scale(0); } 67% { transform: scale(1.08); } 72%, 100% { transform: scale(1); } }
@keyframes garden-witness { 0%, 69% { opacity: 0; transform: translateY(6px) scale(.8); } 76%, 100% { opacity: 1; transform: none; } }
@keyframes garden-sparkles { 0%, 64%, 87%, 100% { opacity: 0; } 72%, 80% { opacity: 1; } }
@keyframes garden-step-agree { 0%, 24% { color: var(--accent); border-color: var(--accent); } 25%, 100% { color: var(--muted); border-color: transparent; } }
@keyframes garden-step-care { 0%, 24%, 67%, 100% { color: var(--muted); border-color: transparent; } 25%, 66% { color: var(--accent); border-color: var(--accent); } }
@keyframes garden-step-witness { 0%, 66%, 100% { color: var(--muted); border-color: transparent; } 67%, 96% { color: var(--accent); border-color: var(--accent); } }

@media (max-width: 820px) {
  .auth-with-story { padding: 24px 20px 36px; }
  .auth-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; width: min(520px, 100%); }
  .promise-garden-scene { max-width: 370px; margin: 0 auto; }
  .promise-garden figcaption { margin-top: 0; }
  .promise-garden h2 { font-size: 24px; }
  .promise-garden figcaption p { margin-top: 6px; font-size: 12px; }
  .promise-garden-footer { margin-top: 10px; }
  .auth-layout .auth-card { padding: 28px; }
  .auth-layout .auth-card h1 { font-size: 30px; }
}
@media (max-width: 420px) {
  .auth-with-story { padding: 12px 16px 24px; }
  .auth-layout { gap: 18px; }
  .promise-garden-scene { max-width: 280px; }
  .promise-garden h2 { font-size: 22px; }
  .auth-layout .auth-card { padding: 22px; }
  .auth-layout .auth-card h1 { margin-top: 18px; font-size: 27px; }
}
/* Keep the completed illustration visible when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  .promise-garden *, .promise-garden *::before { animation: none !important; }
  .promise-garden-toggle { display: none; }
  .promise-garden-steps li { color: var(--accent); }
}