/* ==========================================================================
   pages/home.css — the home statement, the glance line and the path pair.
   Swiss Editorial: hierarchy from size and grey, hairlines between sections.
   ========================================================================== */

.hero { padding-block: clamp(96px, 14vw, 208px) clamp(64px, 8vw, 120px); }
.statement {
  grid-column: 1 / span 9;
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  font-weight: 500;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.hero__actions { grid-column: 1 / -1; margin-block-start: clamp(40px, 5vw, 72px); }

/* The at-a-glance sentence: numbers in ink, the rest grey. */
.stats-line {
  grid-column: 3 / span 9;
  font-size: var(--t-hero); line-height: var(--lh-tight); font-weight: 500;
  letter-spacing: var(--track-display); color: var(--grey); text-wrap: balance;
}
.stats-line b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.stats-line__end { color: var(--ink); }
@media (max-width: 63.99rem) { .stats-line { grid-column: 1 / -1; } }

/* Two paths: shipping company / service provider. Hairline between, no cards. */
.paths { grid-column: 3 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); }
.path { display: flex; flex-direction: column; gap: var(--s-4); }
.path + .path { padding-inline-start: var(--s-7); border-inline-start: 1px solid var(--rule); }
.path__kicker { color: var(--grey-text); font-size: var(--t-s); }
.path__head { font-size: var(--t-l); line-height: var(--lh-head); font-weight: 500; letter-spacing: var(--track-head); text-wrap: balance; }
.path__text { color: var(--grey-text); max-width: 32em; }
.path__more { margin-block-start: auto; padding-block-start: var(--s-3); }
@media (max-width: 63.99rem) {
  .paths { grid-column: 1 / -1; grid-template-columns: 1fr; gap: var(--s-6); }
  .path + .path { padding-inline-start: 0; border-inline-start: 0; padding-block-start: var(--s-6); border-block-start: 1px solid var(--rule); }
}

/* Numbered steps, hairline-separated. (.steps is taken by the workspace.) */
.how { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.how__step { display: block; padding-block-start: var(--s-4); border-block-start: 1px solid var(--ink); }
.how__num { display: block; color: var(--grey-text); font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.how__head { margin-block-start: var(--s-3); font-size: var(--t-m); line-height: 1.3; font-weight: 500; letter-spacing: var(--track-head); }
.how__text { margin-block-start: var(--s-2); color: var(--grey-text); }
@media (max-width: 63.99rem) { .how { grid-column: 1 / -1; grid-template-columns: 1fr; gap: var(--s-5); } }

/* Operators the workflow is built for: greyscale marks on the paper. */
.marks { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-6) var(--s-5); align-items: center; margin-block-start: var(--s-6); }
.marks li { display: flex; align-items: center; justify-content: center; min-height: 44px; }
.marks img { max-height: 26px; width: auto; opacity: 0.55; filter: grayscale(1) var(--img-filter); transition: opacity var(--dur) var(--ease); }
.marks li:hover img { opacity: 1; }
:root[data-theme="dark"] .marks img, :root:not([data-theme="light"]) .marks img { filter: grayscale(1) invert(1) brightness(1.6); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .marks img { filter: grayscale(1); } }
@media (max-width: 63.99rem) { .marks { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 47.99rem) { .marks { grid-template-columns: repeat(3, 1fr); } }