:root{
  --beige:#efe5d8;
  --paper:#f8f1e8;
  --mauve:#4c3d42;
  --mauve-soft:#75666b;
  --gold:#c89d5a;
  --line:rgba(76,61,66,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--beige);
  color:var(--mauve);
  font-family:"Montserrat",Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
}

button,input,textarea{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}

.topbar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:5;
  padding:28px 34px;
}

.logo{
  display:inline-block;
  text-decoration:none;
}

.logo strong{
  font-family:"Josefin Slab",Georgia,serif;
  font-size:34px;
  letter-spacing:.17em;
  color:var(--gold);
  font-weight:600;
}

.tracker-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:110px 24px 80px;
}

.tracker-wrap{
  width:min(760px,100%);
}

.step-count{
  margin-bottom:28px;
  color:var(--mauve-soft);
  font-size:14px;
  font-weight:600;
}

.form-step{display:none}

.form-step.active{
  display:block;
  animation:fadeUp .35s ease both;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

.eyebrow{
  margin:0 0 14px;
  color:var(--gold);
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}

h1,h2,h3{
  margin:0;
  font-family:"Ovo",Georgia,serif;
  font-weight:400;
}

h1{
  max-width:720px;
  font-size:clamp(48px,7vw,76px);
  line-height:1.02;
  letter-spacing:-.025em;
}

.order-field{
  display:flex;
  align-items:center;
  margin-top:42px;
  border-bottom:2px solid var(--mauve);
}

.order-field span{
  padding-right:10px;
  color:var(--gold);
  font-family:"Ovo",serif;
  font-size:34px;
}

input,textarea{
  width:100%;
  border:0;
  border-bottom:1px solid rgba(76,61,66,.42);
  border-radius:0;
  outline:none;
  background:transparent;
  color:var(--mauve);
  font-size:17px;
}

.order-field input{
  border:0;
  padding:4px 0 9px;
  font-size:34px;
}

.large-input{
  margin-top:42px;
  padding:10px 0;
  font-size:28px;
  border-bottom:2px solid var(--mauve);
}

input:focus,textarea:focus{
  border-color:var(--gold);
}

.main-button{
  margin-top:30px;
  border:0;
  background:var(--mauve);
  color:#fffaf4;
  padding:15px 20px;
  min-width:180px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  font-size:15px;
  font-weight:600;
}

.main-button:disabled{
  cursor:wait;
  opacity:.92;
}

.main-button.is-loading{
  justify-content:center;
  gap:11px;
}

.button-spinner{
  width:18px;
  height:18px;
  flex:0 0 18px;
  border:2px solid rgba(255,250,244,.38);
  border-top-color:#fffaf4;
  border-radius:50%;
  animation:buttonSpin .75s linear infinite;
}

.loading-message{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--mauve);
}

.loading-message::before{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:var(--gold);
  animation:loadingPulse 1s ease-in-out infinite;
}

@keyframes buttonSpin{to{transform:rotate(360deg)}}

@keyframes loadingPulse{
  0%,100%{opacity:.35;transform:scale(.82)}
  50%{opacity:1;transform:scale(1)}
}

.back-button{
  border:0;
  padding:0;
  margin:0 0 28px;
  background:transparent;
  color:var(--mauve);
  font-size:14px;
  font-weight:500;
}

.hint,.message{
  margin:15px 0 0;
  font-size:14px;
  color:var(--mauve-soft);
}

.message.error{color:#8a4a4d}
.message.success{color:var(--mauve)}

.status-main{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  grid-template-areas:
    "status-icon status-kicker"
    "status-title status-title"
    "status-summary status-summary";
  column-gap:28px;
  row-gap:12px;
  align-items:center;
  padding:34px;
  text-align:left;
  border:1px solid rgba(200,157,90,.58);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.68),rgba(244,230,203,.52));
  box-shadow:0 18px 48px rgba(76,61,66,.09);
}

.status-main:before{
  content:"";
  position:absolute;
  z-index:-1;
  width:180px;
  height:180px;
  top:-105px;
  right:-55px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(200,157,90,.22),rgba(200,157,90,0) 70%);
  animation:statusGlow 3.8s ease-in-out infinite;
}

.status-icon-wrap{
  position:relative;
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
}

.large-icon{
  position:relative;
  z-index:2;
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border:1px solid rgba(200,157,90,.65);
  border-radius:50%;
  background:var(--paper);
  color:var(--gold);
  box-shadow:0 9px 22px rgba(76,61,66,.12);
  animation:statusFloat 3s ease-in-out infinite;
}

.status-orbit{
  position:absolute;
  inset:0;
  border:1px dashed rgba(200,157,90,.55);
  border-radius:50%;
  animation:statusOrbit 14s linear infinite;
}

.status-orbit:after{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  top:5px;
  left:11px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 5px rgba(200,157,90,.13);
}

.large-icon svg{
  width:29px;
  height:29px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.large-icon svg *{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation:draw 1.1s ease forwards;
}

@keyframes draw{to{stroke-dashoffset:0}}

@keyframes statusFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

@keyframes statusOrbit{to{transform:rotate(360deg)}}

@keyframes statusGlow{
  0%,100%{transform:scale(.92);opacity:.65}
  50%{transform:scale(1.12);opacity:1}
}

.status-copy{
  position:relative;
  z-index:1;
}

.current-status-label{
  margin:0 0 8px;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--mauve);
  font-size:12px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.current-status-label span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 0 rgba(200,157,90,.38);
  animation:statusPulse 2s ease-out infinite;
}

@keyframes statusPulse{
  0%{box-shadow:0 0 0 0 rgba(200,157,90,.42)}
  70%,100%{box-shadow:0 0 0 9px rgba(200,157,90,0)}
}

.status-main .eyebrow{
  grid-area:status-kicker;
  align-self:center;
  margin:0;
}

.status-main > .large-icon{
  grid-area:status-icon;
}

.status-main h2{
  grid-area:status-title;
  margin-top:4px;
  font-size:clamp(42px,6vw,66px);
  line-height:1.03;
  letter-spacing:-.025em;
}

.status-summary{
  grid-area:status-summary;
  max-width:620px;
  margin:0;
  font-size:18px;
}

.status-description{
  max-width:720px;
  margin:13px 0 0;
  color:var(--mauve-soft);
  font-size:15px;
  line-height:1.65;
}

.package-delay-notice{
  margin-top:28px;
  padding:19px 21px;
  border-left:4px solid var(--gold);
  background:rgba(248,241,232,.78);
  box-shadow:0 9px 25px rgba(76,61,66,.055);
}

.package-delay-notice strong{
  display:block;
  color:var(--gold);
  font-size:12px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.package-delay-notice time{
  display:block;
  margin-top:3px;
  color:var(--mauve-soft);
  font-size:13px;
  font-weight:600;
}

.package-delay-notice p{
  margin:7px 0 0;
  color:var(--mauve);
  font-size:15px;
  line-height:1.65;
}

.details{
  margin-top:40px;
  padding:24px 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.details small,
.eta-card small{
  display:block;
  margin-bottom:6px;
  color:var(--mauve-soft);
  font-size:12px;
  font-weight:600;
}

.details strong{
  font-family:"Ovo",serif;
  font-size:20px;
  font-weight:400;
}

.details a{
  grid-column:1/-1;
  width:100%;
  box-sizing:border-box;
  margin-top:10px;
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:var(--mauve);
  color:#fff;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  text-align:center;
  box-shadow:0 8px 22px rgba(76,61,66,.16);
  transition:transform .2s ease, background .2s ease;
}

.details a:hover,
.details a:focus-visible{
  background:#5b474e;
  transform:translateY(-1px);
}

.details a[hidden]{
  display:none!important;
}


.eta-journey{
  position:relative;
  margin-top:38px;
  padding:24px 0 6px;
  display:grid;
  grid-template-columns:.9fr 1.3fr;
  gap:26px;
}

.eta-track{
  position:absolute;
  top:37px;
  left:14px;
  right:14px;
  height:2px;
  overflow:hidden;
  background:rgba(76,61,66,.15);
}

.eta-flow{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(200,157,90,.25),
    rgba(200,157,90,.95),
    rgba(200,157,90,.25)
  );
  background-size:45% 100%;
  background-repeat:no-repeat;
  animation:etaFlow 2.8s linear infinite;
}

@keyframes etaFlow{
  from{background-position:-55% 0}
  to{background-position:155% 0}
}

.eta-stop{
  position:relative;
  z-index:1;
  min-width:0;
  padding-top:35px;
}

.eta-dot{
  position:absolute;
  top:0;
  left:0;
  width:28px;
  height:28px;
  border:2px solid var(--gold);
  border-radius:50%;
  background:var(--beige);
}

.eta-stop-now .eta-dot{
  background:var(--mauve);
  border-color:var(--mauve);
  box-shadow:0 0 0 7px rgba(200,157,90,.11);
  animation:etaPulse 2.4s ease-in-out infinite;
}

.eta-stop-next .eta-dot:after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:var(--gold);
}

@keyframes etaPulse{
  0%,100%{box-shadow:0 0 0 6px rgba(200,157,90,.08)}
  50%{box-shadow:0 0 0 11px rgba(200,157,90,.025)}
}

.eta-stop small{
  display:block;
  min-height:38px;
  margin-bottom:7px;
  color:var(--mauve-soft);
  font-size:12px;
  line-height:1.4;
  font-weight:600;
}

.eta-stop strong{
  display:block;
  color:var(--mauve);
  font-family:"Ovo",Georgia,serif;
  font-size:19px;
  line-height:1.25;
  font-weight:400;
}

.eta-value{
  display:block;
  margin-top:6px;
  color:var(--mauve);
  font-size:14px;
  line-height:1.45;
}

.eta-stop-next .eta-value{
  color:var(--gold);
}

.timeline-alert,
.extra{
  grid-column:1/-1;
  margin:8px 0 0;
  font-size:14px;
}

.timeline-alert{
  padding-top:16px;
  border-top:1px solid var(--line);
  color:#76584e;
}

.extra{
  color:var(--mauve-soft);
}

.progress-section{
  margin-top:38px;
}

.progress-top{
  display:flex;
  justify-content:space-between;
  margin-bottom:18px;
  font-size:13px;
  font-weight:600;
  color:var(--mauve-soft);
}

.timeline{
  list-style:none;
  margin:0;
  padding:0;
}

.timeline li{
  min-height:54px;
  display:grid;
  grid-template-columns:34px 1fr;
  gap:14px;
  position:relative;
}

.timeline li:not(:last-child):after{
  content:"";
  position:absolute;
  top:29px;
  bottom:0;
  left:14px;
  width:1px;
  background:rgba(76,61,66,.16);
}

.timeline li.done:not(:last-child):after{
  background:var(--gold);
}

.dot{
  position:relative;
  z-index:1;
  width:30px;
  height:30px;
  border:1px solid rgba(76,61,66,.22);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--beige);
  color:var(--gold);
}

.dot svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.timeline li.current .dot,
.timeline li.done .dot{
  background:var(--mauve);
  border-color:var(--mauve);
}

.timeline li.future{opacity:.48}

.timeline-copy{
  padding-top:2px;
}

.timeline-copy strong{
  display:block;
  font-family:"Ovo",serif;
  font-size:18px;
  font-weight:400;
}

.timeline-copy small{
  display:block;
  margin-top:2px;
  font-size:13px;
}

.timing-note{
  margin:32px 0 0;
  font-size:13px;
  color:var(--mauve-soft);
}

.contact-section{
  padding:58px 24px 70px;
  border-top:1px solid var(--line);
  background:var(--paper);
}

.contact-inner{
  width:min(900px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:52px;
  align-items:start;
}

.contact-side{
  min-width:0;
}

.contact-photo{
  margin:0 0 24px;
  width:min(250px,100%);
}

.contact-photo img{
  display:block;
  width:100%;
  aspect-ratio:3 / 4;
  object-fit:cover;
  border-radius:2px;
}

.contact-copy h3{
  font-size:36px;
  line-height:1.05;
}

.contact-form label{
  display:block;
  margin-bottom:20px;
}

.contact-form label > span{
  display:block;
  margin-bottom:5px;
  font-size:13px;
  font-weight:600;
}

.contact-form input,
.contact-form textarea{
  padding:10px 0;
}

.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.contact-form em{
  font-style:normal;
  opacity:.62;
}

textarea{resize:vertical}

.contact-button{
  border:0;
  background:var(--mauve);
  color:#fffaf4;
  padding:13px 18px;
  font-size:14px;
  font-weight:600;
}

.honeypot{
  position:absolute!important;
  left:-10000px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}

@media(max-width:700px){
  .topbar{padding:22px 20px}

  .tracker-page{
    padding:100px 20px 64px;
    align-items:start;
  }

  h1,.status-main h2{
    font-size:clamp(44px,14vw,64px);
  }

  .status-main{
    grid-template-columns:1fr;
    grid-template-areas:
      "status-icon"
      "status-kicker"
      "status-title"
      "status-summary";
    gap:10px;
    padding:27px 23px 29px;
    border-radius:18px;
  }

  .status-icon-wrap{
    width:72px;
    height:72px;
  }

  .large-icon{
    width:59px;
    height:59px;
  }

  .order-field{
    margin-top:34px;
  }

  .large-input{
    margin-top:34px;
    font-size:23px;
  }

  .details{
    grid-template-columns:1fr 1fr;
  }

  .eta-journey{
    grid-template-columns:1fr;
    gap:24px;
    padding-left:38px;
  }

  .eta-track{
    top:14px;
    bottom:20px;
    left:13px;
    right:auto;
    width:2px;
    height:auto;
  }

  .eta-flow{
    background:linear-gradient(
      180deg,
      rgba(200,157,90,.25),
      rgba(200,157,90,.95),
      rgba(200,157,90,.25)
    );
    background-size:100% 45%;
    background-repeat:no-repeat;
    animation:etaFlowVertical 2.8s linear infinite;
  }

  @keyframes etaFlowVertical{
    from{background-position:0 -55%}
    to{background-position:0 155%}
  }

  .eta-stop{
    padding-top:0;
    min-height:72px;
  }

  .eta-dot{
    top:0;
    left:-38px;
  }

  .eta-stop small{
    min-height:0;
    margin-bottom:4px;
  }

  .timeline-alert,
  .extra{
    grid-column:1;
    margin-left:-38px;
  }

  .contact-inner{
    grid-template-columns:1fr;
    gap:28px;
  }

  .contact-side{
    display:grid;
    grid-template-columns:110px 1fr;
    gap:20px;
    align-items:end;
  }

  .contact-photo{
    width:110px;
    margin:0;
  }

  .contact-copy h3{
    font-size:31px;
  }

  .two{
    grid-template-columns:1fr;
    gap:0;
  }
}


@media (prefers-reduced-motion:reduce){
  .eta-flow,
  .eta-stop-now .eta-dot,
  .status-main:before,
  .status-orbit,
  .large-icon,
  .current-status-label span{
    animation:none!important;
  }

  .eta-flow{
    background:var(--gold);
    opacity:.5;
  }
}
.adoption-actions{
  margin-top:28px;
  padding:27px 28px;
  border:1px solid rgba(200,157,90,.58);
  background:rgba(248,241,232,.72);
  box-shadow:0 12px 32px rgba(76,61,66,.06);
}

.adoption-actions__eyebrow{
  margin:0 0 7px;
  color:var(--gold);
  font-size:12px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.adoption-actions h3{
  font-size:clamp(28px,4.5vw,40px);
  line-height:1.08;
}

.adoption-actions__copy{
  max-width:660px;
  margin:11px 0 0;
  color:var(--mauve-soft);
  font-size:15px;
  line-height:1.6;
}

.adoption-actions__buttons{
  margin-top:19px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.adoption-action{
  min-height:49px;
  padding:13px 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fffaf4;
  background:var(--mauve);
  font-size:14px;
  font-weight:700;
  line-height:1.35;
  text-align:center;
  text-decoration:none;
  transition:transform .2s ease,background .2s ease;
}

.adoption-action:hover,
.adoption-action:focus-visible{
  background:#5b474e;
  transform:translateY(-1px);
}

@media(max-width:700px){
  .adoption-actions{padding:23px 20px}
  .adoption-action{width:100%}
}


/* Compact animated preorder journey */
.preorder-timeline-notice{
  position:relative;
  overflow:hidden;
  padding:24px 24px 20px;
  border:1px solid rgba(200,157,90,.34);
  border-left:1px solid rgba(200,157,90,.34);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,252,247,.96),rgba(248,241,232,.84));
}

.preorder-timeline-notice:after{
  content:"✦";
  position:absolute;
  top:15px;
  right:19px;
  color:rgba(200,157,90,.55);
  font-size:18px;
  animation:preorderTwinkle 2.2s ease-in-out infinite;
}

.package-delay-notice.preorder-timeline-notice > strong{
  color:var(--mauve);
  font-family:"Ovo",Georgia,serif;
  font-size:21px;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
}

.preorder-mini-timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin:24px 0 17px;
  padding:0;
  list-style:none;
}

.preorder-mini-timeline:before{
  content:"";
  position:absolute;
  top:15px;
  left:16px;
  right:16px;
  height:2px;
  background:linear-gradient(90deg,var(--mauve),var(--gold) 58%,rgba(200,157,90,.25));
}

.preorder-mini-timeline li{
  position:relative;
  z-index:1;
  min-width:0;
  padding-top:39px;
}

.preorder-timeline-marker{
  position:absolute;
  top:0;
  left:0;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:2px solid var(--gold);
  border-radius:50%;
  background:#fffaf4;
  color:#fff;
  font-size:14px;
  font-weight:700;
}

.preorder-mini-timeline .done .preorder-timeline-marker{
  border-color:var(--mauve);
  background:var(--mauve);
}

.preorder-mini-timeline .current .preorder-timeline-marker{
  border-color:var(--mauve);
  background:var(--mauve);
  box-shadow:0 0 0 0 rgba(200,157,90,.3);
  animation:preorderPulse 2.2s ease-out infinite;
}

.preorder-mini-timeline .current .preorder-timeline-marker:after,
.preorder-mini-timeline .estimate .preorder-timeline-marker:after{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold);
}

.preorder-mini-timeline b,
.preorder-mini-timeline small{
  display:block;
}

.preorder-mini-timeline b{
  color:var(--mauve);
  font-family:"Ovo",Georgia,serif;
  font-size:17px;
  font-weight:400;
  line-height:1.25;
}

.preorder-mini-timeline small{
  margin-top:4px;
  color:var(--mauve-soft);
  font-size:12px;
  line-height:1.4;
}

.preorder-mini-timeline .estimate small{
  color:var(--gold);
  font-size:14px;
  font-weight:700;
}

.package-delay-notice.preorder-timeline-notice > p{
  margin-top:0;
  padding-top:14px;
  border-top:1px solid rgba(76,61,66,.1);
  font-size:14px;
  line-height:1.5;
}

@keyframes preorderPulse{
  0%{box-shadow:0 0 0 0 rgba(200,157,90,.32)}
  70%{box-shadow:0 0 0 10px rgba(200,157,90,0)}
  100%{box-shadow:0 0 0 0 rgba(200,157,90,0)}
}

@keyframes preorderTwinkle{
  0%,100%{opacity:.35;transform:scale(.9) rotate(0)}
  50%{opacity:1;transform:scale(1.1) rotate(12deg)}
}

@media (max-width:620px){
  .preorder-mini-timeline{
    grid-template-columns:1fr;
    gap:18px;
    margin-left:4px;
  }

  .preorder-mini-timeline:before{
    top:15px;
    bottom:26px;
    left:14px;
    right:auto;
    width:2px;
    height:auto;
    background:linear-gradient(180deg,var(--mauve),var(--gold) 58%,rgba(200,157,90,.25));
  }

  .preorder-mini-timeline li{
    min-height:44px;
    padding:0 0 0 45px;
  }
}

@media (prefers-reduced-motion:reduce){
  .preorder-timeline-notice:after,
  .preorder-mini-timeline .current .preorder-timeline-marker{
    animation:none!important;
  }
}

.adoption-action--secondary{
  color:var(--mauve);
  background:transparent;
  border:1px solid var(--mauve);
  cursor:pointer;
  font-family:inherit;
}
.adoption-action--secondary:hover,
.adoption-action--secondary:focus-visible{
  color:#fffaf4;
  background:var(--mauve);
}
/* Timeline left, current-step animation right; the old Now / Next step strip is hidden */
.eta-journey{display:block;padding:0;margin-top:26px}
.eta-journey .eta-track,.eta-journey .eta-stop{display:none}
.progress-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);column-gap:56px;align-items:start}
.progress-section .progress-top{grid-column:1}
.progress-section .timeline{grid-column:1}
.step-visual{grid-column:2;grid-row:1 / span 2;position:sticky;top:24px;padding:30px 26px;text-align:center;border:1px solid rgba(200,157,90,.45);background:rgba(248,241,232,.7)}
.step-visual__art{position:relative;width:132px;height:132px;margin:0 auto 20px;display:grid;place-items:center}
.step-visual__art i{position:absolute;inset:0;border:1px solid var(--gold);border-radius:50%;opacity:0;animation:stepRing 3.6s ease-out infinite}
.step-visual__art i:nth-child(2){animation-delay:1.8s}
.step-visual__icon{position:relative;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:var(--mauve);color:#f3e6cf;animation:stepFloat 4s ease-in-out infinite}
.step-visual__icon svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.step-visual__label{margin:0 0 6px;color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.step-visual h3{font-size:clamp(24px,3vw,30px);line-height:1.15;margin:0}
.step-visual__copy{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--mauve-soft)}
@keyframes stepRing{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.15);opacity:0}}
@keyframes stepFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(max-width:760px){
  .progress-section{grid-template-columns:1fr}
  .progress-section .progress-top{order:1}
  .step-visual{order:2;grid-column:1;grid-row:auto;position:static;margin-bottom:26px}
  .progress-section .timeline{order:3}
}
@media(prefers-reduced-motion:reduce){.step-visual__art i,.step-visual__icon{animation:none}.step-visual__art i{opacity:.35;transform:none}}
.gift-email{margin-top:24px;padding-top:22px;border-top:1px solid rgba(200,157,90,.45)}
.gift-email[hidden]{display:none}
.gift-email__fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gift-email label{display:block;font-size:13px;font-weight:700;color:var(--mauve)}
.gift-email label span{font-weight:400}
.gift-email input,.gift-email textarea{display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid rgba(76,61,66,.3);background:#fffdf8;font:inherit;font-size:15px;font-weight:400;color:inherit;box-sizing:border-box}
.gift-email textarea{min-height:84px;resize:vertical}
.gift-email__note{margin-top:12px}
.gift-email__preview{margin-top:18px;max-height:440px;overflow:auto;border:1px solid rgba(76,61,66,.18)}
.gift-email__buttons{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}
.gift-email__hint{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--mauve-soft)}
@media(max-width:700px){.gift-email__fields{grid-template-columns:1fr}}