/* 12 Posting. The headline with "connect once" under it and the request on the right, then the calendar, then the
   one buying moment of the pipeline story. Laptop: one calendar card – the accounts and the 1/2/3 switch on top, a
   time column and four days (RU; the English shows five from 1240px). Tablet: the same days as a swipe row of day cards, each slot with
   its own time. Phone: the whole week as one grid card right under the request (the request and all seven days
   share a 375x667 screen) with the best slot's title under the week, the accounts ("Connected") and the switch under
   the card. Before the request the week is empty: day names, hours and hairlines, no placeholder tiles. A slot is
   drawn only when its short is scheduled: it pops in with the short and its title (on the phone grid: the short's
   frame); the best one gets a yellow ring and a "Best" tab on its top edge, clear of the day label. An hour the
   rhythm does not use stays as a dimmed empty row, so the calendar never changes size. */
.ps { --dh: 24px; --dg: 18px; --sh: 72px; --sg: 10px; }
.ps-hd { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s5) var(--s6); align-items: end; }
.ps-hd .lead { max-width: 31em; }
.ps-ask { justify-self: end; --ask-max: 460px; }

/* The calendar card */
.ps-cal { margin-top: 40px; padding: 20px 28px 16px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-3); }
.ps-calhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
/* The accounts, connected once: both logos, the word and a check – a status line, not a button */
.ps-accts { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 0; font-size: 17px; line-height: 1; }
.ps-accts b { margin: 0 8px 0 8px; font-weight: 600; color: var(--ink); }
.ps-logo { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.ps-logo .ico { width: 18px; height: 18px; }
.ps-logo.yt { background: #ff0033; }
.ps-logo.ig { background: linear-gradient(45deg, #f9b230, #e33b68 50%, #8a3ab9); }
.ps-ok { width: 20px; height: 20px; color: var(--ok); stroke-width: 2.2; }
/* 1, 2 or 3 a day: 44px buttons */
.ps-per { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-ctl); background: var(--soft); }
.ps-per button { width: 44px; height: 44px; border: 0; border-radius: 11px; background: none; font: 600 18px/1 var(--font); color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s; }
.ps-per button:hover { background: var(--soft-2); }
.ps-per button[aria-pressed="true"] { background: var(--green); color: var(--green-ink); }
.ps-per span { padding: 0 12px 0 8px; font-size: 16px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }

/* The week: a time column and the day columns, every row the same height so the times line up */
.ps-body { display: grid; grid-template-columns: 64px minmax(0, 1fr); }
.ps-times { display: grid; grid-auto-rows: var(--sh); row-gap: var(--sg); align-items: center; padding-top: calc(var(--dh) + var(--dg)); font-size: 16px; font-weight: 600; color: var(--ink-2); }
.ps-week { --swipe-cols: 5; }
.ps-week .swipe-track { --swipe-gap: 12px; }
.ps-d { display: flex; flex-direction: column; gap: var(--sg); min-width: 0; list-style: none; }
.ps-dn { height: var(--dh); margin: 0 0 calc(var(--dg) - var(--sg)); padding-left: 2px; font-size: 16px; line-height: var(--dh); font-weight: 600; color: var(--muted); }
.ps-slot { position: relative; display: flex; align-items: center; gap: 10px; height: var(--sh); padding: 0 12px 0 10px; border-radius: var(--r-ctl); background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); }
.ps-at { display: none; }
.ps-slot img { flex: none; width: 32px; height: 57px; object-fit: cover; border-radius: var(--r-thumb); background: var(--soft-2); }
.ps-ti { min-width: 0; font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--ink); text-wrap: balance; }
/* Not scheduled yet (or an hour the rhythm does not use): no tile at all, only a hairline above its hour that runs
   on across the days (half a gap each side), so the empty week reads as a calendar. Scheduled: the tile pops in and
   its hairline goes. */
.ps { --cg: 12px; --vg: var(--sg); }
.js .ps-slot:not(.on) { background: none; box-shadow: none; }
.js .ps-slot:not(.on) > * { opacity: 0; }
.js .ps-slot:not(.on)::before { content: ""; position: absolute; left: calc(var(--cg) / -2); right: calc(var(--cg) / -2); top: calc(var(--vg) / -2 - .5px); height: 1px; background: var(--line); pointer-events: none; }
.js .ps-slot.on { animation: ps-in .42s var(--ease) both; }
@keyframes ps-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
/* The hours the rhythm does not use stay as rows, dimmed */
.ps-times span { transition: opacity .3s ease; }
.ps-times .off { opacity: .4; }
.ps-slot.best.on { box-shadow: inset 0 0 0 2px var(--yellow); }
.ps-slot.best.on::after { content: "Лучший"; position: absolute; right: 10px; top: -12px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--yellow); color: var(--ink); font: 700 16px/24px var(--font); }
/* RU: four days on every laptop (the English shows five from 1240px). Russian titles need about 165px a line to stay
   on two lines («Закрыто не законом, / а страхом»); five days leave 142px and break four of them into three. The
   request column is wider, so the request keeps one line at 1440 and 1512 at every rhythm («по одному в день» is
   the longest). */
@media (min-width: 1000px) {
  .ps-hd { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .ps-ask { --ask-max: 520px; --ask-w: 46ch; }
  .ps-week { --swipe-cols: 4; }
  .ps-d:nth-child(n+5) { display: none; }
}
@media (min-width: 1240px) { .ps-hd { grid-template-columns: minmax(0, 13fr) minmax(0, 11fr); } }
.ps-cap { display: none; }

/* Under the calendar: how far it reaches, and that nothing is out of your hands */
.ps-calfoot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px var(--s4); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ps-more, .ps-safe { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; line-height: 1.4; font-weight: 500; color: var(--ink-2); }
.ps-more .ico, .ps-safe .ico { width: 20px; height: 20px; flex: none; color: var(--green-3); }
.ps-more span, .ps-safe span { text-wrap: balance; }
/* How far the queue reaches is part of the answer: it shows once the days are filled */
.js .ps-more { opacity: 0; transition: opacity .5s ease; }
.js .ps-cal.is-set .ps-more { opacity: 1; }

/* The buying moment: everything from one message, and the button */
.ps-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); margin-top: var(--s4); }
.ps-sum { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 500; color: var(--muted); }
.ps-sum b { display: block; margin-bottom: 2px; font-size: clamp(22px, 1.9vw, 26px); line-height: 1.2; letter-spacing: -0.015em; font-weight: 700; color: var(--ink); }
.ps-foot .btn { flex: none; }

/* Tablet (and the base the phone grid below overrides): the days are a swipe row of day cards; each slot carries
   its own time. An empty slot is just its time over a hairline (an agenda with nothing in it yet); the short and its
   title come in when it is scheduled. */
@media (max-width: 999px) {
  .ps-hd { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .ps-cal { margin-top: var(--s5); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .ps-calhead { margin-bottom: 12px; }
  .ps-body { display: block; }
  .ps-times { display: none; }
  .ps-d { gap: 8px; padding: 16px 14px 14px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-2); }
  .ps-dn { height: auto; margin: 0 0 6px 2px; padding: 0; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--ink); }
  .ps-slot { height: 72px; transition: background .3s ease, box-shadow .3s ease, border-radius .3s ease; }
  .ps-at { display: block; flex: none; width: 50px; font-size: 16px; font-weight: 600; color: var(--muted); transition: opacity .3s ease; }
  .ps-slot img { width: 34px; height: 60px; }
  .ps-slot.best.on::after { right: 12px; }
  .js .ps-slot:not(.on) { border-radius: 0; box-shadow: inset 0 -1px 0 var(--line); }
  .js .ps-slot:not(.on)::before { display: none; }
  .js .ps-slot > img, .js .ps-slot > .ps-ti { transition: opacity .35s ease; }
  .js .ps-slot:not(.on) > .ps-at { opacity: 1; }
  .js .ps-slot.on { animation-name: ps-in-t; }
  .js .ps-slot.off > .ps-at { opacity: .4; }
  .ps-calfoot { margin-top: 0; padding-top: 0; border: 0; flex-direction: column; }
  .ps-more { order: 2; }   /* it shows after the filling: below, so it leaves no hole while hidden */
}
@keyframes ps-in-t { from { transform: scale(.96); } to { transform: none; } }
/* Phone: the whole week at once, right under the request – one calendar card, a time column and seven day columns,
   each slot a short's own frame (its title is read aloud, not shown: 34px columns hold no words), and under the week,
   in the same card, the best slot's time and the title it wrote. Before the request: day names, hours and a hairline
   above each hour and under the last. Each slot pops in as its short is scheduled, best first; nothing moves
   sideways and the grid never changes size. The request and the whole card share even a 375x667 screen at the
   natural stop (a short screen gets slightly shorter slots). Under the card: the accounts with "Connected", then
   the 1/2/3 switch, then the line about moving a short. */
@media (max-width: 719px) {
  .ps { --ch: 60px; --rg: 6px; --dnh: 22px; --dng: 16px; --cg: 6px; --vg: var(--rg); }
  .ps-hd { gap: var(--s4); }
  .ps-hd .lead { margin-top: 14px; }
  .ps-cal { display: flex; flex-direction: column; margin-top: var(--s4); }
  .ps-body { order: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding: 12px 12px 14px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-2); }
  .ps-times { display: grid; grid-auto-rows: var(--ch); row-gap: var(--rg); align-items: center; padding-top: calc(var(--dnh) + var(--dng)); font-size: 16px; font-weight: 600; color: var(--muted); }
  .ps .ps-week .swipe-track { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 var(--cg); margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .ps .ps-week .swipe-track > * { width: auto; }
  .ps .ps-week .swipe-nav { display: none; }
  .ps-d { gap: var(--rg); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  /* Flex centring keeps a day name a little wider than its 32–34px column ("Wed") centred over it */
  .ps-dn { display: flex; justify-content: center; height: var(--dnh); margin: 0 0 calc(var(--dng) - var(--rg)); padding: 0; font-size: 16px; line-height: var(--dnh); font-weight: 600; letter-spacing: -0.01em; color: var(--ink-2); white-space: nowrap; }
  .ps-slot { height: var(--ch); padding: 0; border-radius: 8px; background: var(--soft-2); box-shadow: none; }
  .ps-at { display: none; }
  .ps-slot img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
  .ps-ti { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .js .ps-slot:not(.on) { border-radius: 8px; box-shadow: none; }
  .js .ps-slot:not(.on)::before { display: block; }
  .js .ps-slot[data-r="2"]:not(.on)::after { content: ""; position: absolute; left: calc(var(--cg) / -2); right: calc(var(--cg) / -2); bottom: calc(var(--vg) / -2 - .5px); height: 1px; background: var(--line); pointer-events: none; }   /* and one under the last hour */
  .js .ps-slot.on { animation-name: ps-in; }
  /* The best one: a yellow ring and the "Best" tab on its top edge, right-aligned, clear of the day name above */
  .ps-slot.best.on { box-shadow: 0 0 0 2px var(--yellow); }
  .ps-slot.best.on::after { z-index: 1; right: -2px; top: -11px; height: 22px; padding: 0 6px; line-height: 22px; }
  /* The title it wrote, for the best slot (the frames are too small for words): an agenda line under the week, its
     slot's day and hour, then the title. It comes with the best one and stays. */
  .ps-cap { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; min-width: 0; margin: 12px 0 0 2px; font-size: 16px; line-height: 24px; }
  .ps-cap-at { flex: none; font-weight: 600; color: var(--muted); white-space: nowrap; }
  .ps-cap-t { min-width: 0; font-weight: 700; color: var(--ink); text-wrap: balance; }
  .js .ps-cap { opacity: 0; transition: opacity .4s ease; }
  .js .ps-cal.has-best .ps-cap { opacity: 1; }
  /* Under the card: both accounts with the word, then the switch on its own line */
  .ps-calhead { order: 2; flex-wrap: wrap; justify-content: flex-start; gap: 6px var(--s3); margin: var(--s3) 0 4px; }
  .ps-accts { font-size: 16px; }
  .ps-accts b { margin: 0 0 0 10px; }
  .ps-ok { margin-left: 6px; }
  .ps-per span { padding: 0 8px 0 6px; }
  .ps-calfoot { order: 3; }
  .ps-more, .ps-safe { font-size: 16px; align-items: flex-start; }
  .ps-more .ico, .ps-safe .ico { margin-top: 1px; }
  .ps-foot { flex-direction: column; align-items: flex-start; margin-top: var(--s5); }
  .ps-sum b { font-size: 22px; }
}
/* A short phone (375x667 and Safari's shorter screens): slightly shorter slots, so the title line fits the card into
   the screen with the request */
@media (max-width: 719px) and (max-height: 760px) {
  .ps { --ch: 50px; }
  .ps-cal { margin-top: var(--s3); }
  .ps-body { padding-bottom: 12px; }
  .ps-cap { margin-top: 10px; }
}
/* Narrow phones (360): a little more room for the seven columns */
@media (max-width: 374px) { .ps-body { padding-inline: 10px; column-gap: 6px; } .ps { --cg: 5px; } }
@media (prefers-reduced-motion: reduce) { .js .ps-slot.on { animation: none; } }