/* v20 «Раньше было везде. Теперь всё в Kasuar», 27.10.2026: between the first screen and the demo. The same order lies in
   pieces (a calendar page, a sticky note, a scrap with the address, a notebook page, a thought, a receipt, a message) and,
   on the other side, is one card in Kasuar (the real screen, the same figures).
   Computer: «Раньше было везде» over the pieces on the left, «Теперь всё в Kasuar» over a larger phone on the right.
   Phone held upright (app.js adds .is-scroll): the heading and the phone ride along under the finger, the pieces come up
   from below as the page scrolls and dive into the phone when they reach it; the phone grows to 86% of the width and
   lights up, and once all are in, «Раньше было везде» fades into «Теперь всё в Kasuar». Scrolling back undoes it.
   Without the script, with reduced motion and up to 1000 px everything simply stands one under another.
   Heading and text sizes and the gaps come from standard-v19.css. */
/* no overflow on .mess at all: hidden makes it a scroll box, and iOS Safari also stops the phone scene sticking under
   overflow-x:clip (Chromium does not); the tilted pieces stay inside the page margins, so nothing scrolls sideways */
.mess{background:var(--white);color:var(--green)}
.mess-head{margin:0;color:var(--green)}
.mess-head-after{color:#3F6B57}
.mess-note{margin:0;color:var(--ink,#22342E)}
/* our logo inside the text: the app icon (a square master - its corners are rounded here) and the «Kasuar» wordmark,
   both sized from the font. The owner: the logo must not be smaller than the text - the wordmark is as tall as Oswald's
   capitals (.81em), the icon a little taller and centred on them (vertical-align puts the icon's bottom .145em under the
   baseline, the wordmark sits on it) */
.kasuar-logo{display:inline-flex;align-items:center;gap:.16em;vertical-align:-.145em;white-space:nowrap}
.kasuar-logo img{display:block;max-width:none}
.kasuar-logo img:first-child{width:1.1em;height:1.1em;border-radius:22%}
.kasuar-logo img:last-child{width:auto;height:.81em}

.mess-arrow{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--yellow);color:var(--green)}
.mess-arrow .icon{width:26px;height:26px;stroke-width:2}

/* .mess-hold (headings, text, phone) and .mess-heads only group things for the phone scene; elsewhere their children
   are the stage's own grid or flex items */
.mess-hold,.mess-heads{display:contents}
/* «Теперь всё в» and the logo on its own line below it, with a little air between them (the owner) */
.mess-head-after .kasuar-logo{display:flex;width:max-content;margin:.22em auto 0}

/* computer: two columns with their own headings, the yellow arrow between them */
.mess-stage{display:grid;grid-template-columns:minmax(0,1fr) 64px 420px;grid-template-areas:"before . after" "pile arrow note" "pile arrow phone";column-gap:44px;align-items:start}
.mess-head-before{grid-area:before}
.mess-head-after{grid-area:after;text-align:center}
.mess-note{grid-area:note;margin-top:var(--head-gap);text-align:center}
.mess-pile{grid-area:pile;margin-top:var(--body-gap)}
.mess-arrow{grid-area:arrow;align-self:center}
.mess-phone{grid-area:phone;justify-self:center;margin-top:var(--body-gap)}

/* the pile: each piece sits at its own place and angle (--r) */
.mess-pile{position:relative;height:460px}
.scrap{--r:0deg;position:absolute;box-sizing:border-box;color:#22342E;font-family:Manrope,Arial,sans-serif;box-shadow:0 12px 26px #0F2A2524,0 2px 5px #0F2A251A;transform:rotate(var(--r))}
/* handwriting: an ink-blue slanted line, as if written with a pen */
.scrap-paper,.scrap-pad{color:#1F3F8F;font-style:oblique 9deg;font-weight:500}
/* a tear-off calendar page: the day of the visit and a note in red */
.scrap-calendar{--r:-5deg;left:0;top:3%;width:128px;padding:0 0 12px;background:#fff;border-radius:8px;text-align:center;overflow:hidden}
.cal-month{display:block;padding:8px 0 6px;background:#E5484D;color:#fff;font:800 11px/1 Manrope,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.scrap-calendar b{display:block;margin-top:6px;font:700 52px/1 Oswald,'Arial Narrow',sans-serif}
.cal-week{display:block;font-size:12px;font-weight:600;line-height:1.3;color:#516A61}
.scrap-calendar i{display:block;margin-top:6px;color:#C0272D;font-size:15px;font-weight:700;font-style:oblique 9deg;line-height:1.2}
.scrap-sticky{--r:6deg;left:24%;top:0;width:168px;padding:16px 14px 18px;background:#FFE15A;font:600 19px/1.15 Oswald,'Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:.02em}
.scrap-sticky b{display:block;font-size:26px;font-weight:700}
.scrap-paper{--r:3deg;left:55%;top:3%;width:210px;padding:14px 16px 22px;background:#fff;font-size:16px;line-height:1.45;clip-path:polygon(0 0,100% 0,100% 88%,92% 96%,84% 89%,75% 97%,66% 90%,57% 98%,47% 90%,38% 97%,28% 89%,18% 96%,9% 88%,0 95%)}
/* notebook lines run under the text: the ruling starts below the top padding (background-position) */
.scrap-pad{--r:3deg;left:4%;top:42%;width:200px;padding:10px 12px 12px 34px;font-size:16px;line-height:26px;background:linear-gradient(90deg,transparent 24px,#E8838A 24px 25px,transparent 25px),repeating-linear-gradient(#FFFDF4 0 25px,#A9C9E8 25px 26px);background-position:0 0,0 10px;background-color:#FFFDF4}
.scrap-pad u{text-decoration-thickness:1.5px;text-underline-offset:3px}
.scrap-receipt{--r:8deg;left:71%;top:39%;width:160px;padding:14px 13px 22px;background:#fff;font:12px/1.55 ui-monospace,Menlo,Consolas,monospace;clip-path:polygon(0 0,100% 0,100% 93%,94% 99%,88% 93%,82% 99%,76% 93%,70% 99%,64% 93%,58% 99%,52% 93%,46% 99%,40% 93%,34% 99%,28% 93%,22% 99%,16% 93%,10% 99%,4% 93%,0 99%)}
.scrap-receipt b{display:block;margin-bottom:6px;text-align:center;letter-spacing:.2em;text-transform:uppercase}
.scrap-receipt span{display:flex;justify-content:space-between;gap:8px}
.scrap-receipt i{font-style:normal}
.scrap-receipt .total{margin-top:6px;padding-top:6px;border-top:1px dashed #22342E66;font-weight:700}
/* what is kept only in the head: a thought cloud with a warning sign */
.scrap-thought{--r:-3deg;left:37%;top:40%;width:186px;padding:18px 18px 18px 22px;background:#fff;border-radius:46% 54% 50% 50%/60% 55% 45% 40%;font-size:16px;font-weight:700;line-height:1.3;text-align:center}
.scrap-thought::before,.scrap-thought::after{content:"";position:absolute;border-radius:50%;background:#fff;box-shadow:0 6px 12px #0F2A251F}
.scrap-thought::before{left:18px;bottom:-15px;width:17px;height:17px}
.scrap-thought::after{left:6px;bottom:-29px;width:9px;height:9px}
.thought-sign{position:absolute;left:-10px;top:-10px;width:30px;height:30px;border-radius:50%;background:var(--yellow);color:var(--green);font:800 19px/30px Manrope,Arial,sans-serif;box-shadow:0 4px 10px #0F2A2533}
.scrap-chat{--r:-3deg;left:26%;top:74%;width:230px;padding:10px 14px 12px;background:#fff;border-radius:18px 18px 18px 4px;font-size:15px;line-height:1.4}
.scrap-chat small{display:block;margin-bottom:3px;font-size:12px;font-weight:800;color:#3F6B57}

/* the phone with the real order screen: the same phone as in the «Всё для выезда в одном заказе» tile (middle-v16
   .say-phone) - the whole screen in a dark frame; on a computer it is larger than there */
.mess-phone{position:relative;width:320px;border:8px solid #0B0F0E;border-radius:38px;overflow:hidden;background:#0B0F0E;box-shadow:0 30px 60px #0F2A2540,0 0 0 1px #ffffff18}
.mess-phone img{display:block;width:100%;height:auto}
/* the screen's dimming in the phone scene: a dark layer whose opacity app.js sets (cheaper than a filter on the image) */
.mess-phone::after{content:"";position:absolute;inset:0;background:#001718;opacity:var(--dim,0);pointer-events:none}

@media(max-width:1100px){.mess-stage{grid-template-columns:minmax(0,1fr) 56px 340px;column-gap:28px}.mess-phone{width:280px}.mess-pile{height:480px}}

/* up to 1000 px (a narrower column made the pieces cover each other), and on a phone without the scroll scene:
   one column - «Раньше было везде», the pieces, the arrow down, «Теперь всё в Kasuar», the text and the phone */
@media(max-width:1000px){
 .mess-stage{display:flex;flex-direction:column;align-items:stretch}
 .mess-head-before{order:1}.mess-pile{order:2}.mess-arrow{order:3}.mess-head-after{order:4}.mess-note{order:5}.mess-phone{order:6}
 .mess-head-after,.mess-note{text-align:left}
 .mess-head-after .kasuar-logo{margin-left:0}
 .mess-pile{width:100%;max-width:640px;margin:var(--body-gap) auto 0}
 .mess-arrow{align-self:center;margin:24px auto var(--body-gap)}
 .mess-arrow .icon{transform:rotate(90deg)}
 .mess-phone{align-self:center;width:250px}
}
@media(max-width:700px){
 .mess-pile{height:380px;max-width:none}
 .scrap-calendar{left:0;top:1%;width:94px;padding-bottom:9px}
 .cal-month{padding:6px 0 5px;font-size:9px}
 .scrap-calendar b{font-size:38px}
 .cal-week{font-size:10px}
 .scrap-calendar i{font-size:12px}
 /* the sticky note lies on top of the address scrap, whose text starts a little further right */
 .scrap-sticky{left:24%;top:0;width:112px;padding:12px 10px 14px;font-size:13px;z-index:1}
 .scrap-sticky b{font-size:19px}
 .scrap-paper{left:auto;right:0;top:2%;width:150px;padding:11px 11px 19px 18px;font-size:12.5px}
 .scrap-pad{left:2%;top:36%;width:172px;padding:8px 10px 10px 28px;font-size:13px;line-height:22px;background:linear-gradient(90deg,transparent 19px,#E8838A 19px 20px,transparent 20px),repeating-linear-gradient(#FFFDF4 0 21px,#A9C9E8 21px 22px);background-position:0 0,0 8px}
 .scrap-receipt{left:auto;right:0;top:34%;width:122px;padding:11px 9px 17px;font-size:10px}
 .scrap-thought{left:30%;top:61%;width:150px;padding:13px 12px 13px 16px;font-size:13px}
 .thought-sign{left:auto;right:-8px;width:24px;height:24px;font-size:15px;line-height:24px}
 .scrap-chat{left:30%;top:78%;width:182px;padding:8px 11px 10px;font-size:12.5px}
 .scrap-chat small{font-size:11px}
 .mess-arrow{width:48px;height:48px}
 .mess-phone{width:min(86vw,360px);border-width:7px;border-radius:40px}
}
@media(max-width:360px){
 .scrap-sticky{width:104px;font-size:12px}
 .scrap-sticky b{font-size:17px}
 .scrap-paper{width:136px;padding-left:24px;font-size:11.5px}
 .scrap-pad{width:158px;font-size:12px}
 .scrap-receipt{width:112px;font-size:9.5px}
 .scrap-thought{width:136px;font-size:12px}
 .scrap-chat{width:166px;font-size:11.5px}
}

/* phone held upright, with the script: the scene. Nothing sticks - the block simply scrolls, and the scroll drives it
   from the moment the block comes in at the bottom of the screen until its top reaches the header (the owner: no
   holding, the animation is over by then). The pieces lie under the heading over the lower part of the dimmed phone;
   once all of them are on the screen they go into the phone almost together, while the phone rises and grows to its
   full size, and «Раньше было везде» fades into «Теперь всё в Kasuar». The phone grows from its top edge */
@media(max-width:700px){
 .mess.is-scroll .mess-stage{display:block;position:relative}
 .mess.is-scroll .mess-hold{display:block}
 .mess.is-scroll .mess-heads{display:grid}
 .mess.is-scroll .mess-head{grid-area:1/1}
 .mess.is-scroll .mess-head-after{opacity:0;transition:opacity .35s ease}
 .mess.is-scroll .mess-head-before{transition:opacity .35s ease .3s}
 .mess.is-scroll.is-collected .mess-head-before{opacity:0;transition-delay:0s}
 .mess.is-scroll.is-collected .mess-head-after{opacity:1;transition-delay:.3s}
 .mess.is-scroll .mess-note,.mess.is-scroll .mess-arrow{display:none}
 .mess.is-scroll .mess-phone{margin:24px auto 0;transform-origin:50% 0;will-change:transform}
 .mess.is-scroll .mess-pile{position:absolute;left:0;right:0;top:var(--pile-top,140px);z-index:2;margin:0;pointer-events:none}
 .mess.is-scroll .scrap{will-change:transform,opacity}
}
@media print{.mess-arrow{display:none}.mess-pile,.mess-phone{break-inside:avoid}}