body {
      font-family: 'Roboto', sans-serif;
    }
    /* Custom step pane visibility */
    .step-pane {
      display: none;
      opacity: 0;
      transition: opacity 0.2s ease-in-out;
    }
    .step-pane.active {
      display: block;
      opacity: 1;
      animation: planner-step-enter 320ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
    }

    #step-intro.active {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      justify-content: center;
    }

    @keyframes planner-step-enter {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes planner-check-pop {
      from { opacity: 0; transform: scale(0.65); }
      75% { opacity: 1; transform: scale(1.12); }
      to { transform: scale(1); }
    }

    .planner-shell { display: flex; flex-direction: column; gap: 0.75rem; }
    .planner-shell.is-step-five { max-width: 72rem; }
    .planner-card { min-height: 620px; }
    #step-5.active { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; }
    .stepper-progress { padding: 0; }
    #stepper-nav[hidden] { display: none !important; }

    .stepper-progress-track {
      height: 5px;
      overflow: hidden;
      border-radius: 999px;
      background: #E5E5E5;
    }

    .stepper-progress-fill {
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: #C48D31;
      transition: width 320ms cubic-bezier(0.2, 0.75, 0.25, 1);
    }

    .success-mark { perspective: 500px; animation: planner-check-pop 360ms ease-out both; }
    .success-coin-face {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
      border: 1px solid #C48D31;
      border-radius: 9999px;
      background: #C48D31;
      color: #fff;
      box-shadow: 0 5px 12px rgba(0, 37, 63, 0.16);
      transform-style: preserve-3d;
      animation: success-coin-hover 4s ease-in-out 360ms infinite;
    }

    @keyframes success-coin-hover {
      0%, 100% { transform: translateY(0) rotateY(0deg); box-shadow: 0 5px 12px rgba(0, 37, 63, 0.16); }
      35% { transform: translateY(-4px) rotateY(10deg); box-shadow: 0 10px 16px rgba(0, 37, 63, 0.13); }
      70% { transform: translateY(0) rotateY(-8deg); box-shadow: 0 5px 12px rgba(0, 37, 63, 0.16); }
    }

    .step-success-pane.active {
      position: relative;
      display: flex;
      min-height: 620px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      isolation: isolate;
      padding: 2.5rem 1.5rem 12rem;
      text-align: center;
    }

    .success-content { position: relative; z-index: 2; width: min(100%, 36rem); margin-inline: auto; }

    .success-signature {
      position: absolute;
      z-index: 2;
      bottom: 2.5rem;
      left: clamp(1.25rem, 7vw, 5rem);
      max-width: min(43%, 19rem);
      color: #505047;
      font: 600 clamp(1.7rem, 3vw, 2.5rem)/0.95 'Caveat', cursive;
      text-align: left;
      transform: rotate(-8deg);
    }

    .success-floral-art {
      position: absolute;
      z-index: 2;
      right: 0.5rem;
      bottom: 0;
      width: clamp(125px, 18vw, 220px);
      height: clamp(180px, 24vw, 265px);
      object-fit: contain;
      object-position: bottom right;
      pointer-events: none;
      user-select: none;
    }

    .planner-shell.is-success .planner-card { position: relative; z-index: 31; }
    .success-confetti-stage { position: fixed; z-index: 30; top: var(--success-confetti-top, 7.25rem); right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; }
    .success-confetti-field { position: absolute; inset: 0 3%; display: flex; align-items: flex-start; justify-content: space-between; }
    .success-confetti-piece { position: relative; top: -18px; flex: 0 0 auto; border-radius: 2px; opacity: 0; }

    /* CSS burst adapted from the first demo at https://purecss.com/examples/confetti/ */
    .planner-shell.is-success .success-confetti-piece {
      animation: success-confetti-fall var(--confetti-duration, 1.8s) linear var(--confetti-delay, 0s) 1 both;
    }

    .success-confetti-piece:nth-child(8n+1) { background: #ff6b6b; }
    .success-confetti-piece:nth-child(8n+2) { background: #38bdf8; }
    .success-confetti-piece:nth-child(8n+3) { background: #ffd444; }
    .success-confetti-piece:nth-child(8n+4) { background: #b8ff57; }
    .success-confetti-piece:nth-child(8n+5) { background: #f472b6; }
    .success-confetti-piece:nth-child(8n+6) { background: #57d9a3; }
    .success-confetti-piece:nth-child(8n+7) { background: #c084fc; }
    .success-confetti-piece:nth-child(8n) { background: #ff9040; }

    .success-confetti-piece:nth-child(5n+1) { width: 8px; height: 12px; }
    .success-confetti-piece:nth-child(5n+2) { width: 12px; height: 8px; border-radius: 50%; }
    .success-confetti-piece:nth-child(5n+3) { width: 6px; height: 14px; }
    .success-confetti-piece:nth-child(5n+4) { width: 14px; height: 6px; }
    .success-confetti-piece:nth-child(5n) { width: 9px; height: 9px; border-radius: 50%; }

    .success-confetti-piece:nth-child(7n+1) { --confetti-duration: 3.2s; }
    .success-confetti-piece:nth-child(7n+2) { --confetti-duration: 2.6s; }
    .success-confetti-piece:nth-child(7n+3) { --confetti-duration: 3.6s; }
    .success-confetti-piece:nth-child(7n+4) { --confetti-duration: 2.9s; }
    .success-confetti-piece:nth-child(7n+5) { --confetti-duration: 3.8s; }
    .success-confetti-piece:nth-child(7n+6) { --confetti-duration: 3.1s; }
    .success-confetti-piece:nth-child(7n) { --confetti-duration: 3.4s; }

    .success-confetti-piece:nth-child(11n+1) { --confetti-delay: 0s; }
    .success-confetti-piece:nth-child(11n+2) { --confetti-delay: 0.1s; }
    .success-confetti-piece:nth-child(11n+3) { --confetti-delay: 0.2s; }
    .success-confetti-piece:nth-child(11n+4) { --confetti-delay: 0.3s; }
    .success-confetti-piece:nth-child(11n+5) { --confetti-delay: 0.4s; }
    .success-confetti-piece:nth-child(11n+6) { --confetti-delay: 0.5s; }
    .success-confetti-piece:nth-child(11n+7) { --confetti-delay: 0.6s; }
    .success-confetti-piece:nth-child(11n+8) { --confetti-delay: 0.7s; }
    .success-confetti-piece:nth-child(11n+9) { --confetti-delay: 0.8s; }
    .success-confetti-piece:nth-child(11n+10) { --confetti-delay: 0.9s; }
    .success-confetti-piece:nth-child(11n) { --confetti-delay: 1s; }

    .success-confetti-piece:nth-child(3n+2) { margin-left: 1.4%; }
    .success-confetti-piece:nth-child(3n) { margin-right: 1.8%; }

    @keyframes success-confetti-fall {
      0% { transform: translateY(0) rotate(0deg) scaleX(1); opacity: 1; }
      25% { transform: translateY(12vh) rotate(90deg) scaleX(0); }
      50% { transform: translateY(40vh) rotate(180deg) scaleX(-1); }
      75% { transform: translateY(78vh) rotate(270deg) scaleX(0); opacity: 1; }
      100% { transform: translateY(110vh) rotate(360deg) scaleX(1); opacity: 0; }
    }

    .wizard-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1rem 2.5rem 1.5rem;
      border-top: 1px solid #E5E5E5;
    }

    #wizard-actions[hidden] { display: none !important; }

    .wizard-actions button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      min-height: 44px;
      padding: 0.65rem 1rem;
      border: 1px solid #00253F;
      border-radius: 4px;
      font-size: 0.875rem;
      font-weight: 600;
      transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
    }

    .confetti-replay {
      display: inline-flex;
      align-items: center;
      align-self: center;
      justify-content: center;
      gap: 0.5rem;
      min-height: 40px;
      padding: 0.5rem 0.85rem;
      border: 1px solid #E5E5E5;
      border-radius: 4px;
      background: #fff;
      color: #505960;
      font-size: 0.8rem;
      font-weight: 600;
      transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
    }

    .confetti-replay:hover { border-color: #C48D31; background: #FDF9F2; color: #00253F; }
    .confetti-replay:focus-visible { outline: 3px solid rgba(196, 141, 49, 0.45); outline-offset: 2px; }
    .confetti-replay[hidden] { display: none !important; }
    .planner-shell.is-success .confetti-replay { position: relative; z-index: 31; }

    .wizard-action-back { color: #00253F; background: #fff; }
    .wizard-action-back:hover { background: #F7F7F7; }
    .wizard-action-next { color: #fff; background: #C48D31; border-color: #C48D31 !important; }
    .wizard-action-next:hover { background: #B07B24; }

    .service-package-icon { display: block; width: 2.5rem; height: 2.5rem; }
    .service-package-icon svg { display: block; width: 100%; height: 100%; }

    .project-type-card,
    .need-item-card,
    .style-card {
      transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }

    .project-type-card:focus-visible,
    .need-item-card:focus-visible,
    .style-card:focus-visible {
      outline: 3px solid rgba(196, 141, 49, 0.45);
      outline-offset: 2px;
    }

    .project-type-card.is-selected,
    .need-item-card.is-selected,
    .style-card.is-selected,
    label.is-selected {
      box-shadow: 0 0 0 1px rgba(196, 141, 49, 0.18);
    }

    .check-badge:not(.hidden),
    .need-item-card > span.absolute:not(.hidden),
    .style-card > span.absolute:not(.hidden) {
      animation: planner-check-pop 180ms ease-out both;
    }

    .style-photo { display: block; width: 100%; aspect-ratio: 1.35 / 1; object-fit: cover; }

    #project-files:focus-visible + #project-dropzone {
      outline: 3px solid rgba(196, 141, 49, 0.45);
      outline-offset: 2px;
    }

    .project-dropzone.is-dragging {
      border-color: #C48D31;
      background: #fcfaf6;
    }

    .upload-error { color: #B42318; }

    #project-file-list[hidden],
    #project-upload-summary[hidden],
    #project-add-more[hidden] {
      display: none !important;
    }

    .project-upload-item { min-height: 64px; }
    .project-file-thumb { width: 42px; height: 42px; }
    .project-file-details { flex: 1; }

    .project-file-type {
      display: inline-flex;
      width: 40px;
      height: 48px;
      align-items: center;
      justify-content: center;
      border: 1px solid #E5E5E5;
      border-radius: 4px;
      background: #F7F7F7;
      color: #00253F;
      font-size: 10px;
      font-weight: 700;
    }

    .project-file-remove {
      width: 26px;
      height: 26px;
      font-size: 20px;
      line-height: 1;
    }

    .project-summary-pdf {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px;
      background: #F7F7F7;
    }

    .project-summary-name {
      width: 100%;
      overflow: hidden;
      color: #505960;
      font-size: 10px;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    @media (hover: hover) {
      .project-type-card:hover,
      .need-item-card:hover,
      .style-card:hover {
        transform: translateY(-2px);
      }

      .step-pane button:hover {
        transform: translateY(-1px);
      }
    }

    @media (max-width: 767px) {
      main {
        align-items: flex-start;
        padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)) !important;
      }

      .step-pane {
        padding: 1.25rem;
      }

      .planner-card { min-height: 540px; }
      .stepper-progress { padding: 0; }

      .step-success-pane.active { min-height: 620px; padding: 2rem 1.25rem 11rem; }
      .success-signature { bottom: 2rem; left: 1.25rem; max-width: 55%; font-size: clamp(1.55rem, 7vw, 2rem); }
      .success-floral-art { right: 0; width: clamp(105px, 34vw, 150px); height: clamp(160px, 48vw, 205px); }

      .step-pane [class~="my-8"] { margin-block: 1.25rem; }
      .step-pane [class~="gap-6"] { gap: 0.75rem; }

      .project-type-card {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        align-items: center;
        column-gap: 0.75rem;
      }

      .project-type-card > div:first-child {
        grid-row: span 2;
        width: 76px;
        height: 72px;
        aspect-ratio: auto;
        margin-bottom: 0;
      }

      .wizard-actions:not([hidden]) {
        position: fixed;
        z-index: 50;
        right: 0;
        bottom: 0;
        left: 0;
        justify-content: stretch;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        border-top: 1px solid #E5E5E5;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 -6px 20px rgba(0, 37, 63, 0.08);
      }

      .wizard-actions button {
        flex: 1 1 0;
        min-height: 48px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #confetti-replay { display: none !important; }

      .step-pane.active,
      .success-mark,
      .success-coin-face,
      .check-badge:not(.hidden),
      .need-item-card > span.absolute:not(.hidden),
      .style-card > span.absolute:not(.hidden) {
        animation: none;
      }

      .planner-shell.is-success .success-confetti-piece { animation: none; }

      .step-pane,
      .step-pane button,
      .stepper-progress-fill,
      .project-type-card,
      .need-item-card,
      .style-card {
        transition-duration: 0.01ms !important;
      }
    }