/* After the demo, 28.10.2026 (the owner): the photo «Нажали - и поехали», the order's two buttons (route and
   «еду к вам» with the time on the road), the client's path in messages from the first call to «как дела» a year later, and the owner's numbers.
   They replace «Всегда под рукой» with the «На выезде» and «Клиенты» tiles. Loaded after standard-v19.css, uses its
   variables (--h2, --lead, --sec, --head-gap, --body-gap) */

/* the two buttons: a dark band that goes on from the photo */
#visit{color:var(--white);padding:var(--body-gap) 0 var(--sec)}
.visit-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:72px;align-items:center}
.visit-shot{position:relative;margin:0;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px #0008,0 0 0 1px #ffffff18}
/* the top of the real order screen (600x1300), rows 70-830: below the status bar, the header with the message button,
   the address card with the route button and its map, as in the app (the owner, 29.10.2026) */
.visit-crop{aspect-ratio:600/760;overflow:hidden;background:#F2F1E8}
.visit-crop img{width:100%;height:auto;max-width:none;margin-top:-11.67%}
/* yellow rings around the two buttons; their centres are measured on the screen above */
.visit-ring{position:absolute;width:15%;aspect-ratio:1;border:3px solid var(--yellow);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 6px #FFDC2540}
.visit-ring-route{left:85.5%;top:53.5%}
.visit-ring-write{left:90.2%;top:5.7%;width:13%}
/* the rings call to press like the «+» button of the demo (the owner, 29.10.2026): the same wave every 2.6 s, stronger
   on the light screen; 1 first, 2 half a beat later. The number stays above the wave */
.visit-ring::after{content:"";position:absolute;inset:-3px;border-radius:50%;animation:visit-ring-call 2.6s ease-out .6s infinite}
.visit-ring-write::after{animation-delay:1.9s}
@keyframes visit-ring-call{0%{box-shadow:0 0 0 0 #FFDC25B3}75%,100%{box-shadow:0 0 0 18px #FFDC2500}}
@media(prefers-reduced-motion:reduce){.visit-ring::after{animation:none}}
/* the number sits outside the ring where it covers nothing: above the route button, under the message button */
.visit-ring b{position:absolute;z-index:1;left:-12px;top:-12px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--yellow);color:var(--green);font-size:15px;font-weight:800;line-height:1}
.visit-ring-write b{top:auto;bottom:-12px}
.visit-steps{list-style:none;margin:0;padding:0;display:grid;gap:40px}
.visit-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px;align-items:start}
.visit-num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--yellow);color:var(--green);font-size:18px;font-weight:800}
.visit-steps h3{margin:4px 0 0;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(28px,3vw,40px);line-height:1.05}
.visit-steps p{margin:12px 0 0;max-width:460px;font-size:18px;line-height:1.6;color:var(--ink-on-dark,#D3E0DA)}

/* the client's path: a timeline of ready messages, the one a year later stands out */
#path{background:var(--paper);padding:var(--sec) 0}
.path-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start}
#path h2,#return h2{margin:0}
#path h2 span{color:#3F6B57}
.path-copy>p{margin:var(--head-gap) 0 0;max-width:620px;font-size:var(--lead);line-height:1.6;color:var(--ink,#22342E)}
.path-chat{list-style:none;margin:0;padding:0 0 0 30px;display:grid;gap:24px}
.path-chat li{position:relative}
.path-chat li::before{content:"";position:absolute;left:-30px;top:2px;box-sizing:border-box;width:14px;height:14px;border:2px solid #3F6B57;border-radius:50%;background:var(--paper)}
/* the line from this dot down to the next one */
.path-chat li:not(:last-child)::after{content:"";position:absolute;left:-24px;top:16px;bottom:-26px;width:2px;background:#C3D2C9}
.path-when{margin:0 0 8px;color:#3F6B57;font-size:12px;font-weight:800;line-height:1.5;letter-spacing:.12em;text-transform:uppercase}
.path-msg{margin:0;max-width:460px;padding:14px 18px;border-radius:18px 18px 18px 4px;background:#fff;color:var(--green);font-size:17px;line-height:1.5;box-shadow:0 10px 30px #0017181a}
.path-chat .path-year::before{border-color:var(--green);background:var(--yellow)}
.path-year .path-when{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--yellow);color:var(--green)}
.path-year .path-msg{background:var(--green);color:var(--white)}
/* the messages drop in one by one (app.js adds .is-drop and then .is-in to each message in turn): the dot, the label,
   then the bubble from above with a light settle, and the line grows down to the next dot. The year's dot lights up
   yellow once its bubble has landed. Without JavaScript and with reduced motion all of them are simply there */
.path-chat.is-drop li::before{transition:opacity .2s,transform .3s cubic-bezier(.34,1.56,.64,1),background-color .3s}
.path-chat.is-drop li::after{transform-origin:top;transition:transform .35s ease .2s}
.path-chat.is-drop .path-when{transition:opacity .2s,transform .25s}
.path-chat.is-drop .path-msg{transition:opacity .2s .12s,transform .45s cubic-bezier(.34,1.56,.64,1) .12s}
.path-chat.is-drop li:not(.is-in)::before{opacity:0;transform:scale(.3)}
.path-chat.is-drop li:not(.is-in)::after{transform:scaleY(0)}
.path-chat.is-drop li:not(.is-in) .path-when{opacity:0;transform:translateY(6px)}
.path-chat.is-drop li:not(.is-in) .path-msg{opacity:0;transform:translateY(-28px)}
.path-chat.is-drop .path-year:not(.is-in)::before{background:var(--paper)}
.path-chat.is-drop .path-year.is-in::before{transition-delay:0s,0s,.55s;animation:path-glow .9s .55s}
@keyframes path-glow{from{box-shadow:0 0 0 0 #FFDC25}to{box-shadow:0 0 0 12px #FFDC2500}}

/* the owner's numbers and the line about Pro (the owner, 28.10.2026); since 29.10.2026 the prices stand before the photo
   «Нажали - и поехали», and «Деньги» follows this block (light since 30.10.2026). The brand dark
   green with the glow of the dark blocks below. The numbers are white, only one is
   yellow: «×3 раза» (the owner's words instead of «в 3 раза») is about the polite masters of the heading and the biggest
   of the three (the owner: one accent, not each). The words around a number («до», «раза») are small, so only the figure
   is big; the × is enlarged to the size of the «+», the font draws it small. On a computer the labels grow with the
   screen up to 28px: 18px and then 22px under 88px figures were too small for the owner. The line about Pro is the
   block's second heading, as the owner asked: the heading's font and size, «Pro окупится» in yellow */
/* «Деньги» after it is light since 30.10.2026, so the block keeps its own air below (before, both were dark and shared
   one gap, and the block reached one pixel under «Деньги» against a light line on the seam) */
#return{color:var(--white);padding:var(--sec) 0}
#return h2{color:var(--white)}
#return h2 span{color:var(--yellow)}
.return-stats{list-style:none;margin:var(--body-gap) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.return-stats li{padding-top:22px;border-top:2px solid #FFFFFF33}
.return-stats b{display:block;font-family:var(--display);font-size:clamp(40px,6vw,88px);font-weight:600;line-height:1;letter-spacing:.01em;text-transform:uppercase;color:var(--white);white-space:nowrap}
.return-stats .return-key b{color:var(--yellow)}
.return-stats b small{font-size:.36em;text-transform:none;letter-spacing:0}
.return-stats b small:first-child{margin-right:.25em}
.return-x{font-size:1.3em;line-height:0;vertical-align:-.03em}
.return-x~small{margin-left:.15em}
.return-stats li>span{display:block;margin-top:14px;font-size:clamp(20px,2.1vw,28px);line-height:1.5;color:var(--ink-on-dark,#D3E0DA)}
.return-pay{margin:var(--body-gap) 0 0;color:var(--white);font-family:var(--display);font-size:var(--h2);font-weight:600;line-height:1.1;letter-spacing:.01em;text-transform:uppercase}
.return-pay span{color:var(--yellow)}

/* the dark green blocks get the glow of the first screen (the owner, 28.10.2026: «везде, где в блоках тёмно-зелёный
   фон, добавь градиентное свечение»): a lighter green fading to the brand dark green, behind the phone in the demo
   (and in «Деньги» until it went light, 30.10.2026), behind the order screen in #visit, in the empty corner by the heading of the numbers. The first screen
   and «Скачайте» have their own glow, the photo «Нажали - и поехали» is a picture. The positions follow each layout:
   the demo goes to one column at 700px, #visit at 900px */
#demo,#visit,#return{background:radial-gradient(ellipse at var(--glow-at,50% 50%),#29483D 0%,#12302B 24%,var(--green) 61%)}
/* the picture of the «+» button has the dark green painted around the round button: lighten keeps that field the
   colour of the glow under it, every colour of the glow is lighter than it */
.how-plus-button img{mix-blend-mode:lighten}
#demo{--glow-at:76% 50%}
#visit{--glow-at:26% 50%}
#return{--glow-at:84% 22%}
/* «Деньги» on the light grey-green of the client's path (the owner, 30.10.2026: «надо бы поменять цвет у этого
   блока»): after the dark numbers, before the dark «Для тех, кто работает на себя». The hand picture is cut out, any background suits it.
   Second line of the heading in the green of the other light headings; «В заработке» is the yellow result */
#money{background:var(--paper);color:var(--green)}
#money .money-copy h2 span{color:#3F6B57}
#money .money-copy>p:not(.eyebrow){color:var(--ink)!important}
#money .money-rule>span{border-color:var(--line)}
#money .money-rule>strong{padding:9px;border-radius:6px;background:var(--yellow);color:var(--green)}

@media(max-width:900px){
  /* the top of #visit stays the plain dark green: on a phone the photo above ends in it */
  #visit{--glow-at:50% 55%}
  #return{--glow-at:80% 18%}
  .visit-layout,.path-layout{grid-template-columns:minmax(0,1fr);gap:var(--body-gap)}
  /* the break evens the two lines on a wide screen; narrower the heading wraps on its own */
  .return-pay br{display:none}
}
@media(max-width:700px){
  #demo{--glow-at:50% 72%}
  .visit-steps{gap:32px}
  .visit-steps li{grid-template-columns:40px minmax(0,1fr);gap:16px}
  .visit-num{width:40px;height:40px;font-size:17px}
  .visit-steps h3{margin-top:5px;font-size:28px}
  .visit-steps p,.return-stats li>span{font-size:16px}
  .visit-ring{border-width:2px}
  .visit-ring b{left:-10px;top:-10px;width:24px;height:24px;font-size:13px}
  .visit-ring-write b{top:auto;bottom:-10px}
  .path-chat{padding-left:26px;gap:20px}
  .path-chat li::before{left:-26px}
  .path-chat li:not(:last-child)::after{left:-20px;bottom:-22px}
  .path-msg{font-size:16px;padding:12px 16px}
  .return-stats{grid-template-columns:minmax(0,1fr);gap:28px}
  .return-stats li{padding-top:18px}
  .return-stats b{font-size:60px}
  .return-stats li>span{margin-top:10px}
  /* on a phone the second heading at full heading size took six lines; the owner: not so big on a phone */
  .return-pay{font-size:28px;text-wrap:balance}
}