:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #4b3b42;
  background: #fff8f2;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #fff8f2; }

body {
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background: linear-gradient(160deg, #fff8f2 0%, #f9e8e8 48%, #dbe8ed 100%);
}

.ambient {
  position: fixed;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: .48;
  filter: blur(2px);
}

.ambient-pink { width: 210px; height: 210px; right: -105px; top: 120px; background: #f2b9cb; }
.ambient-blue { width: 180px; height: 180px; left: -105px; bottom: 45px; background: #a9cad5; }

.site-header,
main { position: relative; z-index: 1; width: min(100%, 430px); margin-inline: auto; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(19px, env(safe-area-inset-top)) 21px 8px;
}

.wordmark { font-size: .72rem; font-weight: 600; letter-spacing: .09em; }
.heart { font-size: 1.1rem; opacity: .68; }

main { padding: 30px 20px max(30px, env(safe-area-inset-bottom)); }
.eyebrow, dt, .progress-heading { text-transform: uppercase; letter-spacing: .12em; }
.eyebrow { margin: 0; font-size: .69rem; opacity: .57; }

h1 {
  max-width: 350px;
  margin: 9px 0 11px;
  font-size: clamp(2.2rem, 10vw, 2.75rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.035em;
}

.lead { max-width: 335px; margin: 0; font-size: .93rem; line-height: 1.55; opacity: .68; }

.delivery-card {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 24px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 18px 46px rgba(91,64,77,.11);
  backdrop-filter: blur(16px);
}

.delivery-fields { margin: 0; }
.field { padding: 0 0 14px; }
.field + .field { padding-top: 14px; border-top: 1px solid rgba(88,63,75,.11); }
dt { margin-bottom: 5px; font-size: .62rem; opacity: .54; }
dd { margin: 0; font-size: .98rem; font-weight: 600; }
.status { display: flex; align-items: center; gap: 10px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #7fabb6; box-shadow: 0 0 0 5px rgba(127,171,182,.14); }

.progress-heading { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; font-size: .63rem; opacity: .58; }
.progress-heading span:last-child { text-transform: none; letter-spacing: 0; font-size: .75rem; }

.pregnancy-phase {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  font-size: .68rem;
}

#trimester-label {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(127,171,182,.15);
  color: #557985;
  font-weight: 600;
}

#remaining-label { opacity: .51; }

.track { position: relative; height: 11px; margin: 34px 0 9px; border-radius: 999px; background: rgba(90,75,81,.12); }
.track-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8eb7c4,#e1a7ba); }
.baby { position: absolute; left: 0; top: 50%; font-size: 2rem; transform: translate(-38%,-72%); filter: drop-shadow(0 5px 5px rgba(56,38,47,.17)); }
.track.is-animating .track-fill { transition: width 1.45s cubic-bezier(.22,.75,.26,1); }
.track.is-animating .baby { transition: left 1.45s cubic-bezier(.22,.75,.26,1); }
.track-ends { display: flex; justify-content: space-between; font-size: .63rem; opacity: .49; }

.week-update-card {
  margin-top: 18px;
  border-radius: 18px;
  background: rgba(231,204,212,.32);
  overflow: hidden;
}

.size-card { display: flex; gap: 14px; align-items: center; padding: 15px 14px; }
.size-icon { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; font-size: 1.75rem; line-height: 1; }
.size-card strong, #size-detail { display: block; }
.size-card strong { font-size: .78rem; font-weight: 600; }
#size-detail { margin-top: 3px; font-size: .69rem; opacity: .63; }

.weekly-fact {
  margin: 0 14px;
  padding: 14px 0 15px;
  border-top: 1px solid rgba(88,63,75,.1);
}

.weekly-fact-label {
  display: block;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #668995;
}

.weekly-fact p {
  margin: 7px 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: rgba(75,59,66,.78);
}

.updated { margin: 13px 0 0; text-align: center; font-size: .63rem; opacity: .45; }

.delivered-view { position: relative; padding-top: 4px; }
.delivered-view[hidden] { display: none; }
.delivered-view h1 { max-width: 360px; }

.celebration { position: absolute; inset: -18px 0 auto; height: 110px; pointer-events: none; overflow: hidden; }
.celebration span { position: absolute; top: -12px; font-size: .65rem; color: #db9eb3; animation: float-down 2.8s ease-out both; }
.celebration span:nth-child(1) { left: 7%; }
.celebration span:nth-child(2) { left: 27%; animation-delay: .18s; color: #82aebb; }
.celebration span:nth-child(3) { left: 52%; animation-delay: .06s; color: #d8b98a; }
.celebration span:nth-child(4) { left: 73%; animation-delay: .28s; color: #a593bd; }
.celebration span:nth-child(5) { left: 92%; animation-delay: .12s; color: #82aebb; }

.baby-photo { width: 100%; max-height: 310px; margin-top: 24px; object-fit: cover; border-radius: 22px; box-shadow: 0 16px 38px rgba(91,64,77,.12); }

.arrival-card { margin-top: 28px; padding: 21px; border: 1px solid rgba(255,255,255,.56); border-radius: 24px; background: rgba(255,255,255,.69); box-shadow: 0 18px 46px rgba(91,64,77,.11); backdrop-filter: blur(16px); }
.delivered-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; background: rgba(127,171,182,.16); color: #557985; font-size: .69rem; font-weight: 600; }
.delivered-badge span { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #7fabb6; color: white; font-size: .67rem; }
.arrival-card h2 { margin: 14px 0 17px; font-size: 1.55rem; font-weight: 600; letter-spacing: -.02em; }
.arrival-details { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; border-top: 1px solid rgba(88,63,75,.1); }
.arrival-details div { padding: 14px 8px 12px 0; border-bottom: 1px solid rgba(88,63,75,.1); }
.arrival-details div:nth-child(even) { padding-left: 12px; border-left: 1px solid rgba(88,63,75,.1); }
.arrival-details dd { font-size: .88rem; }
.completed-track { position: relative; height: 11px; margin: 35px 3px 18px; border-radius: 999px; background: rgba(90,75,81,.12); }
.completed-track span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8eb7c4,#e1a7ba); }
.completed-track strong { position: absolute; top: 50%; right: 0; transform: translate(42%,-70%); font-size: 2rem; filter: drop-shadow(0 5px 5px rgba(56,38,47,.17)); }
.arrival-message { margin: 0; padding: 14px; border-radius: 16px; background: rgba(231,204,212,.3); font-size: .79rem; line-height: 1.5; text-align: center; }

@keyframes float-down {
  0% { opacity: 0; transform: translateY(0) rotate(0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(100px) rotate(150deg); }
}

@media (min-width: 700px) {
  body { display: grid; align-content: start; }
  .site-header, main { width: 410px; }
}

@media (prefers-reduced-motion: reduce) {
  .track.is-animating .track-fill, .track.is-animating .baby { transition: none; }
  .celebration span { animation: none; display: none; }
}

/* Shipment details live in a modal; the existing card keeps its dimensions. */
.journey-trigger{position:relative;display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:inherit;padding:0;margin:0;font:inherit;font-weight:inherit;text-align:left;cursor:pointer;line-height:inherit}
.journey-trigger::after{content:"";position:absolute;inset:-12px 0}
.journey-trigger-label{margin-left:auto;font-size:.64rem;color:#658692;font-weight:500;white-space:nowrap}
.journey-trigger-label>span{font-size:1rem;line-height:0;margin-left:2px}
.journey-trigger:hover .journey-trigger-label{text-decoration:underline}
.journey-trigger:focus-visible,.journey-close:focus-visible{outline:3px solid #7fabb6;outline-offset:5px;border-radius:5px}
.journey-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
body.journey-modal-open{overflow:hidden}
.journey-dialog{padding:0;border:1px solid #ffffffd9;border-radius:25px;background:#fffaf8;color:#4b3b42;width:min(460px,calc(100% - 32px));max-height:85vh;max-height:85svh;box-shadow:0 24px 90px #4b3b4233;overflow:auto;overscroll-behavior:contain}
.journey-dialog::backdrop{background:#4b3b4266;backdrop-filter:blur(5px)}
.journey-dialog-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:24px 24px 16px;background:#fffaf8;border-bottom:1px solid #583f4b12}
.journey-eyebrow{margin:0 0 7px;font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;color:#927e86}
.journey-dialog h2{margin:0;font-size:1.5rem;letter-spacing:-.04em;line-height:1.15;font-weight:600;max-width:270px}
.journey-close{flex-shrink:0;display:grid;place-items:center;width:44px;height:44px;margin:-7px -8px 0 0;border:0;border-radius:50%;background:#efe4e8;color:#7a626d;font:inherit;font-size:1.4rem;cursor:pointer}
.journey-dialog-body{padding:16px 24px 24px}
.journey-description{font-size:.76rem;line-height:1.65;color:#927e86;margin:0 0 16px}
.journey-next{display:flex;align-items:center;gap:12px;background:#e8f0f1;border:1px solid #d3e1e5;border-radius:15px;padding:14px;margin-bottom:25px}
.journey-next-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#ffffff99;color:#628692;font-size:1.2rem}
.journey-next div>span{display:block;font-size:.59rem;letter-spacing:.1em;text-transform:uppercase;color:#76929c}
.journey-next strong{display:block;font-size:.83rem;margin-top:5px;font-weight:600}
.journey-timeline{list-style:none;padding:0;margin:0}
.journey-step{position:relative;padding:0 0 24px 42px;min-height:70px}
.journey-step::before{content:"";position:absolute;left:13px;top:27px;bottom:0;width:2px;background:#d5ded8}
.journey-step:last-child{padding-bottom:0;min-height:54px}
.journey-step:last-child::before{display:none}
.journey-node{position:absolute;left:0;top:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e5eee6;color:#698773;border:1px solid #bacebf;font-size:.85rem;font-weight:600}
.journey-step-heading{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.journey-step h3{font-size:.8rem;font-weight:600;margin:3px 0 5px;line-height:1.4}
.journey-state{font-size:.57rem;white-space:nowrap;color:#78917d}
.journey-step p{font-size:.69rem;line-height:1.6;color:#927e86;margin:0}
.journey-step.future::before,.journey-step.next::before,.journey-step.unknown::before{background:repeating-linear-gradient(to bottom,#c5b9bf 0 3px,transparent 3px 8px)}
.journey-step.future .journey-node,.journey-step.unknown .journey-node{background:#fffaf8;border:1px dashed #c6b7be;color:#ac9aa2}
.journey-step.future h3,.journey-step.unknown h3{color:#9a8790}
.journey-step.future .journey-state,.journey-step.unknown .journey-state{color:#a8949e}
.journey-step.next .journey-node{background:#779daa;color:#fff;border-color:#779daa;box-shadow:0 0 0 4px #7fabb61b}
.journey-step.next .journey-step-content{padding:12px;margin:-3px -6px 0 -9px;border:1px solid #bfd4db;border-radius:13px;background:#edf4f5}
.journey-step.next h3,.journey-step.next .journey-state{color:#557d8b}
.journey-footnote{font-size:.61rem;line-height:1.8;text-align:center;color:#a18b95;margin:22px 0 0;padding-top:16px;border-top:1px solid #583f4b12}
@media(max-width:600px){.journey-dialog{width:100%;max-width:450px;max-height:88vh;max-height:88svh;margin:auto auto 0;border-radius:23px 23px 0 0}.journey-dialog-head{padding:22px 22px 16px}.journey-dialog-body{padding:16px 22px max(24px,env(safe-area-inset-bottom))}.journey-step-heading{flex-wrap:wrap;gap:0 8px}.journey-state{margin-bottom:5px}}

/* A compact next-stop line, like a shipment update, within the existing status field. */
.field.shipment-status-field{padding-top:6px;padding-bottom:3px}
.shipment-subrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:5px;min-height:14px;line-height:14px}
.shipment-subtext{font-size:.60rem;font-weight:400;color:#8c7b83;white-space:nowrap}
.shipment-subtext strong{font-weight:500;color:#6a8490}
.shipment-subrow .journey-trigger{display:inline-flex;width:auto;flex-shrink:0;gap:4px;font-size:.63rem;line-height:14px;color:#658692;font-weight:500}
.shipment-subrow .journey-trigger::after{inset:-7px -3px}
.shipment-subrow .journey-trigger>span[aria-hidden]{font-size:.9rem}