/* One illustrative shipment in PumpkinTrack's real Tracking card hierarchy.
   All product data is fixed example content; scrolling only presents its four receipt stages. */
.landing .shipping-story{padding-block:26px 58px;--story-visual-space:330px;--story-step:240px;--story-progress:0;--scene-ordered:1;--scene-shipped:0;--scene-out:0;--scene-delivered:0}
.landing .shipping-story-intro{max-width:660px;margin:0 auto 26px;text-align:center}
.landing .shipping-story .shipping-story-intro h2{font-size:clamp(30px,3vw,42px);line-height:1.1;margin:0 0 12px}
.landing .shipping-story-intro .eyebrow{margin-bottom:10px}
.landing .shipping-story-intro>p{font-size:16px;max-width:52ch;margin:0 auto}
.landing .shipping-story-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,4vw,72px);align-items:start}
.landing .shipping-story-visual{margin:0;min-width:0;width:100%;max-width:660px;align-self:center}
.landing .shipping-story-card{padding:20px;border:1px solid #634332;border-radius:18px;background:#2b1d15;color:#fff5ed;overflow:hidden}
.landing .shipping-card-product{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:16px;min-width:0}
.landing .shipping-card-photo{width:112px;aspect-ratio:1;border-radius:12px;background:#fff;overflow:hidden}
.landing .shipping-card-photo img{display:block;width:100%;height:100%;object-fit:contain}
.landing .shipping-card-identity{min-width:0}
.landing .shipping-card-store{font-size:12px;line-height:1.5;font-weight:700;margin:0 0 8px;color:#fff5ed}
.landing .shipping-card-store span{font-weight:500;color:#d1b5a4;white-space:nowrap}
.landing .shipping-card-identity h3{font-size:20px;line-height:1.35;letter-spacing:-.45px;margin:0;color:#fff5ed;text-wrap:pretty;overflow-wrap:break-word}
.landing .shipping-card-update{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,1fr);align-items:center;gap:14px;margin-top:18px;padding-block:14px;border-block:1px solid #634332}
.landing .shipping-card-status{position:relative;height:28px;min-width:0}
.landing .shipping-card-status>span{position:absolute;left:0;top:0;max-width:100%;padding:5px 10px;border:1px solid #956044;border-radius:999px;background:#493022;color:#ffb47f;font-size:12px;line-height:16px;font-weight:750;white-space:nowrap}
.landing .shipping-card-receipt{min-width:0}
.landing .shipping-card-receipt-label{display:block;font-size:10px;line-height:14px;font-weight:600;color:#d1b5a4}
.landing .shipping-card-receipt-copy{position:relative;min-height:19px}
.landing .shipping-card-receipt-copy>p{position:absolute;inset:0;margin:0;font-size:12px;line-height:19px;color:#fff5ed;white-space:nowrap}
.landing .shipping-phase-ordered{opacity:clamp(0,calc(var(--scene-ordered)*2 - 1),1)}
.landing .shipping-phase-shipped{opacity:clamp(0,calc(var(--scene-shipped)*2 - 1),1)}
.landing .shipping-phase-out{opacity:clamp(0,calc(var(--scene-out)*2 - 1),1)}
.landing .shipping-phase-delivered{opacity:clamp(0,calc(var(--scene-delivered)*2 - 1),1)}
.landing .shipping-card-milestones{position:relative;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:20px 0 0;padding:0;isolation:isolate}
.landing .shipping-card-milestones::before,.landing .shipping-card-milestones::after{content:"";position:absolute;left:12.5%;top:5px;width:75%;height:2px;background:#77513b;z-index:-1}
.landing .shipping-card-milestones::after{background:#ff9a52;transform:scaleX(var(--story-progress));transform-origin:left}
.landing .shipping-card-milestones li{display:flex;align-items:center;flex-direction:column;gap:8px;text-align:center;min-width:0;font-size:11px;line-height:15px;font-weight:650;color:#e9cbb8}
.landing .shipping-card-milestones li:nth-child(1){--step-index:0}
.landing .shipping-card-milestones li:nth-child(2){--step-index:1}
.landing .shipping-card-milestones li:nth-child(3){--step-index:2}
.landing .shipping-card-milestones li:nth-child(4){--step-index:3}
.landing .shipping-card-mark{position:relative;display:block;flex-shrink:0;width:12px;height:12px;border:2px solid #77513b;border-radius:50%;background:#2b1d15}
.landing .shipping-card-mark::after{content:"";position:absolute;inset:-2px;border:2px solid #ff9a52;border-radius:50%;background:#ff9a52;opacity:clamp(0,calc(var(--story-progress)*3 - var(--step-index) + 1),1)}
.landing .shipping-story-visual figcaption{font-size:11px;line-height:1.6;color:var(--muted);margin:10px 0 0;text-align:center}
.landing .shipping-story-steps{list-style:none;padding:0;margin:0;display:grid;gap:30px}
.landing .shipping-story-steps li{min-width:0;display:flex;flex-direction:column;justify-content:center}
.landing .shipping-story-steps h3{font-size:28px;letter-spacing:-.8px;margin:0 0 14px}
.landing .shipping-story-steps p{font-size:16px;max-width:33ch;margin:0;line-height:1.75}
/* On phones the current copy stays with the figure. Desktop keeps the full
   stage descriptions alongside the vertically centered left-hand shipment. */
.landing .shipping-story-current{display:none;max-width:450px;margin:24px auto 0;text-align:center}
.landing .shipping-story-current-phase{grid-area:1/1;min-width:0;opacity:1;visibility:hidden}
.landing .shipping-story-current h3{font-size:28px;line-height:1.2;letter-spacing:-.8px;margin:0 0 10px;color:var(--ink)}
.landing .shipping-story-current p{font-size:15px;line-height:1.65;margin:0;color:var(--muted);text-wrap:pretty}
/* No translucent foreground: status and receipt text stay opaque through every
   transition. The semantic state changes at the midpoint of the smooth path. */
.landing .shipping-card-status>.shipping-phase,.landing .shipping-card-receipt-copy>.shipping-phase{opacity:1;visibility:hidden}
.landing .shipping-story:not([data-story-phase]) :is(.shipping-card-status,.shipping-card-receipt-copy)>.shipping-phase-ordered,
.landing .shipping-story[data-story-phase="ordered"] :is(.shipping-card-status,.shipping-card-receipt-copy,.shipping-story-current)>.shipping-phase-ordered,
.landing .shipping-story[data-story-phase="shipped"] :is(.shipping-card-status,.shipping-card-receipt-copy,.shipping-story-current)>.shipping-phase-shipped,
.landing .shipping-story[data-story-phase="out"] :is(.shipping-card-status,.shipping-card-receipt-copy,.shipping-story-current)>.shipping-phase-out,
.landing .shipping-story[data-story-phase="delivered"] :is(.shipping-card-status,.shipping-card-receipt-copy,.shipping-story-current)>.shipping-phase-delivered{visibility:visible}
@media(prefers-reduced-motion:no-preference){
  .landing .shipping-story[data-story-motion="moving"] .shipping-story-visual{grid-area:1/1;align-self:start;position:sticky;top:18px;top:var(--story-sticky-top,max(18px,calc((100vh - var(--story-visual-space))/2)));z-index:1;background:var(--paper)}
  .landing .shipping-story[data-story-motion="moving"] .shipping-story-card{transform:translateY(calc(var(--story-progress)*-4px))}
  .landing .shipping-story[data-story-motion="moving"] .shipping-story-steps{grid-area:1/2;gap:0;padding-block:max(0px,calc((var(--story-visual-space) - var(--story-step))/2))}
  .landing .shipping-story[data-story-motion="moving"] .shipping-story-steps li{position:relative;min-height:var(--story-step)}
}
/* The secondary screenshot is a compact invitation to the unchanged full dialog. */
.landing #product-preview{max-width:760px;margin-bottom:76px}
.landing #product-preview .preview-heading{display:block;text-align:center;margin-bottom:18px}
.landing #product-preview .preview-heading h2{margin-bottom:6px}
.landing #product-preview .preview-button{max-width:560px;max-height:300px;margin-inline:auto}
@media(max-width:1000px){
  .landing .shipping-card-product{grid-template-columns:96px minmax(0,1fr);gap:14px}
  .landing .shipping-card-photo{width:96px}
  .landing .shipping-card-identity h3{font-size:19px}
}
@media(max-width:767px){
  .landing .shipping-story{padding-block:15px 38px;--story-visual-space:370px;--story-step:110px}
  .landing .shipping-story-intro{margin-bottom:20px}
  .landing .shipping-story .shipping-story-intro h2{font-size:29px;margin-inline:auto}
  .landing .shipping-story-intro>p{font-size:15px;max-width:34ch}
  .landing .shipping-story-layout{grid-template-columns:minmax(0,1fr);gap:24px;max-width:620px;margin-inline:auto}
  .landing .shipping-story-visual{max-width:560px;margin-inline:auto}
  .landing .shipping-story-card{padding:16px;border-radius:16px}
  .landing .shipping-card-product{grid-template-columns:88px minmax(0,1fr);gap:12px}
  .landing .shipping-card-photo{width:88px;border-radius:10px}
  .landing .shipping-card-store{font-size:11px;line-height:15px;margin-bottom:6px}
  .landing .shipping-card-identity h3{font-size:15px;line-height:20px;letter-spacing:-.2px}
  .landing .shipping-card-update{grid-template-columns:minmax(110px,1fr) minmax(0,1fr);gap:10px;margin-top:14px;padding-block:12px}
  .landing .shipping-card-status{height:26px}
  .landing .shipping-card-status>span{font-size:11px;line-height:16px;padding:4px 7px}
  .landing .shipping-card-receipt-label{font-size:10px;line-height:12px}
  .landing .shipping-card-receipt-copy{min-height:17px}
  .landing .shipping-card-receipt-copy>p{font-size:11px;line-height:17px}
  .landing .shipping-card-milestones{margin-top:16px}
  .landing .shipping-card-milestones li{font-size:10px;line-height:14px;gap:7px}
  .landing .shipping-story-current{margin-top:20px}
  .landing .shipping-story-current h3{font-size:25px;margin-bottom:9px}
  .landing .shipping-story-current p{font-size:14px;line-height:1.6}
  .landing .shipping-story-visual figcaption{font-size:10px;line-height:1.5;margin-top:12px;max-width:37ch;margin-inline:auto}
  .landing .shipping-story-steps h3{font-size:25px;margin-bottom:10px}
  .landing .shipping-story-steps p{font-size:15px;max-width:35ch;margin-inline:auto}
  .landing .shipping-story-steps{text-align:center;gap:24px}
  .landing #product-preview{margin-bottom:52px}
  .landing #product-preview .preview-button{max-height:260px}
}
@media(max-width:767px) and (prefers-reduced-motion:no-preference){
  .landing .shipping-story[data-story-motion="moving"] .shipping-story-current{display:grid}
  .landing .shipping-story[data-story-motion="moving"] .shipping-story-steps{grid-area:1/1}
  .landing .shipping-story[data-story-motion="moving"] .shipping-story-steps li>*{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  .landing .shipping-story .shipping-story-visual{position:static}
  .landing .shipping-story .shipping-story-steps li{min-height:0}
}
/* The script uses the figure's actual height, rather than a window-height
   breakpoint, to choose this complete readable fallback when it cannot fit. */
.landing .shipping-story[data-story-motion="static"] .shipping-story-visual{position:static;min-height:0}
.landing .shipping-story[data-story-motion="static"] .shipping-story-current{display:none}
.landing .shipping-story[data-story-motion="static"] .shipping-story-steps{grid-area:auto;padding-block:0;gap:24px}
.landing .shipping-story[data-story-motion="static"] .shipping-story-steps li{min-height:0}
.landing .shipping-story[data-story-motion="static"] .shipping-story-steps li>*{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}