/* ============================================================
   Feedly — restored blocks, second file

   Same reason as restore.css: main.css was truncated and several
   sessions are putting it back at once, so each writer keeps to its
   own file rather than clobbering the others. Loaded last, so it
   overrides whatever turns up again elsewhere.

   What is in here — the blocks written in THIS session that no other
   file carries:

     · rating bars in the two comparison cards (.vs) + vsGrow
     · chatIn, the reply that lands a beat after the question
     · the demo request dialog (.lead*) — everything except
       .lead__proof / .lead__brand / .lead__delta, which survived in
       main.css and are deliberately not repeated here
     · the closing section (.finale*) and .btn--outline

   Not in here, because other files already restored them: the header
   capsule, the FAQ, the fold that reveals the extra capability cards,
   and the mocks inside those cards.

   Merge target: paste into main.css in the order above and drop the
   <link>. Nothing here depends on load order beyond sitting after
   main.css.
   ============================================================ */

/* The footer keeps the page's white — no plate, no top rule. I briefly
   tinted it with --linen on the theory that an orphaned surface token
   meant a truncated consumer; the screenshots taken before the file was
   cut show plain white behind the footer, and that is what it is. The
   token is orphaned for some other reason. */

/* ─────────────────────  rating bars  ─────────────────────────
   Used by "Competitor benchmarks" and "Every location, side by
   side": a label, a track, a figure. The bar draws itself in on the
   scroll-driven reveal and holds — the row modifiers (.is-you,
   .is-low) live in restored.css and only recolour the fill. */

.vs{display:grid;gap:11px}
.vs li{
  /* the figure column sizes to the figure: at 30px fixed it clipped
     and pushed 4.6 six pixels past the panel on a 390px screen */
  display:grid;grid-template-columns:64px minmax(0,1fr) auto;
  align-items:center;gap:10px;
  font-size:12.5px;color:var(--muted);
}
.vs i{
  display:block;height:8px;
  border-radius:999px;
  background:var(--sunk);
}
/* the bars draw themselves in, a row at a time, then hold for most of
   the loop — a chart being filled rather than a chart blinking */
.vs i::before{
  content:"";display:block;height:100%;width:var(--v,50%);
  border-radius:inherit;background:#BFBDB9;
  animation:vsGrow 9s cubic-bezier(.2,.7,.25,1) infinite both;
  animation-delay:calc(var(--row,0)*160ms);
}
.vs b{
  text-align:right;font-weight:600;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}

@keyframes vsGrow{
  0%      {width:0}
  22%,92% {width:var(--v,50%)}
  100%    {width:0}
}

/* the reply in the first-line support card lands a beat after the
   question and holds for the rest of the loop — a queue that keeps
   clearing, not a blinking panel */
@keyframes chatIn{
  0%,8%   {opacity:0;transform:translateY(10px)}
  18%,92% {opacity:1;transform:none}
  100%    {opacity:0;transform:translateY(10px)}
}

/* ─────────────────────  demo request dialog  ─────────────────
   The card is the whole dialog: <dialog> brings its own top layer and
   backdrop, so nothing here has to be positioned or z-indexed against
   the page. Opened with showModal() from any call to action carrying
   data-demo; the script lives inline at the end of index.html. */

dialog.lead{
  /* 100% and not 100vw: a modal dialog is laid out in the initial
     containing block, which excludes the scrollbar, while 100vw includes
     it — the difference showed up as a 2.5px gutter where 10px was asked
     for, and the card sitting off the window's optical centre */
  width:min(500px,calc(100% - 32px));
  max-height:calc(100dvh - 32px);
  padding:0;margin:auto;
  border:0;border-radius:22px;
  background:var(--paper);
  box-shadow:0 30px 70px -30px rgba(23,23,26,.45);
  overflow:auto;overscroll-behavior:contain;
}
dialog.lead::backdrop{
  background:rgba(23,23,26,.42);
  backdrop-filter:blur(3px);
}
/* the entrance is a keyframe rather than a transition: the dialog goes
   from display:none to open in one jump */
dialog.lead[open]{animation:leadIn .28s cubic-bezier(.2,.7,.25,1) both}
dialog.lead[open]::backdrop{animation:leadFade .28s ease both}
@keyframes leadIn{from{opacity:0;transform:translateY(14px) scale(.985)} to{opacity:1;transform:none}}
@keyframes leadFade{from{opacity:0} to{opacity:1}}

.lead__card{position:relative;padding:clamp(20px,3vw,26px)}

/* Anchored to the dialog rather than to the card, so it holds its corner
   while the card scrolls under it. The card is positioned too and comes
   later in the markup, so the button needs to be lifted above it. */
.lead__x{
  position:absolute;top:16px;right:16px;z-index:2;
  display:grid;place-items:center;
  width:30px;height:30px;
  border:0;border-radius:50%;
  background:none;color:var(--faint);
  cursor:pointer;
  transition:background-color .16s ease,color .16s ease;
}
/* on a short screen the card slides beneath it, so it needs its own ground
   to stay legible against whatever text is passing behind */
@media (max-height:700px){
  .lead__x{background:var(--paper);box-shadow:0 0 0 4px var(--paper)}
}
.lead__x svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.lead__x:hover{background:var(--chip);color:var(--ink)}

/* who is on the other end */
.lead__who{display:flex;align-items:center;gap:12px;padding-right:34px}
.lead__ava{
  position:relative;flex:none;
  display:grid;place-items:center;
  width:46px;height:46px;
  border-radius:50%;
  /* shows through only while the photo is still arriving */
  background:var(--brand-soft);
}
/* a face rather than the monogram that used to stand here — the letter
   had to live in CSS because as a text node the dictionary translated
   it, and a photo has no such problem */
.lead__ava img{
  display:block;
  width:100%;height:100%;
  border-radius:50%;
  object-fit:cover;
}
.lead__ava i{
  position:absolute;right:0;bottom:1px;
  width:12px;height:12px;border-radius:50%;
  background:#25D366;box-shadow:0 0 0 2.5px var(--paper);
}
.lead__id{display:flex;flex-direction:column;gap:2px;min-width:0}
.lead__id b{font-size:15.5px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.lead__id > span{font-size:13px;color:var(--muted)}

.lead__title{
  margin:18px 0 0;
  font-size:clamp(19px,2.1vw,22px);
  line-height:1.28;letter-spacing:-.018em;font-weight:600;
  color:var(--ink);
}

.lead__bubble{
  margin:14px 0 0;
  padding:13px 15px;
  border-radius:14px;
  background:var(--chip);
  font-size:14.5px;line-height:1.5;
  color:var(--ink-2);
}
.lead__bubble--plain{background:none;padding:0}

/* ── the message being typed ──────────────────────────────────
   Three dots first, then the text — the way it would arrive in the app
   the button is promising. The height between the two states is animated
   by the script, which measures both: there is no honest CSS length to
   transition to between "three dots" and "three lines of Russian".
   Without the script the bubble is simply present, so nothing here is
   load-bearing. */
.lead__chat{overflow:hidden;transition:height .38s cubic-bezier(.2,.7,.25,1)}

.lead__typing{display:none}
.lead__chat.is-typing .lead__bubble{display:none}
.lead__chat.is-typing .lead__typing{
  /* the same top margin as the bubble it stands in for, so the block does
     not shift sideways or upward when the text lands */
  display:inline-flex;align-items:center;gap:5px;
  margin:14px 0 0;padding:16px 17px;
  border-radius:14px;
  background:var(--chip);
}
.lead__typing i{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--faint);
  animation:leadDot 1.3s ease-in-out infinite;
}
.lead__typing i:nth-child(2){animation-delay:.17s}
.lead__typing i:nth-child(3){animation-delay:.34s}

/* the text lands rather than blinks on */
.lead__chat .lead__bubble{animation:leadSaid .34s cubic-bezier(.2,.7,.25,1) both}

@keyframes leadDot{
  0%,58%,100%{transform:translateY(0);opacity:.45}
  29%{transform:translateY(-4px);opacity:1}
}
@keyframes leadSaid{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* a visitor who has asked for less motion is asking not to be made to
   wait for an animation either — they get the message immediately */
@media (prefers-reduced-motion:reduce){
  .lead__chat{transition:none}
  .lead__typing i,
  .lead__chat .lead__bubble{animation:none}
}

.lead__form{margin-top:18px}
.lead__label{
  display:block;margin:14px 0 7px;
  font-size:13px;font-weight:600;letter-spacing:-.006em;
  color:var(--ink);
}
.lead__form > .lead__label:first-child{margin-top:0}

/* the code and the number read as one control: the border is on the
   row, and the select inside it is bare */
.lead__row{
  display:flex;align-items:center;
  border:1px solid var(--line);border-radius:12px;
  background:var(--paper);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.lead__cc{
  flex:none;
  /* 26px справа, а не 8: нативную стрелку списка браузер рисует у самого края
     padding-box, и на 8px она прижималась к разделителю с полем номера */
  height:46px;padding:0 26px 0 12px;
  border:0;border-right:1px solid var(--line);
  background:none;
  font:inherit;font-size:14px;font-weight:600;color:var(--ink);
  cursor:pointer;
}
.lead__in{
  width:100%;height:46px;
  padding:0 14px;
  border:1px solid var(--line);border-radius:12px;
  background:var(--paper);
  font:inherit;font-size:15px;color:var(--ink);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.lead__row .lead__in{border:0;border-radius:0 12px 12px 0}
.lead__in::placeholder{color:var(--faint)}
.lead__in:focus,.lead__cc:focus{outline:none}
.lead__row:focus-within,.lead__in:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent);
}

.lead__hint{margin:7px 0 0;font-size:12.5px;line-height:1.45;color:var(--faint)}
/* --neg is declared on .caps, not on :root, and the dialog is a sibling of
   that section rather than a descendant — so the bare var() resolved to
   nothing here and the rejected field came back with no red at all: the
   message stayed grey and the ring computed to currentColor. The fallback
   is the same value .caps carries. */
.lead__hint [data-hint-bad]{color:var(--neg,#B92E2E)}
.lead__in.is-bad,.lead__row.is-bad{
  border-color:var(--neg,#B92E2E);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--neg,#B92E2E) 14%,transparent);
}

.lead__go{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:52px;margin-top:16px;
  border:0;border-radius:999px;
  /* the button sends a Telegram message, so it wears Telegram blue */
  background:#229ED9;color:#fff;
  font:inherit;font-size:15px;font-weight:600;letter-spacing:-.006em;
  cursor:pointer;
  transition:opacity .16s ease;
}
.lead__go:hover{background:#1D8DC2}
.lead__wa{width:19px;height:19px;flex:none;fill:currentColor}

.lead__note{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:12px 0 0;
  font-size:12.5px;color:var(--faint);
}
.lead__note svg{
  width:12px;height:14px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.3;
}

.lead__alt{
  display:block;margin:16px 0 0;
  text-align:center;
  font-size:13.5px;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line);
}
.lead__alt:hover{color:var(--brand);text-decoration-color:currentColor}

.lead__foot{margin:14px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.lead__foot a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* the confirmation that replaces the form */
.lead__done{text-align:center;padding:8px 0 4px}
.lead__done .lead__title{margin-top:14px}
.lead__done .lead__bubble{margin-top:10px;text-align:center}
.lead__tick{
  display:grid;place-items:center;
  width:52px;height:52px;margin:0 auto;
  border-radius:50%;
  /* same scope problem as --neg above: declared on .caps, invisible here,
     which left the confirmation with a blank 52px hole where the tick is */
  background:color-mix(in srgb,var(--pos,#159C72) 12%,transparent);
}
.lead__tick svg{
  width:24px;height:24px;
  fill:none;stroke:var(--pos,#159C72);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
}
.lead__back{
  height:46px;margin-top:18px;padding:0 26px;
  border:1px solid var(--line);border-radius:999px;
  background:var(--paper);
  font:inherit;font-size:14.5px;font-weight:500;color:var(--ink);
  cursor:pointer;
}
.lead__back:hover{background:var(--chip)}

/* ─────────────────────  closing section  ─────────────────────
   The last thing on the page is a question, set at hero scale and
   centred — nothing else in the column, so there is nowhere else for
   the eye to go. Both buttons open the dialog above. */

/* No plate under it. Another restore put .finale on --bg-2; the section
   was authored on the page's own white, with only the hairline above it
   separating it from the FAQ. */
.finale{background:none}

.finale__inner{
  padding:clamp(72px,10vw,150px) clamp(20px,4vw,var(--pad)) clamp(76px,10vw,150px);
  text-align:center;
  border-top:1px solid var(--line);
}
.finale__eyebrow{
  margin:0 0 clamp(18px,2.4vw,28px);
  text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;
  color:var(--faint);
}
.finale__title{
  margin:0;
  font-size:clamp(2.1rem,5.4vw,4.2rem);
  line-height:1.05;
  letter-spacing:-.032em;
  font-weight:500;
  color:var(--ink);
}
.finale__lead{
  margin:clamp(20px,2.6vw,30px) auto 0;
  max-width:34em;
  font-size:16.5px;line-height:1.62;
  color:var(--muted);
}
/* the pill carries a caption above it, so a centred row leaves the
   plain button riding high — both controls stand on one baseline */
.finale__actions{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:12px;
  margin-top:clamp(28px,3.4vw,40px);
}
.finale__actions .btn{height:52px;padding-inline:26px}

.finale__fine{
  margin:clamp(20px,2.4vw,28px) auto 0;
  max-width:44em;
  font-size:13px;color:var(--faint);
}

/* the quiet twin of the ink button: a hairline, not a second slab */
.btn--outline{
  background:var(--paper);
  border-color:var(--line);
  color:var(--ink);
}
.btn--outline:hover{background:var(--chip)}

@media (max-width:600px){
  dialog.lead{width:calc(100% - 20px);border-radius:18px}
  .lead__title{font-size:19px}

  .finale__title{font-size:clamp(1.9rem,9vw,2.6rem)}
  .finale__lead{font-size:15.5px}
  .finale__actions{gap:10px}
  .finale__actions .btn{width:100%}
}

/* ─────────────────  agent block: mark, label, heading  ──────────
   Overrides for rules that live in main.css. They sit here because
   several sessions are writing that file at once — fold them in when
   the merge happens. */

/* the speaker is Feedly, and it signs with the mark rather than with a
   gradient dot that means nothing */
/* inlined rather than an <img>: the star ships with a gradient that
   fades to near-white, which disappears at 20px — as a path it takes
   the brand token and stays legible */
.awin__mark{
  width:19px;height:19px;flex:none;
  border-radius:0;background:none;
  fill:var(--brand);
}
.awin__by{
  font-size:11.5px;font-weight:600;letter-spacing:.04em;
  text-transform:none;                 /* "Фидли", not "ФИДЛИ" */
  color:var(--ink-2);
}

/* The heading asked for weight 900 from a face that ships 300–700, so
   the browser clamped it and the tight tracking did the rest — the
   second line arrived crowded and pale. Two lines, both readable: the
   heaviest weight the font actually has, air between the letters, and
   a second line in ink-2 rather than the palest grey in the palette. */
/* The house heading is 360 at -.018em — .faq__title, .band__title and
   .dev__title all sit there. This one was authored at 900, a weight the
   shipped Inter (300–700) does not have, so the browser faked it: same
   text measured 540.8px at 700 and 567.3px at 900, i.e. smeared rather
   than a heavier cut. On the page it read as a different typeface.
   Same size ramp as the others too. */
.agent__title{
  font-size:clamp(1.7rem,3vw,2.4rem);
  line-height:1.22;
  letter-spacing:-.018em;
  font-weight:360;
  text-wrap:balance;
}
.agent__title span{
  display:block;
  color:var(--ink-2);
}


/* ── phone: let the cards size to what is in them ─────────────
   .cap and .cap__media both carry flex:1, which is what keeps the
   columns level on a wide screen. Stacked into one column that same
   rule squeezes the panel below the height of its own content, and the
   summary row — "Handled without a human 78%" — dropped out of the
   panel and landed on the caption. Measured at 390px: 92px outside.
   Content height wins here; there is no neighbouring column left to
   line up with. */
/* The same squeeze happens above 720px and was never fixed there. The
   columns are grid items, so they all take the height of the tallest;
   inside one, flex:1 hands each card an equal share, and min-height:0
   lets the media shrink under whatever share it gets. The panel then
   holds less than its own content and, being centred, spills at both
   ends: at 1040px the summary row of the support card sat 28px below
   the panel, on the white of the card.

   auto is the floor a flex item should have had all along: do not
   shrink below the content at this width. Not min-content, which is the
   height the box would take with every line broken as early as it can
   be, and which inflates the panel instead. The card grows and its
   column grows with it, which is what the phone fix below already
   concluded — the levelling is worth having only while it costs
   nothing. */
@media (min-width:721px){
  .caps .cap,
  .caps .cap__media{min-height:auto}
}

@media (max-width:720px){
  .caps .cap{flex:0 0 auto}
  .caps .cap__media{flex:0 0 auto;align-items:flex-start}
  .caps .mock{min-height:0}

  /* the label column stops reserving room it no longer has */
  .vs li{grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;gap:8px}
}


/* ── response times: a label column that fits the language ────
   .watch em was pinned to 44px, a width measured on "in SLA". The
   Russian "просрочка" needs more and simply ran 13px past the panel.
   Putting the grid on the list instead of on each row lets the column
   take the width of the longest label while all three rows still line
   up, in either language. */
.watch{display:grid;gap:9px 10px;grid-template-columns:minmax(0,1fr) auto auto}
.watch li{display:contents}
.watch b{margin-left:0;justify-self:end}
.watch em{width:auto;min-width:44px;justify-self:end;text-align:right}

/* The rows carry --row to stagger their flips, but the delay was reading
   --r, a property nothing sets — so all three turned over on the same
   beat, and an unset variable inside the multiplication collapsed the
   whole declaration to 0s, printing both figures at once. Read the one
   the markup actually sets, and keep a default so the calc survives on
   the counters that sit outside a row. */
.roll{--row:0}
.roll i{animation-delay:calc(var(--i,0)*4s - var(--row,0)*.9s)}


/* ── phone: the wide column stops splitting in two ────────────
   Between 1024 and 720 the third column pairs its short cards up, which
   is right on a tablet. Below 720 the block is already a single column
   and that pairing was never undone, so each card kept half of a phone
   screen: 155px, with the chat bubble breaking to four words a line.
   One card per row from here down. */
@media (max-width:720px){
  .caps__col--wide{grid-template-columns:minmax(0,1fr)}
  .caps__col--wide > .cap:first-child,
  .caps__col--wide > .cap-fold{grid-column:auto}
}

/* ── tablet: the wide column's hidden cards pair up too ────────
   Between 721 and 1024 the wide column is a two-track grid so its short
   cards sit side by side. Its second child is not a card though, it is
   the fold wrapper, so the four cards behind "Показать ещё" all landed
   in one 465px track with the other half of the block left empty, and
   the section ran 1.6x taller than it needed to.

   The wrapper carries the open/closed animation (rows 0fr to 1fr) and
   the clip, so neither can be replaced by display:contents. It spans
   both tracks instead, and the inner element it was already wrapping
   does the pairing. */
@media (min-width:721px) and (max-width:1024px){
  .caps__col--wide > .cap-fold{grid-column:1/-1}
  .caps__col--wide > .cap-fold > .cap-fold__in{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
    gap:14px;
  }
}

/* ─────────────────  agent thread, after pleep.app  ──────────────
   The thread reads as a conversation log rather than a chat toy: who
   spoke and when above every turn, the system's own moves on their own
   line, and sources named before they are quoted. */

/* no outline on the reader's line — the fill already separates it, and
   a purple rule around a lavender bubble reads as a form field */
.awin__you{border:0}

/* who and when */
.awin__meta{
  display:flex;align-items:baseline;gap:8px;
  margin:6px 0 -2px;
  font-size:11px;color:var(--faint);
}
.awin__meta--you{align-self:flex-end}
.awin__meta b{font-weight:600;color:var(--ink-2)}
.awin__at{margin-left:2px;font-size:11px;color:var(--faint)}

/* ── working, not announcing ─────────────────────────────────────
   The line says what is being done while it is being done, and then
   gets out of the way — the way a chat assistant shows a status and
   replaces it with the result. It is not a message and does not stay
   in the log.

   It leaves by the same door the product's does: the line is marked
   data-typing, so the player drops it the instant the thing it stood
   in for arrives. Nothing to time — the status cannot outlive its
   answer or vanish before it. */
.awin__work{
  display:flex;align-items:center;gap:4px;
  margin:0;
  font-size:12px;color:var(--faint);
}
.awin__work span{margin-right:4px}

/* The product's thinking state, measured off it: three brand dots,
   6px, a 0.9s cycle from a third opacity to full and 3px of lift,
   each dot 0.18s behind the one before. */
.awin__work i{
  width:6px;height:6px;flex:none;
  border-radius:50%;background:var(--brand);
  animation:awinDot .9s infinite both;
}
.awin__work i:nth-of-type(2){animation-delay:.18s}
.awin__work i:nth-of-type(3){animation-delay:.36s}
@keyframes awinDot{
  0%,100%{opacity:.3;transform:translateY(0)}
  50%    {opacity:1;transform:translateY(-3px)}
}

/* and its chart-building state, which is a different animal: one
   muted ring turning once a second, not dots */
.awin__work--build i{
  width:13px;height:13px;
  background:none;
  border:1.6px solid var(--line);
  border-top-color:var(--faint);
  animation:awinSpin 1s linear infinite;
}
@keyframes awinSpin{to{transform:rotate(1turn)}}

/* main.css has .awin [data-step].is-in{animation:awinIn…} at three
   classes deep, so a two-class selector here would lose. Matched depth
   to hold the shared entrance for this line too. */
.awin [data-step].awin__work.is-in{
  animation:awinIn .35s cubic-bezier(0,0,.2,1) forwards;
}

/* Every line arrives the way the product's messages do: 6px up and
   transparent, over 0.35s, easing out. main.css asks for 7px in 0.3s;
   this is the measured one. */
.awin [data-step].is-in{
  animation:awinIn .35s cubic-bezier(0,0,.2,1) forwards;
}
@keyframes awinIn{
  from{opacity:0;transform:translateY(6px)}
  to  {opacity:1;transform:none}
}

/* the words are typed, so the cursor stands at the end of them —
   a text caret, not the terminal block main.css asks for */
.awin__say.is-writing::after{
  content:"";
  display:inline-block;vertical-align:-2px;
  width:2px;height:15px;margin-left:2px;
  background:var(--brand);
  animation:awinCaret 1s steps(1) infinite;
}

/* the label above a quote: a source is named before it is read */
.awin__src{
  margin:4px 0 -4px;
  font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);
}

/* Grey, not sand, and no coloured rule down the side: the quote is
   evidence, so it sits back like a document rather than announcing
   itself. The mark does the quoting. */
.awin__quote{
  position:relative;
  padding:12px 14px 12px 30px;
  border-left:0;
  border-radius:12px;
  background:var(--chip);
  color:var(--ink-2);
}
.awin__quote::before{
  content:"“";
  position:absolute;left:10px;top:6px;
  font-size:24px;line-height:1;
  color:var(--line);
}
.awin__quote cite{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:7px;
  color:var(--faint);
}

/* ── the table draws itself ──────────────────────────────────────
   The product builds a chart as one object: the frame arrives with
   its rows already in it, and then every bar runs out from zero to
   its share over half a second, each 60ms behind the one above it.
   Nothing is drawn before the frame lands, and the frame does not
   wait for the bars.

   So the table is a single step here, not four: --w is the row's
   share, the fill behind the label grows to it, and the stagger is
   the row's place in the table rather than a pause in the script. */
.awin__row{position:relative;overflow:hidden}
.awin__row::before{
  content:"";
  position:absolute;inset:0;
  background:color-mix(in srgb,var(--brand) 9%,transparent);
  transform:scaleX(0);transform-origin:left center;
}
.awin__table.is-in .awin__row::before{
  animation:awinBar .5s cubic-bezier(0,0,.2,1) both;
}
.awin__table.is-in .awin__row:nth-child(2)::before{animation-delay:.10s}
.awin__table.is-in .awin__row:nth-child(3)::before{animation-delay:.16s}
.awin__table.is-in .awin__row:nth-child(4)::before{animation-delay:.22s}
.awin__row > *{position:relative}
@keyframes awinBar{from{transform:scaleX(0)} to{transform:scaleX(var(--w,1))}}

/* the figure lands with its own bar, not with the table */
.awin__table.is-in .awin__row span:nth-child(2),
.awin__table.is-in .awin__row b{animation:awinFig .4s .18s ease-out both}
.awin__table.is-in .awin__row:nth-child(3) span:nth-child(2),
.awin__table.is-in .awin__row:nth-child(3) b{animation-delay:.24s}
.awin__table.is-in .awin__row:nth-child(4) span:nth-child(2),
.awin__table.is-in .awin__row:nth-child(4) b{animation-delay:.30s}
@keyframes awinFig{from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none}}

/* the header keeps the grey of the panel, not the old sand */
.awin__head{background:var(--chip)}


/* ── phone: everything hidden goes after everything shown ─────
   The bento is three columns, each with its own fold. Collapsed into a
   single column the DOM order reads column-by-column, so opening the
   fold slid column one's extra cards in ABOVE the cards column two and
   three were already showing: the first hidden card landed in position
   four and buried three of the originals under it.

   Flattening the columns lets order do the sorting: the shown cards
   keep their sequence, and all three folds queue up behind them. The
   negative margin the fold already carries still cancels the row gap
   while it is closed, so three collapsed folds at the end add nothing. */
@media (max-width:720px){
  .caps__grid{display:flex;flex-direction:column}
  .caps__col{display:contents}
  .caps .cap{order:1}
  .caps .cap-fold{order:2}
}


/* ── the window's own bar ────────────────────────────────────────
   Not a browser: the traffic lights and the app.feedly.tech/агент
   breadcrumb dressed the still up as a screenshot of a page, which is
   the one thing it is not. The bar now says what the thing is, with
   the mark to say whose it is. */
.awin__logo{
  width:16px;height:16px;flex:none;
  fill:var(--brand);
}
.awin__title{
  font-size:12.5px;font-weight:500;letter-spacing:-.008em;
  color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.awin__bar{gap:9px}