/* RackSort: warehouse blue, concrete, and a legible operational diagram. */
:root {
  --ink:#243650;
  --muted:#65758a;
  --red:#1559b7;
  --paper:#f5f7fa;
  --surface:#fff;
  --hover:#e9eff7;
  --hair:#dce3eb;
  --rule:#dce3eb;
  --rs-blue:#1559b7;
  --rs-soft:#e8f0fb;
  --rs-navy:#203956
}
:root[data-theme="dark"] {
  --ink:#e8eff8;
  --muted:#a3b2c6;
  --red:#85b5ff;
  --paper:#162235;
  --surface:#1d2e44;
  --hover:#263c56;
  --hair:#364a63;
  --rule:#364a63;
  --rs-blue:#85b5ff;
  --rs-soft:#223f62;
  --rs-navy:#10243b
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}
body {
  overflow-wrap:break-word
}
.site-header {
  max-width:1200px;
  min-height:88px;
  border-bottom:0;
  width:calc(100% - 80px);
  gap:20px
}
.site-header>nav {
  gap:28px
}
.site-header>nav :is(a, [aria-current="page"]) {
  font-size:13px
}
.rs-brand {
  gap:12px;
  font-size:26px;
  letter-spacing:-1.1px
}
.rs-brand-mark {
  display:inline-block;
  position:relative;
  transform:none;
  width:23px;
  height:25px;
  margin:0;
  border:0;
  border-left:3px solid var(--rs-blue);
  border-right:3px solid var(--rs-blue);
  background:linear-gradient(to bottom,transparent 20%,var(--rs-blue) 20%,var(--rs-blue) 31%,transparent 31%,transparent 63%,var(--rs-blue) 63%,var(--rs-blue) 74%,transparent 74%)
}
.rs-brand-mark::before {
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  background:#d89b6c;
  left:3px;
  top:-2px
}
.rs-account {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  border:1px solid var(--hair);
  border-radius:6px;
  padding:9px 15px;
  font-size:12px;
  font-weight:600;
  text-decoration:none
}
.rs-account:hover {
  background:var(--hover)
}
.theme-actions {
  display:flex;
  gap:12px;
  align-items:center
}
.theme-toggle {
  height:36px;
  min-width:36px;
  width:36px;
  background:transparent;
  border:0
}
.site-footer {
  max-width:1200px;
  margin-top:0;
  border-top:1px solid var(--hair);
  padding-top:44px;
  padding-bottom:24px
}
.footer-about .brand {
  font-size:26px
}
.footer-about p {
  max-width:30ch
}
.footer-about .parent-brand {
  font-size:12px;
  color:var(--red)
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px
}
.availability-note {
  padding:16px 20px;
  margin:0 0 30px;
  border-left:3px solid var(--rs-blue);
  background:var(--rs-soft);
  font-size:13px;
  line-height:1.7
}
.article-content .availability-note p {
  margin:0
}
.action-primary,.article-content a.action-primary {
  background:#1559b7;
  border-color:#1559b7
}
.action-primary:hover {
  background:#104992;
  border-color:#104992
}
.rs-home {
  max-width:none;
  padding:0;
  margin:0;
  overflow:hidden
}
.rs-home h1,.rs-home h2,.rs-home h3 {
  font-family:"Space Grotesk",sans-serif;
  color:var(--ink)
}
.rs-home h2 {
  border:0;
  padding:0;
  font-weight:500
}
.rs-hero {
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);
  align-items:center;
  gap:36px 64px;
  padding:48px 40px 40px
}
.hero-copy {
  padding:0;
  position:relative;
  z-index:1
}
.development-label {
  display:flex;
  gap:9px;
  align-items:center;
  font-size:12px;
  font-weight:500;
  color:var(--muted);
  margin:0 0 24px
}
.development-label>span {
  height:7px;
  width:7px;
  border-radius:50%;
  background:#c77441;
  box-shadow:0 0 0 4px #c7744112
}
.rs-home h1 {
  font-size:clamp(36px,3.7vw,50px);
  line-height:1.12;
  letter-spacing:-2px;
  font-weight:500;
  margin:0 0 24px;
  max-width:560px
}
.rs-home h1 span {
  display:block;
  text-wrap:balance
}
.hero-description {
  font-size:16px;
  line-height:1.75;
  color:var(--muted);
  max-width:45ch;
  margin:0 0 26px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap
}
.rs-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:13px 20px;
  border-radius:6px;
  background:#1559b7;
  color:#fff;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 3px 6px #123f7410
}
.rs-button:hover {
  background:#104a99
}
.text-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--red);
  font-size:13px;
  font-weight:600;
  text-underline-offset:5px
}
.hero-parent {
  font-size:11px;
  color:var(--muted);
  margin-top:26px
}
.warehouse-preview {
  min-width:0;
  align-self:center;
  scroll-margin-top:24px
}
.scene-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 0 14px;
  font-size:11px;
  color:var(--muted)
}
.scene-title {
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:var(--ink)
}
.scene-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#527d9e
}
.scene-example {
  border:1px solid var(--hair);
  border-radius:4px;
  padding:4px 7px;
  font-size:10px
}
.warehouse-svg {
  display:block;
  width:100%;
  height:auto;
  margin:0;
  font-family:var(--sans);
  overflow:visible
}
.warehouse-controls {
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:16px 32px;
  padding:22px 26px 16px;
  border:1px solid var(--hair);
  border-radius:8px;
  background:var(--surface);
  scroll-margin-top:24px
}
.move-path,.destination {
  opacity:0;
  transition:opacity .4s
}
.move-path {
  stroke-dasharray:9 7
}
.is-proposed[data-scene="putaway"] .move-putaway,.is-proposed[data-scene="putaway"] .destination-putaway,.is-proposed[data-scene="replenish"] .move-replenish,.is-proposed[data-scene="replenish"] .destination-replenish,.is-proposed[data-scene="reslot"] .move-reslot,.is-proposed[data-scene="reslot"] .destination-reslot {
  opacity:1
}
.is-proposed .move-path {
  animation:route-flow 4s linear infinite
}
@keyframes route-flow {
  to {
    stroke-dashoffset:-64
  }
}
.scene-controls {
  display:flex;
  position:relative;
  z-index:2;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:max-content;
  max-width:100%;
  margin:0;
  border:0;
  padding:4px;
  border-radius:7px;
  background:var(--paper)
}
.scene-controls button {
  border:0;
  border-radius:4px;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  min-height:40px;
  padding:8px 12px
}
.scene-controls button:hover {
  background:var(--hover)
}
.scene-controls button[aria-pressed="true"] {
  background:var(--rs-soft);
  color:var(--red);
  font-weight:600
}
.move-summary {
  position:relative;
  background:transparent;
  border:0;
  display:flex;
  align-items:center;
  gap:24px;
  padding:0;
  min-height:92px
}
.move-summary>div {
  flex:1
}
.move-label {
  display:block;
  font-size:10px;
  line-height:1.4;
  color:var(--muted);
  margin-bottom:7px
}
.move-summary strong {
  display:block;
  font-size:15px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:-.2px
}
.move-summary p {
  font-size:11px;
  line-height:1.7;
  color:var(--muted);
  margin:7px 0 0;
  max-width:58ch
}
.move-button {
  display:flex;
  align-items:center;
  gap:7px;
  border:0;
  border-radius:5px;
  background:var(--rs-soft);
  color:var(--red);
  font-size:10px;
  font-weight:600;
  min-height:40px;
  padding:9px 11px;
  white-space:nowrap
}
.move-button:hover {
  background:var(--hover)
}
.move-button svg {
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6
}
.scene-disclaimer {
  grid-column:1 / -1;
  font-size:10px;
  text-align:center;
  color:var(--muted);
  line-height:1.5;
  margin:0
}
.rs-section {
  max-width:1280px;
  margin:0 auto;
  padding:100px 40px;
  display:grid;
  grid-template-columns:1fr 1.16fr;
  gap:110px
}
.section-label {
  font-size:12px;
  font-weight:600;
  color:var(--red);
  margin:0 0 17px
}
.section-intro h2 {
  font-size:clamp(30px,3vw,42px);
  line-height:1.18;
  letter-spacing:-1.8px;
  margin:0 0 22px
}
.section-intro>p:not(.section-label) {
  max-width:37ch;
  font-size:15px;
  line-height:1.8;
  color:var(--muted)
}
.use-case-list article {
  display:flex;
  gap:24px;
  padding:0 0 26px;
  margin:0 0 27px;
  border-bottom:1px solid var(--hair)
}
.use-case-list article:last-child {
  margin-bottom:0;
  padding-bottom:0;
  border:0
}
.use-case-symbol {
  font-size:26px;
  color:var(--red);
  line-height:1.2;
  min-width:26px
}
.rs-home h3 {
  font-size:18px;
  line-height:1.4;
  letter-spacing:-.4px;
  font-weight:500;
  margin:0 0 12px
}
.use-case-list p {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  margin:0;
  max-width:52ch
}
.workflow-section {
  background:var(--rs-navy);
  color:#d0ddec;
  padding:75px max(40px,calc((100vw - 1200px)/2)) 30px
}
.workflow-heading {
  max-width:680px
}
.workflow-heading h2 {
  color:#fff;
  font-size:40px;
  line-height:1.2;
  letter-spacing:-1.5px;
  margin:0 0 20px
}
.workflow-heading>p:not(.section-label) {
  font-size:15px;
  line-height:1.8;
  max-width:62ch;
  margin:0;
  color:#b8cbe0
}
.workflow-section .section-label {
  color:#9bbce5
}
.workflow-steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px;
  margin-top:50px
}
.workflow-steps article {
  position:relative;
  padding-top:24px;
  border-top:1px solid #ffffff25
}
.step-number {
  position:absolute;
  top:-13px;
  left:0;
  border:1px solid #6b87a7;
  border-radius:50%;
  background:var(--rs-navy);
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  font-size:11px;
  color:#b5c9e1
}
.workflow-steps h3 {
  color:#fff;
  font-size:20px;
  margin:8px 0 13px
}
.workflow-steps p {
  font-size:13px;
  line-height:1.8;
  color:#b8cbe0;
  max-width:40ch;
  min-height:90px
}
.workflow-tags {
  display:flex;
  gap:7px;
  flex-wrap:wrap
}
.workflow-tags span {
  border:1px solid #ffffff25;
  color:#ccdaeb;
  padding:5px 9px;
  font-size:10px;
  border-radius:4px
}
.workflow-footnote {
  color:#96b0d0;
  font-size:11px;
  margin-top:44px;
  text-align:center
}
.development-section {
  gap:100px;
  padding-top:95px;
  padding-bottom:85px
}
.development-list>div {
  padding:0 0 26px;
  margin:0 0 28px;
  border-bottom:1px solid var(--hair)
}
.development-list>div:last-child {
  border:0;
  margin-bottom:0;
  padding-bottom:0
}
.status-tag {
  display:inline-block;
  font-size:10px;
  margin:0 0 13px;
  padding:4px 8px;
  border:1px solid var(--hair);
  border-radius:4px;
  color:var(--muted)
}
.status-tag.implemented {
  color:var(--red);
  border-color:transparent;
  background:var(--rs-soft)
}
.development-list p {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  margin:0
}
.evidence-copy {
  margin-top:13px
}
.evidence-copy p {
  font-size:11px;
  line-height:1.8
}
.evidence-copy code {
  font-size:10px
}
.closing-section {
  margin:0 auto 90px;
  max-width:1200px;
  border-top:1px solid var(--hair);
  padding:45px 0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px
}
.closing-section h2 {
  font-size:29px;
  line-height:1.3;
  letter-spacing:-1px;
  margin:0 0 12px
}
.closing-section p:not(.section-label) {
  font-size:14px;
  color:var(--muted);
  max-width:62ch;
  line-height:1.7
}
.closing-section .rs-button {
  flex-shrink:0
}
.closing-section .section-label {
  margin-bottom:12px
}
:focus-visible {
  outline:3px solid var(--rs-blue);
  outline-offset:4px
}
@media(max-width:1100px) {
  .site-header {
    width:calc(100% - 48px)
  }
  .site-header>nav {
    gap:16px
  }
  .rs-hero {
    padding:40px 24px;
    gap:30px 36px
  }
  .rs-home h1 {
    font-size:40px;
    letter-spacing:-2px
  }
  .hero-description {
    font-size:15px
  }
  .hero-actions {
    gap:10px 18px
  }
  .move-summary {
    min-height:112px;
    gap:18px
  }
  .move-summary p {
    max-width:none
  }
  .move-button {
    align-self:center
  }
  .rs-section {
    padding:75px 35px;
    gap:55px
  }
  .workflow-section {
    padding-left:35px;
    padding-right:35px
  }
  .workflow-steps {
    gap:30px
  }
  .closing-section {
    margin:0 35px 70px
  }
}
@media(max-width:820px) {
  .site-header {
    min-height:86px;
    gap:14px;
    justify-content:space-between;
    padding-top:20px;
    padding-bottom:16px
  }
  .site-header>nav {
    order:3;
    width:100%;
    justify-content:space-between;
    gap:7px
  }
  .site-header>nav :is(a, [aria-current="page"]) {
    font-size:11px;
    min-height:30px
  }
  .rs-hero {
    display:block;
    padding:38px 24px 36px
  }
  .hero-copy {
    max-width:580px;
    padding-bottom:32px
  }
  .rs-home h1 {
    font-size:46px;
    letter-spacing:-2.4px
  }
  .hero-description {
    font-size:16px;
    max-width:48ch
  }
  .development-label {
    margin-bottom:24px
  }
  .hero-parent {
    margin-top:22px
  }
  .warehouse-preview {
    max-width:600px;
    margin:0 auto
  }
  .warehouse-controls {
    margin-top:24px;
    grid-template-columns:1fr;
    gap:20px;
    padding:20px;
  }
  .scene-controls {
    justify-self:center;
  }
  .move-summary {
    min-height:100px;
    flex-direction:row;
    align-items:center
  }
  .move-button {
    align-self:center
  }
  .rs-section {
    padding:62px 24px;
    grid-template-columns:1fr;
    gap:35px
  }
  .section-intro>p:not(.section-label) {
    max-width:50ch
  }
  .section-intro h2 {
    font-size:35px
  }
  .use-case-list article {
    gap:20px
  }
  .workflow-section {
    padding:55px 24px 26px
  }
  .workflow-heading h2 {
    font-size:34px
  }
  .workflow-steps {
    gap:35px;
    grid-template-columns:1fr;
    margin-top:42px
  }
  .workflow-steps p {
    min-height:0;
    max-width:60ch
  }
  .workflow-steps h3 {
    margin-top:8px
  }
  .workflow-footnote {
    text-align:left;
    line-height:1.7
  }
  .closing-section {
    margin:0 24px 55px;
    align-items:flex-start;
    flex-direction:column;
    gap:16px
  }
  .site-footer {
    width:calc(100% - 48px)
  }
  .footer-bottom {
    font-size:10px;
    flex-wrap:wrap
  }
  .development-section {
    gap:28px
  }
}
@media(max-width:440px) {
  .site-header>nav {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2px 20px
  }
  .site-header {
    width:calc(100% - 36px)
  }
  .rs-brand {
    font-size:25px
  }
  .rs-account {
    font-size:10px;
    padding:8px 10px;
    min-height:36px
  }
  .theme-actions {
    gap:5px
  }
  .rs-hero {
    padding:32px 20px
  }
  .rs-home h1 {
    font-size:38px;
    letter-spacing:-1.9px
  }
  .hero-description {
    font-size:15px
  }
  .hero-actions .rs-button {
    font-size:12px
  }
  .hero-actions .text-link {
    font-size:12px
  }
  .scene-header {
    padding:0;
    font-size:10px
  }
  .scene-example {
    font-size:9px
  }
  .warehouse-controls {
    padding:16px;
  }
  .scene-controls {
    margin:0;
    width:100%
  }
  .scene-controls button {
    font-size:10px;
    padding:7px 9px
  }
  .move-summary {
    padding:0;
    flex-direction:column;
    align-items:flex-start;
    min-height:160px;
    gap:15px
  }
  .move-button {
    align-self:flex-start
  }
  .move-summary strong {
    font-size:15px
  }
  .move-summary p {
    font-size:11px
  }
  .scene-disclaimer {
    font-size:9px
  }
  .rs-section {
    padding-left:20px;
    padding-right:20px
  }
  .section-intro h2 {
    font-size:32px
  }
  .workflow-section {
    padding-left:20px;
    padding-right:20px
  }
  .workflow-heading h2 {
    font-size:30px
  }
  .closing-section h2 {
    font-size:28px
  }
  .site-footer {
    width:calc(100% - 40px)
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .move-path,.destination {
    transition:none
  }
  .is-proposed .move-path {
    animation:none
  }
}

/* The existing carrier example gives the product direction a concrete basis. */
.decision-example { gap: 48px 80px; padding-bottom: 72px; }
.decision-output { align-self: start; border: 1px solid var(--hair); border-radius: 8px; background: var(--surface); overflow: hidden; }
.output-caption { display: flex; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--hair); color: var(--muted); font-size: 11px; }
.output-caption span:first-child { color: var(--ink); font-weight: 600; }
.decision-output pre { margin: 0; padding: 24px 22px; border: 0; border-radius: 0; background: transparent; font-size: 12px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.decision-output pre code { color: var(--ink); background: transparent; font-size: inherit; }
.output-note { padding: 17px 22px; margin: 0; border-top: 1px solid var(--hair); color: var(--muted); font-size: 11px; line-height: 1.8; }
.decision-scope { grid-column: 1 / -1; border-top: 1px solid var(--hair); padding-top: 28px; }
.scope-heading { font-size: 12px; font-weight: 600; margin: 0 0 18px; }
.verdict-key { display: flex; justify-content: space-between; gap: 18px; margin: 0 0 34px; }
.verdict-key dt { color: var(--red); font-family: var(--mono); font-size: 14px; }
.verdict-key dd { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.decision-links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.decision-links a { color: var(--muted); font-size: 12px; line-height: 1.7; text-underline-offset: 4px; }
.decision-links a:hover { color: var(--red); }
.development-section { border-top: 1px solid var(--hair); }
@media (max-width: 820px) {
  .decision-example { gap: 32px; }
  .verdict-key { flex-wrap: wrap; justify-content: flex-start; gap: 20px 30px; }
  .verdict-key > div { min-width: 125px; }
}

.workflow-footnote a { color: inherit; text-underline-offset: 4px; }