/* The customer routes (the design agency's direction, owner 2026-11-01): routing tiles, the flows, package lanes, the Box offer and what an
   enterprise receives. Brought from site-v5 with its Marketplace (owner, 2026-11-03); here used by Marketplace, Growing teams and
   Enterprise. Tokens only. */

.rt-section__h { margin: 12px 0 clamp(32px, 4vw, 56px); max-width: 24em; }
.rt-actions { margin-top: clamp(28px, 3vw, 40px); }

/* ---------- the two routing tiles ---------- */
.rt-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rt-tile { display: flex; flex-direction: column; min-width: 0; padding: clamp(24px, 3vw, 44px); border-radius: var(--r-xl); background: var(--panel); }
.rt-tile__t { margin-top: 14px; font-family: var(--font-head); font-weight: 700; font-size: var(--t-h3); line-height: 1.1; letter-spacing: -0.03em; }
.rt-tile__text { margin-top: 14px; max-width: 46em; line-height: 1.6; color: var(--ink-2); }
.rt-tile__go { margin-top: auto; padding-top: 24px; }
.rt-tile__go .btn { white-space: normal; }
.rt-names { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 18px 0; }
.rt-names li { padding: 8px 16px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 30%, var(--bg)); font-size: var(--t-small); font-weight: 600; line-height: 1.3; }
.rt-names + .rt-offer { margin-top: 24px; }
.rt-journey { margin-top: clamp(32px, 4vw, 56px); }

/* the finder's steps above the tiles, and the industry's system below them */
.rt-steps { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 20px; }
.rt-steps li { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-small); font-weight: 600; color: var(--ink-2); }
.rt-steps span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--panel); font-size: var(--t-cap); color: var(--ink); }

/* the problem finder in the Marketplace's hero */
.rt-guide { width: min(100%, 600px); margin-bottom: 14px; font-family: var(--font-head); font-weight: 700; font-size: var(--t-h6); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.rt-finder { width: min(100%, 600px); margin-top: 18px; }
.rt-finder__pills + .rt-finder__pills { margin-top: 10px; }
.rt-finder .pill { background: var(--bg); }
.rt-finder .pill[aria-pressed="true"] { background: var(--ink); }
:root:not(.js) .rt-finder { display: none; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .rt-guide, .rt-finder { width: min(100%, 480px); }
}

/* ---------- a flow: numbered steps on one rail that fills ---------- */
.flow { --n: 5; --flow-gap: clamp(12px, 1.6vw, 24px); --dot: 44px; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--flow-gap); }
.flow--3 { --n: 3; }
.flow::before, .flow::after {
  content: ""; position: absolute; top: calc(var(--dot) / 2 - 1px); left: calc(var(--dot) / 2); height: 2px;
  right: calc((100% - (var(--n) - 1) * var(--flow-gap)) / var(--n) - var(--dot) / 2 + 0px);
}
.flow::before { background: var(--line-2); }
.flow::after { background: var(--gold); transform-origin: left center; }
.flow__step { position: relative; z-index: 1; min-width: 0; }
.flow__dot { display: grid; place-items: center; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--gold); color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: var(--t-body); }
.flow__t { margin-top: 14px; font-family: var(--font-head); font-weight: 700; font-size: var(--t-h6); line-height: 1.2; letter-spacing: -0.01em; }
/* the motion: only where motion is on (motion-boot's .m-on), so without it the flow simply shows complete */
.m-on .flow::after { transform: scaleX(0); transition: transform 1.6s var(--ease); }
.m-on .flow.is-on::after { transform: scaleX(1); }
.m-on .flow__dot { background: var(--bg); box-shadow: inset 0 0 0 2px var(--line-2); color: var(--ink-num); transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease), color 0.3s var(--ease); }
.m-on .flow.is-on .flow__dot { background: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); color: var(--ink); }
.m-on .flow.is-on .flow__step:nth-child(2) .flow__dot { transition-delay: 0.35s; }
.m-on .flow.is-on .flow__step:nth-child(3) .flow__dot { transition-delay: 0.7s; }
.m-on .flow.is-on .flow__step:nth-child(4) .flow__dot { transition-delay: 1.05s; }
.m-on .flow.is-on .flow__step:nth-child(5) .flow__dot { transition-delay: 1.4s; }
.flow--small { --dot: 36px; }
.flow--small .flow__t { margin-top: 10px; font-size: var(--t-body); }

/* ---------- the Box offer ---------- */
.rt-offer { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.rt-offer__price, .rt-offer__ship { min-width: 0; padding: clamp(24px, 3vw, 44px); border-radius: var(--r-xl); background: var(--panel); }
.rt-offer__n { font-family: var(--font-head); font-weight: 700; font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.04em; }
.rt-offer__h { margin-top: 24px; font: 600 var(--t-kicker)/1.3 var(--font);   /* spaced capitals: 16px here (owner, 2026-11-03) */ letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold-ink); }
.rt-offer__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin-top: 12px; }
.rt-offer__list li { display: flex; align-items: center; gap: 10px; font-weight: 600; line-height: 1.3; }
.rt-tick { flex: none; width: 16px; height: 16px; color: var(--gold-ink); }
.rt-offer__h--opt { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-2); color: var(--ink-num); }
.rt-offer__opt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rt-offer__opt li { padding: 7px 14px; border: 1px dashed var(--line-3); border-radius: 999px; font-size: var(--t-small); font-weight: 500; color: var(--ink-2); }
.rt-ship { display: inline-block; margin-bottom: 28px; padding: 10px 18px; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 700; line-height: 1.3; }

/* ---------- who an enterprise page is for, its problem, what an enterprise receives ---------- */
.rt-qual { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px clamp(24px, 4vw, 64px); padding-block: clamp(24px, 3vw, 40px); }
.rt-qual__who { font-size: var(--t-lead); font-weight: 600; line-height: 1.45; }
.rt-qual__job { font-family: var(--font-head); font-weight: 700; font-size: var(--t-h4); line-height: 1.2; letter-spacing: -0.02em; }
.rt-receives__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.rt-receive { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: clamp(18px, 1.8vw, 24px); border-radius: var(--r-md); background: var(--panel); font-weight: 600; line-height: 1.3; }
.rt-receive__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); font-size: var(--t-small); font-weight: 700; color: var(--gold-ink); }
.rt-receives__note { margin-top: 18px; font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }

/* ---------- laptops, tablets and phones ---------- */
@media (max-width: 1199px) {
  .rt-receives__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .rt-tiles, .rt-offer, .rt-qual { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .rt-receives__list, .rt-offer__list { grid-template-columns: minmax(0, 1fr); }
  /* a flow runs down the page: dot beside its words, the rail down the dots */
  .flow, .flow--3 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .flow::before, .flow::after { top: calc(var(--dot) / 2); bottom: calc(var(--dot) / 2); left: calc(var(--dot) / 2 - 1px); right: auto; width: 2px; height: auto; }
  .flow::after { transform-origin: center top; }
  .m-on .flow::after { transform: scaleY(0); }
  .m-on .flow.is-on::after { transform: scaleY(1); }
  .flow__step { display: grid; grid-template-columns: var(--dot) minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .flow__t { grid-column: 2; margin-top: 0; padding-top: calc((var(--dot) - 1.2em) / 2); }
  .flow__dot { grid-row: 1 / span 2; }
  .flow--small .flow__t { margin-top: 0; }
  .rt-finder .pill { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow::after, .flow__dot { transition: none; }
}

/* long button words wrap on a phone rather than run off it */
@media (max-width: 479px) {
  .ih__actions .btn { height: auto; padding-block: 12px; line-height: 1.3; text-align: center; white-space: normal; }
}

/* an enterprise page with no feature metrics: About takes the width */
.pd-about__inner:not(:has(.pd-facts)) .pd-about__text { grid-column: 1 / 10; }

.rt-names{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));list-style:none;padding:0}
.rt-names li{background:rgba(0,0,0,.025);border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:16px 18px}
.rt-names__t{display:block;font-weight:700;margin-bottom:.4rem}
.rt-names__d{display:block;color:#555;font-size:.95rem;line-height:1.5}