/* ============================================================
   Feedly — restored blocks

   main.css was truncated; these are the blocks written in this
   session, put back from memory against the surviving markup. They
   live in their own file on purpose: other hands are restoring the
   rest of main.css at the same time, and two writers in one file
   would clobber each other. Loaded after main.css, so anything that
   turns up there again is simply overridden here — merge it back in
   one paste when the dust settles.
   ============================================================ */

/* ─────────────────────  key capabilities  ─────────────────────
   Bento of product stills. Column heights are equalised by the
   layout rather than by hand: the grid stretches all the columns to
   the tallest, each column is a flex stack and every card is flex:1,
   so the cards on the left divide exactly the height of the tall
   chart card on the right, at any width.

   Chart colour is not free-hand. The sentiment trio was checked for
   colour-vision separation, lightness band and contrast against the
   panel it is painted on; green↔red lands in the 6–8 ΔE band, which
   is only legal with a second channel, so every mark carries a label
   and the two donut ramps are single-hue ordinal steps.
*/

.caps{
  /* These are the values the section shipped with before main.css lost
     this block; the patch that put the rules back guessed new ones, and
     the sentiment trio came back noticeably brighter. --sand is the one
     exception: its original value is not recorded in any file that
     survived, so the guess below stands until someone confirms it. */
  /* Recovered from a screenshot taken before main.css lost this block:
     the panel plane covered 34.5% of that frame at #F4F4F4, a neutral
     grey. The patch had guessed a warm #F7F5F1, which is what tinted the
     whole section. */
  --sand:#F4F4F4;                /* mock-panel plane */
  --sunk:#EAE9E7;                /* inactive chip */

  --pos:#159C72;
  --neu:#B87C00;
  --neg:#B92E2E;

  /* ordinal ramps for the two donuts — one hue each, the light end
     still clear of the panel it sits on */
  --pos-1:#0B6B4D; --pos-2:#0F8F66; --pos-3:#3AA583; --pos-4:#6CB79F;
  --neg-1:#8E2222; --neg-2:#B92E2E; --neg-3:#CE6460; --neg-4:#E29795;

  --grid:#E1E0DF;
  --ax:#CAC9C6;

  /* six tone chips, one lit at a time: one cycle, delay = --i × step */
  --cycle:12s;
  --step:2s;
}

.caps__head{
  padding:clamp(44px,5.4vw,80px) clamp(24px,4vw,var(--pad)) clamp(24px,2.8vw,38px);
}
.caps__title{
  margin:14px 0 0;
  font-family:var(--font-display);
  font-size:clamp(2rem,4.2vw,3.4rem);
  line-height:1.06;
  letter-spacing:-.039em;
  font-weight:900;
  color:var(--ink);
}

.caps__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:14px;
  padding:0 clamp(24px,4vw,var(--pad)) clamp(44px,5.4vw,76px);
}
.caps__col{display:flex;flex-direction:column;gap:14px;min-width:0}

.cap{
  flex:1;min-height:0;min-width:0;
  display:flex;flex-direction:column;
  padding:clamp(15px,1.5vw,22px);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 1px 2px rgba(23,23,26,.04),0 22px 40px -34px rgba(23,23,26,.6);
}
/* the still fills the card rather than floating in it: the media box
   stretches, and each still centres its own content inside that box */
.cap__media{
  flex:1;min-height:0;
  display:flex;align-items:stretch;justify-content:center;
  padding:clamp(6px,1vw,14px) 0;
}
.cap__name{
  margin:clamp(12px,1.5vw,20px) 0 0;
  font-size:clamp(16.5px,1.32vw,21px);
  line-height:1.18;
  font-weight:600;letter-spacing:-.026em;
  color:var(--ink);
}

/* the sunken plane every still is drawn on */
.mock{
  width:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(12px,1.25vw,17px);
  background:var(--sand);
  border:1px solid var(--line);
  border-radius:14px;
}
.mock__cap{
  margin:0 0 13px;
  text-align:center;
  font-size:13px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink-2);
}

/* ── chips ───────────────────────────────────────────────────── */

.pill{
  display:flex;align-items:center;justify-content:center;
  height:34px;padding:0 12px;
  border-radius:999px;
  border:1px solid transparent;
  background:var(--sunk);
  font-size:12.5px;font-weight:500;letter-spacing:-.01em;
  color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pill.is-on{
  background:var(--paper);border-color:var(--line);color:var(--ink);
  box-shadow:0 1px 2px rgba(23,23,26,.07);
}
.pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

.tone .pill{
  animation:pillOn var(--cycle) linear infinite both;
  animation-delay:calc(var(--i,0)*var(--step));
}
/* one slot is 100/6 = 16.6% of the cycle; the tight edges keep the
   swap crisp instead of letting the colours cross-fade */
@keyframes pillOn{
  0%    {background:var(--sunk);border-color:transparent;color:#6C6C75;box-shadow:none}
  1.4%  {background:#FFFFFF;border-color:#E8E4DE;color:#17171A;box-shadow:0 1px 2px rgba(23,23,26,.07)}
  15.2% {background:#FFFFFF;border-color:#E8E4DE;color:#17171A;box-shadow:0 1px 2px rgba(23,23,26,.07)}
  16.6% {background:var(--sunk);border-color:transparent;color:#6C6C75;box-shadow:none}
  100%  {background:var(--sunk);border-color:transparent;color:#6C6C75;box-shadow:none}
}

/* ── source tiles ────────────────────────────────────────────── */

.chan{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  width:100%;
}
.chan__row{display:flex;justify-content:center;gap:clamp(10px,1.5vw,20px)}
.chan__row li{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:11.5px;font-weight:600;letter-spacing:-.012em;
  color:var(--muted);
}
.chan__tile{
  display:grid;place-items:center;
  width:clamp(54px,5.2vw,68px);aspect-ratio:1;
  border-radius:22%;
  background:var(--brand-soft);
  border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);
  color:var(--brand);
  box-shadow:0 2px 4px rgba(23,23,26,.05),0 16px 26px -20px rgba(40,30,90,.7);
}
.chan__tile svg{width:52%;height:52%}
.chan__more{
  margin:0;
  display:inline-flex;align-items:center;height:28px;padding:0 13px;
  border-radius:999px;background:var(--sunk);
  font-size:12px;font-weight:600;letter-spacing:-.01em;color:var(--muted);
}

/* ── review stills ───────────────────────────────────────────── */

/* stars, flag and timestamp wrap rather than push the date out of the
   panel on a narrow card */
.rev__top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:11px}
.rev__date{margin-left:auto;font-size:11.5px;color:var(--faint);white-space:nowrap}

.rate{display:inline-flex;gap:2.5px}
.rate svg{width:13px;height:13px;fill:#D8D4CC}
.rate svg.on{fill:var(--neu)}

.flag{
  display:inline-flex;align-items:center;gap:6px;
  height:24px;padding:0 10px;
  border-radius:999px;
  background:#FBEDED;border:1px solid color-mix(in srgb,var(--neg) 30%,transparent);
  color:var(--neg);
  font-size:11.5px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;
}
.flag svg{
  width:12px;height:12px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;
}

.rev__text{
  margin:0;
  font-size:13.5px;line-height:1.55;
  color:var(--ink-2);
}

/* The highlight sweeps in on scroll. The finished state is the default
   and the animation runs from empty, so a browser without a view()
   timeline shows the highlight rather than nothing. The underline is
   the second channel: solid under praise, dashed under a complaint, so
   the two never rest on hue alone. */
.hl{
  padding:0 2px;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;   /* a wrapped span keeps both ends */
  border-radius:3px;
  color:var(--ink);
  background-color:transparent;
  background-image:linear-gradient(var(--hl),var(--hl));
  background-repeat:no-repeat;
  background-size:100% 100%;
}
.hl--pos{--hl:rgba(15,143,102,.15);border-bottom:2px solid var(--pos)}
.hl--neg{--hl:rgba(208,59,59,.14);border-bottom:2px dashed var(--neg)}

.ghostbtn{
  display:inline-flex;align-items:center;align-self:flex-start;
  margin-top:14px;height:32px;padding:0 14px;
  border-radius:999px;
  background:var(--paper);border:1px solid var(--line);
  font-size:12.5px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink-2);
}

/* ── dashboards ──────────────────────────────────────────────── */

.dash{display:flex;flex-direction:column;justify-content:center;gap:12px;width:100%}
.dash__cap{
  margin:0 0 10px;
  display:flex;align-items:baseline;gap:8px;
  font-size:12.5px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink-2);
}
.dash__sub{font-weight:500;color:var(--faint);font-size:11px}

.topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.topic__cap{
  margin:0 0 8px;
  font-size:12px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink-2);
}
.donut{display:block;width:100%;max-width:118px;margin:0 auto;height:auto}
.donut__track{fill:none;stroke:#DFDEDD;stroke-width:13}
.donut circle.seg{fill:none;stroke-width:13}

.legend{margin:10px 0 0;display:grid;gap:5px}
.legend li{
  display:flex;align-items:center;gap:7px;
  font-size:10.5px;letter-spacing:-.01em;
  color:var(--muted);
}
.legend i{width:8px;height:8px;flex:none;border-radius:2.5px;background:var(--sw)}
.legend b{margin-left:auto;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.legend--row{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px}
.legend--row li{gap:6px}
.legend--row b{margin-left:4px}

/* the charts are drawn at roughly the size they are read at, so the
   cap keeps a wide panel from scaling the tick labels up with it */
.chart{display:block;width:100%;max-width:420px;margin-inline:auto;height:auto;overflow:visible}
.ch-grid{stroke:var(--grid);stroke-width:1}
.ch-axis{stroke:var(--ax);stroke-width:1}
.ch-cat{fill:var(--faint);font-size:10.5px;font-weight:500}
.ch-tick{fill:var(--faint);font-size:9.5px;font-weight:500}
.ch-val{fill:var(--ink-2);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.bar--pos{fill:var(--pos)}
.bar--neu{fill:var(--neu)}
.bar--neg{fill:var(--neg)}

/* stacked bands, each parted from the next by a 2px stroke in the panel
   colour — that gap is what keeps the boundary readable when two fills
   sit straight against each other. The bands keep the full-strength
   trio so the legend swatch and the fill are the same colour. */
.area--pos{fill:var(--pos)}
.area--neu{fill:var(--neu)}
.area--neg{fill:var(--neg)}
.edge{fill:none;stroke:var(--sand);stroke-width:2}

/* ── motion ──────────────────────────────────────────────────── */

@supports (animation-timeline:view()){
  /* the cards stagger by their own index instead of by a clock, so the
     reveal tracks the scroll rather than the load */
  .caps .rv{
    animation-range:entry calc(4% + var(--i,0)*3%) cover calc(24% + var(--i,0)*3%);
  }
  .caps__title .w{
    animation-delay:0s;
    animation-timeline:view();
    animation-range:entry calc(4% + var(--i,0)*4.5%) entry calc(54% + var(--i,0)*4.5%);
  }

  /* these three end on `entry`, not on `cover`: a chart that is fully
     in view has to be finished drawing, even on a screen tall enough
     that the block never scrolls any further */
  .hl{
    animation:hlIn 1s linear both;
    animation-timeline:view();
    animation-range:entry 12% entry 88%;
  }
  .bar{
    transform-box:fill-box;transform-origin:bottom;
    animation:barUp 1s linear both;
    animation-timeline:view();
    animation-range:entry 10% entry 86%;
  }
  .sweep{
    transform-box:fill-box;transform-origin:left;
    animation:sweep 1s linear both;
    animation-timeline:view();
    animation-range:entry 8% entry 92%;
  }
}
@keyframes hlIn{from{background-size:0 100%} to{background-size:100% 100%}}
@keyframes barUp{from{transform:scaleY(0)} to{transform:scaleY(1)}}
@keyframes sweep{from{transform:scaleX(0)} to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  /* the tone chips cycle forever and have no meaningful end state —
     freeze the fourth one lit, the way the band freezes its first
     source */
  .tone .pill{animation:none !important}
  .tone .pill[style*="--i:3"]{
    background:var(--paper);border-color:var(--line);color:var(--ink);
    box-shadow:0 1px 2px rgba(23,23,26,.07);
  }
  @supports (animation-timeline:view()){
    .caps .rv,.caps__title .w,.hl,.bar,.sweep{animation-timeline:auto !important}
  }
}

@media (max-width:1024px){
  .caps__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .caps__col--wide{grid-column:1/-1}
  /* the charts card is now the full width of the block, so its panels
     share the row instead of stacking */
  .caps__col--wide .dash{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  }
  .caps__col--wide .topics{grid-column:1/-1}

  /* wide card, so the ring and its list sit side by side — otherwise
     the list stretches the width of the column and the values drift
     away from their labels */
  .caps__col--wide .topic{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"cap cap" "ring list";
    justify-content:start;align-items:center;
    gap:8px clamp(12px,1.6vw,20px);
  }
  .caps__col--wide .topic__cap{grid-area:cap}
  .caps__col--wide .donut{grid-area:ring;width:96px;margin:0}
  .caps__col--wide .legend{grid-area:list;max-width:240px;margin-top:0}
}

@media (max-width:720px){
  .caps__grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .caps__col{gap:12px}
  .caps__col--wide .dash{grid-template-columns:minmax(0,1fr)}
  /* one ring per row now: side by side there is no longer room for a
     96px ring and a labelled list twice over */
  .caps__col--wide .topics{grid-template-columns:minmax(0,1fr);gap:16px}
  .caps__col--wide .legend{max-width:none}
  .cap__name{font-size:18px}
  .pills{gap:7px}
  .rev__text{font-size:13px}
}

/* ─────────────────────────  the quote deck  ───────────────────
   A scroll-snap track, so the quotes can be swiped, scrolled or
   dragged with no help from the arrows at all — the buttons only push
   the track by one panel and the browser does the snapping. */

/* a heading the block needs for its landmark but the design does not */
.vh{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

.quote__deck{position:relative}

.quote__track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.quote__track::-webkit-scrollbar{display:none}
.quote__track:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:20px}

.quote__slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  min-width:0;
  /* short quotes centre in the common height instead of hanging from
     the top of their panel, where they would sit above the arrows */
  display:flex;align-items:center;
}
.quote__slide .quote__inner{width:100%}

.quote__inner{
  margin:0;
  max-width:760px;
  margin-inline:auto;
  padding:clamp(64px,9vw,140px) clamp(20px,4vw,var(--pad));
  text-align:center;
}
.quote__text{margin:0}
/* Four lines' worth of room, with the quote sitting on the floor of
   it: the spare line of a shorter quote opens up above the text rather
   than between it and the byline. That holds the attribution on one
   baseline across the deck without leaving a hole under the shorter
   quotes. The room has to be reserved on the paragraph itself — an
   `em` set on its parent would resolve against the parent's 16px
   rather than the quote's own display size. */
.quote__text p{
  margin:0;
  min-height:5.68em;
  display:flex;flex-direction:column;justify-content:flex-end;
  font-size:clamp(1.15rem,2.1vw,1.7rem);
  line-height:1.42;
  letter-spacing:-.014em;
  font-weight:360;
  color:var(--ink);
  text-wrap:balance;
}
.quote__by{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:clamp(18px,2.1vw,28px);
}
.quote__ava{
  width:52px;height:52px;flex:none;
  border-radius:50%;
  object-fit:cover;
  background:var(--chip);
}
/* where there is no portrait the initials stand in — a placeholder
   that admits to being one, rather than a stock face */
.quote__ava--mono{
  display:grid;place-items:center;
  background:var(--brand-soft);
  color:var(--brand-ink);
  font-size:16.5px;font-weight:600;letter-spacing:.02em;
}
.quote__who{
  display:flex;flex-direction:column;align-items:flex-start;
  font-size:14.5px;line-height:1.45;
  color:var(--muted);
  text-align:left;
}
.quote__who b{font-weight:500;color:var(--ink)}

/* ── the arrows ───────────────────────────────────────────────
   One row that lies over the deck on a wide screen and drops under it
   on a narrow one — the same two buttons either way. The row is
   capped rather than run to the gutters: at full width the arrows
   drift so far from the quote they stop reading as its controls. */
.quote__ctrl{
  position:absolute;inset:0;
  max-width:940px;margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:clamp(6px,1.6vw,16px);
  pointer-events:none;                 /* the quote stays selectable */
}
.qnav{
  pointer-events:auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex:none;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink-2);
  cursor:pointer;
  box-shadow:0 1px 2px rgba(23,23,26,.04),0 10px 24px -18px rgba(23,23,26,.6);
  transition:color .16s ease,border-color .16s ease,
             background-color .16s ease,transform .16s ease,opacity .16s ease;
}
.qnav svg{
  width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.qnav:hover{color:var(--brand);border-color:rgba(125,98,255,.45);transform:scale(1.06)}
.qnav:active{transform:scale(.96)}
/* at the end of the run the button stays in place and steps back — the
   row must not reflow just because one arrow ran out of track */
.qnav[disabled]{opacity:.32;cursor:default;box-shadow:none}
.qnav[disabled]:hover{color:var(--ink-2);border-color:var(--line);transform:none}

@media (max-width:900px){
  .quote__ctrl{
    position:static;
    justify-content:center;gap:14px;
    padding:0 0 clamp(40px,6vw,64px);
  }
  .quote__inner{padding-bottom:clamp(28px,4vw,40px)}
}
@media (prefers-reduced-motion:reduce){
  .quote__track{scroll-behavior:auto}
}

/* ─────────────────────────  the footer field  ─────────────────
   The wordmark leads the column the way it does at the top of the
   page — only much larger, since nothing follows it — and the dot
   field is the one full-bleed block on the page: no gutter, so the
   grid reaches both edges of the window. The canvas sizes itself from
   the measured column width, so the grid pitch stays constant and it
   is the number of dots that changes with the viewport, never their
   size. */

.foot__mark{
  display:block;
  height:clamp(40px,4.6vw,72px);width:auto;
  margin-bottom:clamp(20px,2.4vw,32px);
}

.foot__mesh{
  padding:clamp(24px,3vw,44px) 0 clamp(16px,2vw,26px);
  overflow:hidden;
}
.mesh{display:block;width:100%}

/* ─────────────────────────────  footer  ───────────────────────
   Restored with the rest: the mark and blurb on the left, three link
   columns on the right, the legal line under both.

   The hairline above the legal row is the divider the brand-photo
   band used to carry. That band was bordered top and bottom, and when
   the dot field replaced it the line went with it — the row needs one
   of its own, or the links and the copyright read as one block. */

.foot__top{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,2fr);
  gap:clamp(32px,5vw,72px);
  padding:clamp(44px,5vw,72px) clamp(24px,4vw,var(--pad));
}

.foot__blurb{
  margin:0;
  max-width:34ch;
  font-size:16px;line-height:1.6;
  color:var(--muted);
}

.foot__social{display:flex;gap:10px;margin-top:26px}
.foot__social a{
  display:grid;place-items:center;
  width:38px;height:38px;
  border:1px solid var(--line);border-radius:999px;
  color:var(--ink-2);background:var(--paper);
  transition:color .16s ease,border-color .16s ease,transform .16s ease;
}
.foot__social svg{
  width:18px;height:18px;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.foot__social a:hover{color:var(--brand);border-color:var(--brand);transform:translateY(-1px)}

.foot__nav{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
}
.foot__col h2{
  margin:0 0 18px;
  font-size:10.5px;font-weight:600;letter-spacing:.135em;
  text-transform:uppercase;color:var(--faint);
}
.foot__col li + li{margin-top:12px}
.foot__col a{
  font-size:15px;color:var(--ink-2);
  transition:color .15s ease;
}
.foot__col a:hover{color:var(--brand)}

.foot__legal{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:12px 28px;
  margin-inline:clamp(24px,4vw,var(--pad));
  padding:22px 0;
  border-top:1px solid var(--line);
  font-size:13.5px;color:var(--faint);
}
.foot__legal p{margin:0}
.foot__legal ul{display:flex;flex-wrap:wrap;gap:24px}
.foot__legal a{transition:color .15s ease}
.foot__legal a:hover{color:var(--ink-2)}

@media (max-width:860px){
  .foot__top{grid-template-columns:minmax(0,1fr);gap:40px}
  .foot__nav{gap:28px 20px}
}
@media (max-width:560px){
  .foot__nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__legal{justify-content:flex-start}
}

/* ── theme emoji ──────────────────────────────────────────────
   The mark sits in its own element rather than inside the label's
   text, so the run the RU dictionary matches on stays exactly the
   words — an emoji glued into the string would miss every lookup.
   Sized in em, so it tracks whatever type it is standing next to. */
.emo{
  font-style:normal;
  margin-right:.42em;
  font-size:1.02em;
  line-height:1;
  /* colour emoji ignore currentColor anyway; this keeps the fallback
     glyph from inheriting a muted label's grey */
  color:initial;
}

/* ─────────────────────  the two-door button  ──────────────────
   One pill, two destinations. Telegram is the channel the demo
   actually runs on, so it holds the brand fill and MAX sits beside it
   on paper. Leaning on either half gives it three quarters of the
   width; the half that gives way keeps its mark and lets its wordmark
   go, which is what stops the labels from being squeezed into
   ellipses. `:has()` on the group is what lets a hovered half push
   its sibling — the same trick the developer tabs use, no script. */

.split{
  display:flex;align-items:stretch;
  /* wide enough that both wordmarks fit at rest — the halves are sized
     in per cent, so the pill has to own a width of its own rather than
     shrink to whatever the flex row leaves it */
  width:clamp(296px,28vw,352px);
  height:50px;
  border-radius:999px;
  overflow:hidden;
  background:var(--chip);
  border:1px solid var(--line);
}
.split__half{
  flex:1 1 50%;
  min-width:0;
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:0 14px;
  font-size:15px;font-weight:500;letter-spacing:-.006em;
  color:var(--ink);
  white-space:nowrap;
  transition:flex-basis .32s cubic-bezier(.2,.7,.25,1),
             background-color .18s ease,color .18s ease;
}
.split__half + .split__half{border-left:1px solid var(--line)}
.split__half svg{width:19px;height:19px;flex:none}
.split__half .ic{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.split__max svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.split__half span{
  overflow:hidden;
  max-width:12em;
  transition:max-width .32s cubic-bezier(.2,.7,.25,1),opacity .2s ease;
}

/* the channel the demo runs on, so it is the one wearing the brand */
.split__tg{background:var(--brand);color:#fff;border-left-color:transparent}

/* — leaning left — */
.split:has(.split__max:hover) .split__max,
.split:has(.split__max:focus-visible) .split__max{flex-basis:75%;background:var(--ink);color:#fff}
.split:has(.split__max:hover) .split__tg,
.split:has(.split__max:focus-visible) .split__tg{flex-basis:25%}
.split:has(.split__max:hover) .split__tg span,
.split:has(.split__max:focus-visible) .split__tg span{max-width:0;opacity:0}

/* — leaning right — */
.split:has(.split__tg:hover) .split__tg,
.split:has(.split__tg:focus-visible) .split__tg{flex-basis:75%;background:var(--brand-ink)}
.split:has(.split__tg:hover) .split__max,
.split:has(.split__tg:focus-visible) .split__max{flex-basis:25%}
.split:has(.split__tg:hover) .split__max span,
.split:has(.split__tg:focus-visible) .split__max span{max-width:0;opacity:0}

/* without :has() the pill simply stays halved — both doors still open */
@supports not selector(:has(*)){
  .split__half:hover{background:var(--chip-h)}
  .split__tg:hover{background:var(--brand-ink)}
}

@media (prefers-reduced-motion:reduce){
  .split__half,.split__half span{transition:none}
}

/* the pair reads as one offer, not two loose buttons */
.splitwrap{display:flex;flex-direction:column;align-items:center;gap:7px}
.splitwrap__cap{
  margin:0;
  font-size:11.5px;font-weight:500;letter-spacing:.02em;
  color:var(--faint);
}
/* the Telegram mark is a solid glyph among drawn ones, so it takes
   fill where its neighbours take stroke */
.split__mark{fill:currentColor;stroke:none}

/* ── messenger brand colour ────────────────────────────────────
   Telegram blue, not our purple: the half is a door into someone
   else's app, and the colour is what says so before the wordmark is
   read. MAX keeps paper — its mark is not ours to invent, so the
   wordmark carries it alone. */
.split__tg{background:#229ED9;color:#fff}
.split:has(.split__tg:hover) .split__tg,
.split:has(.split__tg:focus-visible) .split__tg{background:#1D8DC2}

@supports not selector(:has(*)){
  .split__tg:hover{background:#1D8DC2}
}

/* the form's own button sends that same message, so it wears the same
   blue — and the mark needs a size of its own, or the sprite glyph
   scales to the SVG's default 300×150 box and paints over the label */
.lead__tg{width:19px;height:19px;flex:none;fill:currentColor;stroke:none}

/* MAX's own colours, sampled from the tile you supplied rather than
   guessed: the artwork runs cyan at its left edge to violet at its
   right, so the half carries the same sweep and the plate the mark
   sits on is the tile's own violet. */
.split__max{
  background:linear-gradient(105deg,#2D67C1 0%,#6E33E8 62%,#9133DF 100%);
  color:#fff;
}
.split:has(.split__max:hover) .split__max,
.split:has(.split__max:focus-visible) .split__max{
  background:linear-gradient(105deg,#3A78D6 0%,#7C41F2 62%,#A244E8 100%);
}
.split{background:#6E33E8;border-color:transparent}
.split__half + .split__half{border-left:0}

@supports not selector(:has(*)){
  .split__max:hover{background:linear-gradient(105deg,#3A78D6,#7C41F2 62%,#A244E8)}
}

/* the supplied MAX tile is a raster with its own gradient, so it keeps
   its colours and only takes a size and the tile's own corner radius */
.split__tile{
  width:22px;height:22px;flex:none;
  border-radius:6px;
  display:block;
}
/* inside the dialog the pair is the form's submit, so it spans the
   sheet the single button used to */
.lead__split{
  width:100%;
  height:52px;
  margin-top:16px;
}
.lead__split .split__half{
  border:0;
  font:inherit;font-size:15px;font-weight:600;letter-spacing:-.006em;
  cursor:pointer;
}

/* ── client marks ─────────────────────────────────────────────
   Four supplied files of four different shapes: a 5.4:1 wordmark, a
   stacked one, a square tile and a transparent lockup. A single height
   would leave the wide one looming and the compact one lost, so each
   is set on its own — the row is levelled by eye, not by number. */
.trusted__grid:has(.logo--mark){
  display:flex;flex-wrap:wrap;align-items:center;
  gap:18px clamp(22px,3vw,38px);
  max-width:600px;
}
.logo--mark{gap:0}
.logo--mark img{
  width:auto;
  opacity:.78;
  transition:opacity .18s ease;
}
.logo--mark:hover img{opacity:1}

.logo--mark img[src*="borjomi"]{height:clamp(19px,1.8vw,23px)}
.logo--mark img[src*="svyatoy"] {height:clamp(26px,2.5vw,32px)}
.logo--mark img[src*="buldak"]  {height:clamp(26px,2.5vw,32px)}

/* the one raster on a white ground: multiply drops the white out and
   leaves the ink, so the row needs no cut-out. The others carry their
   own transparency and must not be blended — the NDA tile would lose
   its white letters to the page. */
.logo--mark img[src*="svyatoy"]{mix-blend-mode:multiply}

/* a client who cannot be named is still a client — the tile says so,
   so it keeps its own ground and reads as a badge among wordmarks */
.logo--mark img[src*="nda"]{
  height:clamp(28px,2.7vw,34px);
  border-radius:5px;
  opacity:.9;
}