/* Tracking shares the photo masthead, typography and paper palette of checkout. */
.tracking-page .tracking-main { width: 90.6%; max-width: 1305px; margin: auto; padding: 30px 0 80px; }
.tracking-page .tracking-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4%; padding: 44px 0 38px; }
.tracking-page .tracking-eyebrow { font: 800 11px/1.6 Raleway, sans-serif; letter-spacing: .15em; color: #005f73; margin: 0 0 16px; }
.tracking-page .tracking-intro-copy > .tracking-eyebrow { display: flex; align-items: center; gap: 10px; }
.tracking-page .tracking-eyebrow > span { width: 8px; height: 8px; background: #0a9396; border-radius: 50%; }
.tracking-page .tracking-intro h1 { margin: 0 0 20px; font-size: clamp(46px,5.9vw,80px); line-height: 1.03; color: #00181e; }
.tracking-page .tracking-intro h1 > span { color: #bb3e03; }
.tracking-page .tracking-lede { font-size: 17px; line-height: 1.7; max-width: 410px; color: #526563; margin: 0; }
.tracking-page .tracking-handwritten { font: 400 28px/1.2 Bryndan, cursive; color: #3f806d; margin: 18px 0 0; }
.tracking-page .tracking-kit { margin: 0; }
.tracking-page .tracking-kit img { display: block; width: 100%; height: auto; }
.tracking-page .tracking-status { color: #005f73; font-size: 14px; margin: 0 0 14px; }
.tracking-page .tracking-status:empty { display: none; }
.tracking-page .tracking-banner { padding: 20px 24px; border: 1px solid #adcbbf; background: #e7f1e8; color: #163d42; border-radius: 12px; font-size: 15px; line-height: 1.7; }
.tracking-page #banner { margin-top: 24px; }
.tracking-page .tracking-banner[data-tone="error"] { background: #f9e7de; border-color: #d79c7d; color: #87330d; }
.tracking-page .tracking-banner strong { display: block; }
.tracking-page .tracking-banner a { text-decoration: underline; font-weight: 700; }
.tracking-page .tracking-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 32px; align-items: start; border-top: 1px solid #c5cdbb; padding-top: 36px; }
.tracking-page .tracking-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 28px; }
.tracking-page .tracking-section-heading h2 { margin: 0; font-size: clamp(28px,3vw,39px); line-height: 1.15; }
.tracking-page .tracking-section-heading .tracking-eyebrow { margin-bottom: 10px; }
.tracking-page .tracking-progress { flex-shrink: 0; color: #526563; font-size: 12px; font-weight: 700; padding-bottom: 6px; }
.tracking-page .tracking-stages { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.tracking-page .tracking-stage { display: flex; gap: 18px; padding: 22px; border: 1px solid #d9ded1; border-radius: 14px; background: #fffdf6; }
.tracking-page .tracking-stage-number { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 50%; background: #e9eee5; color: #526563; font: 400 18px/1 "Titan One", sans-serif; }
.tracking-page .tracking-stage-body { flex: 1; min-width: 0; }
.tracking-page .tracking-stage-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.tracking-page .tracking-stage h3 { margin: 0; font-size: 20px; line-height: 1.3; }
.tracking-page .tracking-stage-description { margin: 9px 0 0; color: #526563; font-size: 14px; line-height: 1.6; }
.tracking-page .tracking-stage-state { border-radius: 100px; padding: 5px 10px; background: #eef1e8; font-size: 10px; line-height: 1.3; font-weight: 800; white-space: nowrap; color: #526563; }
.tracking-page .tracking-stage[data-state="done"] .tracking-stage-number { color: #005f73; background: #d8ecdf; }
.tracking-page .tracking-stage[data-state="done"] .tracking-stage-state { background: #d8ecdf; color: #215544; }
.tracking-page .tracking-stage[aria-current="step"] { background: #062b32; border-color: #266269; box-shadow: 0 8px 18px #00181e0a; }
.tracking-page .tracking-stage[aria-current="step"] h3 { color: #94d2bd; }
.tracking-page .tracking-stage[aria-current="step"] .tracking-stage-description { color: #e0e9df; }
.tracking-page .tracking-stage[aria-current="step"] .tracking-stage-number { color: #00181e; background: #94d2bd; box-shadow: 0 0 18px #94d2bd30; }
.tracking-page .tracking-stage[aria-current="step"] .tracking-stage-state { background: #94d2bd24; color: #b2e4ca; }
.tracking-page .tracking-link-note { margin: 22px 0 0; font-size: 12px; line-height: 1.6; color: #526563; }
.tracking-page .tracking-sidebar { display: grid; gap: 22px; }
.tracking-page .tracking-payment { position: relative; padding: 30px; border-radius: 16px; background: #062b32; color: #fffaf0; }
.tracking-page .tracking-payment .tracking-eyebrow { max-width: 75%; color: #a7c9bf; font-size: 10px; margin-bottom: 16px; }
.tracking-page .tracking-payment h2 { color: #94d2bd; font-size: clamp(25px,2.5vw,32px); margin: 0 0 16px; line-height: 1.15; }
.tracking-page .tracking-payment > p:last-child { font-size: 14px; line-height: 1.8; margin: 0; color: #e3e9df; }
.tracking-page .tracking-shield { position: absolute; right: 25px; top: 25px; width: 30px; height: 30px; color: #94d2bd; }
.tracking-page .tracking-help { position: relative; overflow: hidden; padding: 30px; border: 1px solid #bdd3c3; border-radius: 16px; background: #e6efe2; }
.tracking-page .tracking-help > img { position: absolute; width: 100px; height: auto; right: 18px; top: 24px; transform: scaleX(-1); }
.tracking-page .tracking-help h2 { font-size: 27px; line-height: 1.15; margin: 0 95px 22px 0; }
.tracking-page .tracking-help > p { font-size: 14px; line-height: 1.8; color: #344d50; margin: 0 0 22px; }
.tracking-page .tracking-contact-links { display: grid; gap: 14px; }
.tracking-page .tracking-contact-links a { display: flex; align-items: center; justify-content: space-between; color: #005f73; font-size: 14px; font-weight: 800; text-decoration: none; }
.tracking-page .tracking-contact-links a:hover { text-decoration: underline; }
.tracking-page .tracking-contact-links span { font-size: 22px; }
.tracking-page .hidden { display: none; }
@media (max-width: 850px) {
  .tracking-page .tracking-layout { grid-template-columns: 1fr; }
  .tracking-page .tracking-sidebar { grid-template-columns: 1fr 1fr; }
  .tracking-page .tracking-intro { gap: 0; padding: 32px 0; }
  .tracking-page .tracking-lede { font-size: 15px; }
}
@media (max-width: 580px) {
  .tracking-page .tracking-main { width: calc(100% - 36px); padding-top: 22px; padding-bottom: 44px; }
  .tracking-page .tracking-intro { grid-template-columns: 1fr; padding: 30px 0 20px; }
  .tracking-page .tracking-intro h1 { font-size: 48px; }
  .tracking-page .tracking-kit { width: 100%; max-width: 400px; margin: 12px auto 0; }
  .tracking-page .tracking-layout { padding-top: 26px; gap: 26px; }
  .tracking-page .tracking-sidebar { grid-template-columns: 1fr; }
  .tracking-page .tracking-section-heading { align-items: start; }
  .tracking-page .tracking-progress { padding-top: 6px; }
  .tracking-page .tracking-stage { gap: 12px; padding: 18px 14px; }
  .tracking-page .tracking-stage h3 { font-size: 19px; }
  .tracking-page .tracking-stage-number { flex-basis: 36px; height: 36px; font-size: 16px; }
  .tracking-page :is(.tracking-payment,.tracking-help) { padding: 25px; }
}