/* Ratehaul homepage v3 prototype. Layered on the unchanged site.css + brand.css (Dispatch, copied from site/ at 11ccfa4).
   No scroll-scrubbed story: plain document flow, no animation, no JS beyond site.js. */
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Hero: A1 still, 4:3, copy in its own column (never over the photo). */
.hero-media img{aspect-ratio:4/3;width:100%;height:auto;object-fit:cover;object-position:50% 50%;background:#1e4a3e}
.hero-caption{gap:12px;flex-wrap:wrap;padding:10px 0 0}
.hero-caption a{color:var(--orange);text-decoration:none}
.hero-caption a:hover{text-decoration:underline}
.screen-note{color:#c7d7ca;font:.66rem/1.5 ui-monospace,monospace;margin:8px 0 0;letter-spacing:.04em}

/* How one order ships */
.ship{background:var(--navy);color:var(--offwhite);padding:76px 0}
.ship h2{color:var(--offwhite);margin-top:0}
.ship .eyebrow{color:var(--orange)}
.ship-lead{color:#c7d7ca;max-width:56ch;margin-bottom:8px}
.ship-steps{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:48px}
.ship-step{display:grid;gap:18px;align-items:center}
.ship-step figure{margin:0}
.ship-step img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#1e4a3e;border-radius:3px}
.ship-step .eyebrow{margin:0 0 8px}
.ship-step h3{color:var(--offwhite);font-size:clamp(1.45rem,2.4vw,2.1rem);line-height:1.1;margin:0 0 10px;max-width:16ch}
.ship-step p{color:#c7d7ca;margin:0;max-width:38ch}
.ship-step .parcel-spec{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ship-step .parcel-spec span{border:1px solid #b7cabb55;border-radius:2px;padding:8px;font:.66rem ui-monospace,monospace;letter-spacing:.05em;color:var(--offwhite)}
.ship-step-text-only{border-top:1px solid #ffffff30;padding-top:28px}

/* Example checkout card: wording unchanged from site/ (bopeppi owns it). */
.quote-demo{background:#f4f0e6;border-radius:6px;padding:18px;color:#18382f;max-width:390px;margin-top:22px}
.quote-head{display:flex;justify-content:space-between;gap:10px;align-items:center;font-weight:700;padding-bottom:12px}
.quote-head span:last-child{font:.62rem ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;color:#52665b}
.quote-row{display:flex;align-items:center;gap:10px;padding:12px 10px;border:1px solid #bdc8b9;border-radius:3px;margin-bottom:8px;font-size:.88rem}
.quote-row strong{margin-left:auto}
.quote-row.chosen{background:#e7ecdf;border-color:#153c32}
.quote-dot{width:14px;height:14px;flex:0 0 14px;border:1px solid #52665b;border-radius:50%}
.chosen .quote-dot{background:#153c32;box-shadow:inset 0 0 0 3px #e7ecdf}
.ship-step .quote-demo p{color:#52665b;font-size:.72rem;line-height:1.5;margin:12px 0 0;max-width:none}

/* Pro area: D1-r2 beside the intro */
.features-intro{display:grid;gap:24px;align-items:center;margin-bottom:32px}
.features-intro .section-intro{margin-bottom:0}
.pro-figure{margin:0}
.pro-figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#d9dfd2;border-radius:3px}
.pro-figure figcaption{font-size:.85rem;color:var(--muted);margin-top:10px;max-width:52ch}
.pro-figure figcaption strong{color:var(--ink)}

@media(min-width:900px){
  .ship{padding:100px 0}
  .ship-steps{gap:72px}
  .ship-step{grid-template-columns:7fr 5fr;gap:48px}
  .ship-step:nth-child(even){grid-template-columns:5fr 7fr}
  .ship-step:nth-child(even) figure{order:2}
  .ship-step.ship-step-text-only{grid-template-columns:5fr 7fr}
  .ship-step-text-only>div{grid-column:2}
  .features-intro{grid-template-columns:5fr 6fr;gap:48px}
}
@media(max-width:639px){
  .ship{padding:52px 0}
  .ship-steps{gap:40px;margin-top:28px}
  .ship-step h3{max-width:none}
}

/* Ceramic story: coherent merchant imagery; software example remains HTML. */
.hero-media img,.ship-step img{object-position:70% 50%}
.ship-step-quote .quote-demo{margin:0;max-width:100%}
@media(min-width:900px){.ship-step.ship-step-quote{grid-template-columns:5fr 7fr}.ship-step-quote>div:last-child{grid-column:2}}