/* Laravel: one request on red. White type, the dashed line of a terminal as the road of the request, a cross at
   every stop, numbers large. The response at the end is the only white plate on the page. */
.page-laravel main { max-width: 1240px; margin: 0 auto; padding-top: clamp(20px, 4vh, 40px); }
.rq-head { display: grid; gap: 14px; }
.rq-line { font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; letter-spacing: 0.04em; }
.rq-line::before { content: '> '; }
.rq-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px clamp(12px, 2vw, 26px); }
.rq-title .mark { width: clamp(54px, 9vw, 124px); height: clamp(54px, 9vw, 124px); flex: none; }
.rq-title h1 { font-size: clamp(64px, 13vw, 176px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.9; }
.rq-title p { align-self: flex-end; padding-bottom: clamp(4px, 1.4vw, 20px); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.rq-headers { display: flex; flex-wrap: wrap; gap: 4px 30px; margin: 0; font-size: clamp(16px, 1.5vw, 20px); }
.rq-headers div { display: flex; gap: 8px; }
.rq-headers dt { font-weight: 800; }

.rq-flow { --path: 250px; --lane: 60px; position: relative; margin-top: clamp(44px, 8vh, 84px); }
.route { position: absolute; top: 0; bottom: 0; left: calc(var(--path) + var(--lane) / 2 - 1.5px); width: 3px; background: repeating-linear-gradient(to bottom, #fff 0 12px, transparent 12px 22px); }
.rq-stage { position: relative; display: grid; grid-template-columns: var(--path) var(--lane) minmax(0, 1fr); padding-bottom: clamp(48px, 8vh, 80px); }
.rq-stage:last-child { padding-bottom: 8px; }
.rq-path { padding-top: 12px; text-align: right; font-size: 15.5px; font-weight: 700; letter-spacing: 0.03em; line-height: 1.3; }
/* the cross of a terminal table: a stop of the request */
.stop { justify-self: center; margin-top: 9px; width: 23px; height: 23px; background: linear-gradient(#fff, #fff) center / 100% 3px no-repeat, linear-gradient(#fff, #fff) center / 3px 100% no-repeat, var(--paper); }
.rq-body { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.rq-body h2 { max-width: 100%; font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.rq-body > p { max-width: 58ch; font-size: 18.5px; line-height: 1.5; }
.page-laravel .figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px 40px; justify-self: stretch; }
.page-laravel .fig { display: grid; gap: 4px; align-content: start; }
.page-laravel .fig b { display: flex; align-items: center; gap: 0.25em; font-size: clamp(40px, 4.6vw, 62px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.page-laravel .fig span { max-width: 30ch; font-size: 16.5px; line-height: 1.4; }
.arr { width: 0.62em; height: 0.4em; flex: none; }
.rq-path .arr { width: 1.05em; height: 0.66em; margin: 0 0.1em; vertical-align: -0.02em; }
.rq-path .arr path { stroke-width: 2.6; }

.rq-stack-box { justify-self: stretch; display: grid; gap: 10px; }
.rq-stack-box h3, .pkg .tag { font-size: 14px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.rq-stack { display: flex; flex-wrap: wrap; gap: 8px; }
.rq-stack li { padding: 4px 11px 5px; border: 2px solid #fff; font-size: 15.5px; font-weight: 700; }
.pkgs { justify-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pkg { display: grid; gap: 8px; align-content: start; padding: 20px 22px; border: 3px dashed #fff; }
.pkg h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.pkg h3 a { text-decoration-thickness: 2px; }
.pkg p { font-size: 16.5px; line-height: 1.5; }
.resp { padding: 13px 20px 14px; background: #fff; color: var(--paper); font-size: clamp(18px, 1.9vw, 24px); font-weight: 800; letter-spacing: 0.02em; }

@media (max-width: 899px) {
  .rq-flow { --path: 170px; --lane: 48px; }
  .pkgs { grid-template-columns: minmax(0, 1fr); }
}
/* a phone: the line on the left, the place of a stage above its title */
@media (max-width: 639px) {
  .rq-flow { --lane: 36px; }
  .route { left: 10px; }
  .rq-stage { grid-template-columns: var(--lane) minmax(0, 1fr); }
  .stop { grid-column: 1; grid-row: 1; justify-self: start; margin-top: 0; }
  .rq-path { grid-column: 2; grid-row: 1; padding-top: 1px; text-align: left; }
  .rq-body { grid-column: 2; grid-row: 2; margin-top: 8px; }
  .rq-body h2 { font-size: clamp(24px, 7.2vw, 34px); }      /* the longest title, in Russian, fits a phone of 360 px */
  .page-laravel .figs { grid-template-columns: minmax(0, 1fr); }
  .page-laravel .fig b { white-space: normal; flex-wrap: wrap; }
}