/* ── case-ai — Amplitude interface analytics on a B2B AI product ──────
   Scoped to .case-ai. The wide analytics captures read end to end, so the
   page leans on two framed components borrowed from case-saas (second use,
   still page-scoped): .fig-lead for the full-width chart that has to be read,
   and .srow for the supporting product screen with its argument beside it. */

/* Result: a before → after number that justifies the "doubled" headline in
   plain percentages. The "before" and arrow are dimmed so the eye lands on
   the new value. */
.case-ai #result .bx-num b.ba{display:flex;align-items:baseline;gap:.22em;flex-wrap:wrap}
.case-ai #result .bx-num b.ba .was,
.case-ai #result .bx-num b.ba .arr{opacity:.5;font-weight:400}

/* Diagnostics / result: one mono caption so specialists read the depth
   without a lesson. No rule of its own — spacing separates it, so the page
   does not fill up with hairline dividers. */
.case-ai .diag-line{
  margin-top:clamp(16px,1.8vw,24px);
  font-family:var(--mono);font-size:var(--t-lab);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}

/* ── hero: two screens and a drawn ground ───────────────────────────
   The case is analytics turned into interface, so the hero shows both: the
   Amplitude funnel behind and the deal card with the assistant in front.
   Two files on one 2400x1600 canvas, shipped
   on transparent ground, so stacking them absolutely lines them up to the
   pixel and the first one still sizes the block. No shadows: on this
   near-white ground a soft black drop-shadow reads as dirt, not as lift, and
   the blur baked into the rear layer carries the depth on its own. */
.case-ai #hero .hero-mock{position:relative}
.case-ai #hero .hm-bg{position:absolute;inset:0;width:100%;height:100%}
.case-ai #hero .hm-front{position:absolute;inset:0;width:100%;height:auto}

/* The point of splitting the file: the nearer a layer is, the further it
   swings, the higher it rises on entry and the quicker it settles. One shared
   transform reading five per-layer variables. */
.case-ai #hero .hero-mock img,
.case-ai #hero .hm-bg{
  border-radius:0;box-shadow:none;
  transform:
    rotateY(calc(var(--px) * var(--rot)))
    rotateX(calc(var(--py) * var(--tilt)))
    translate3d(calc(var(--px) * var(--shift)), calc(var(--py) * var(--lift)), 0)
    translateY(calc((1 - var(--s)) * var(--rise)))
    scale(calc(var(--z) + (1 - var(--z)) * var(--s)));
  transition:transform var(--dur) var(--ez);
  /* Stacked layers stay see-through for the whole entrance if opacity tracks
     --s one to one, and mid-flight the funnel reads straight through the deal
     card. So opacity finishes in the first half of the travel and only the
     movement runs the full length. */
  opacity:calc(.12 + .88 * min(1, var(--s) * 2.2));
}
.case-ai #hero .hm-bg   {--rot:-1deg;  --tilt:.5deg;  --shift:3px;  --lift:2px;  --rise:8px;  --z:.99; --dur:.7s}
.case-ai #hero .hm-back {--rot:-3deg;  --tilt:1.8deg; --shift:8px;  --lift:5px;  --rise:20px; --z:.96; --dur:.5s}
.case-ai #hero .hm-front{--rot:-7deg;  --tilt:4.2deg; --shift:24px; --lift:14px; --rise:44px; --z:.94; --dur:.3s}

/* The ground the screens sit on: one sparse measurement grid, nothing else.
   It gives the near-white block a surface without competing with the screens
   for attention. */
.case-ai #hero .hm-bg{overflow:hidden;pointer-events:none}
.case-ai #hero .hm-bg pattern circle{fill:rgba(9,10,11,.13)}
.case-ai #hero .hm-grid{opacity:0;animation:hmFade .9s var(--ez) .15s forwards}
@keyframes hmFade{to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .case-ai #hero .hero-mock img,
  .case-ai #hero .hm-bg{transform:none;transition:none}
  .case-ai #hero .hm-grid{animation:none;opacity:1}
}

/* The serif hook is a touch smaller than the sans line above it, so
   "Мы нашли почему" fits on one line. */
.case-ai #hero h1 em{font-size:.82em}

/* Full-width lime pull in the problem chapter: one phrase, lifted so it does
   not get lost against the left edge of the card. (#brief on the English page,
   #context on the shortened Russian one.) */
.case-ai #brief .bx-lime p,
.case-ai #context .bx-lime p{
  font-size:clamp(21px,2.5vw,38px);line-height:1.1;text-wrap:balance;
}

/* ── the full-width screen read end to end: funnel, paths, retention ──
   Caption sits under the shot in two columns; the chapter head already
   names the screen, so the caption carries the reading, not a re-label. */
.case-ai .fig-lead{margin:0}
.case-ai .sshot{
  background:#15171c;border-radius:var(--radius-card);
  padding:clamp(10px,1.1vw,16px);
  /* Soft, low-opacity lift — the old near-black drop shadow bled onto the
     caption on the light diagnostics ground and read as dirt. */
  box-shadow:0 1px 0 rgba(240,241,235,.07) inset,
             0 18px 40px -30px rgba(9,10,11,.32);
}

/* Diagnostics is the sticky chapter the Solutions sheet slides over. Give it
   real breathing room at the bottom so the caption and method line can be read
   before the band covers them. */
.case-ai #context{padding-bottom:clamp(70px,9vw,150px)}
.case-ai .sshot img{width:100%;height:auto;display:block;border-radius:var(--radius-media)}
.case-ai .fig-lead figcaption{
  display:grid;gap:clamp(8px,1.4vw,32px);
  grid-template-columns:minmax(0,1fr);
  margin-top:clamp(16px,1.8vw,26px);
}
@media(min-width:900px){
  .case-ai .fig-lead figcaption{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}
.case-ai .fig-lead figcaption b{
  font-size:clamp(19px,1.8vw,27px);font-weight:500;letter-spacing:-.04em;line-height:1.1;
}
.case-ai .fig-lead figcaption p{
  color:var(--muted);font-size:var(--t-body);line-height:1.6;max-width:56ch;
}

/* ── screen on the left, the whole chapter head beside it ─────────────
   Diagnosis and Solution 02 carry no .chap-head of their own: the eyebrow,
   the headline and the one line about the screen live in the figcaption, so
   the reader gets a single text block per screen instead of one above the
   image repeating one next to it. The heading stays an <h2> for the document
   outline, only sized down to what a side column can hold. */
.case-ai .srow{
  margin:0;display:grid;gap:clamp(20px,2.4vw,40px);
  grid-template-columns:minmax(0,1fr);align-items:center;
  padding-top:clamp(28px,3.2vw,50px);margin-top:clamp(28px,3.2vw,50px);
  border-top:1px solid var(--line);
}
.case-ai .chap-cont > .srow:first-child,
.case-ai .srow.no-rule{border-top:0;padding-top:0;margin-top:0}
/* Near half and half, not a screen with a caption strip: the column has to
   hold a full-size .h2 at the same scale as every other chapter head, and at
   .82fr that headline broke into five short lines. */
@media(min-width:900px){
  .case-ai .srow{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  /* flipped: the screen still wants the wider track, so the tracks swap with
     it, not just the order — otherwise the image lands in the text column */
  .case-ai .srow.srow-flip{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  .case-ai .srow.srow-flip .sshot{order:2}
}
.case-ai .srow figcaption .eyebrow-m{margin-bottom:clamp(14px,1.6vw,22px)}
.case-ai .srow figcaption .h2{margin-bottom:clamp(14px,1.4vw,20px)}
.case-ai .srow figcaption p{color:var(--muted);font-size:var(--t-body);line-height:1.6;max-width:42ch}

/* ── the causal close of each solution ────────────────────────────────
   Data finding → the change → the measured result. Two beats stacked in one
   filled panel that spreads them over its full height (so nothing reads as an
   empty box), beside the result on a lime panel like a compact .hit. */
.case-ai .sstory{
  margin-top:clamp(22px,2.4vw,34px);
  display:grid;gap:10px;grid-template-columns:minmax(0,1fr);
}
@media(min-width:760px){
  .case-ai .sstory{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
}
.case-ai .sstory-cause,.case-ai .sstory-metric{
  border-radius:var(--radius-card);padding:clamp(18px,1.9vw,26px);
  box-shadow:0 1px 0 rgba(240,241,235,.05) inset;
}
.case-ai .sstory-cause{
  background:rgba(240,241,235,.045);border:1px solid rgba(240,241,235,.10);
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(14px,1.6vw,20px);
}
.case-ai .sstory-row + .sstory-row{border-top:1px solid rgba(240,241,235,.10);padding-top:clamp(14px,1.6vw,20px)}
.case-ai .sstory-row .lab-m{display:block;margin-bottom:8px;color:var(--muted)}
.case-ai .sstory-row p{font-size:14px;line-height:1.5}
.case-ai .sstory-metric{
  background:var(--lime);border:1px solid var(--lime);box-shadow:none;
  display:flex;flex-direction:column;justify-content:center;
}
.case-ai .sstory-metric .lab-m{color:rgba(9,10,11,.55);margin-bottom:0}
.case-ai .sstory-metric b{
  display:block;font-size:clamp(42px,4.8vw,66px);letter-spacing:-.05em;line-height:.85;
  font-weight:600;color:var(--ink);margin:clamp(12px,1.4vw,18px) 0;
}
.case-ai .sstory-metric p{color:rgba(9,10,11,.76);font-size:13.5px;line-height:1.42}
.case-ai .sstory-metric small{
  display:block;margin-top:10px;font-family:var(--mono);font-size:var(--t-lab);
  letter-spacing:.08em;color:rgba(9,10,11,.5);
}

/* ── the headline number paired with a sentence, in the light context ── */
.case-ai .hit-pair{margin:0;display:grid;gap:clamp(18px,2vw,30px);grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){
  .case-ai .hit-pair{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
}
.case-ai .hit-pair .hit{margin:0;align-content:center}
.case-ai .hit-pair .hit b{font-size:clamp(46px,5.4vw,84px)}
.case-ai .hit-pair .hit p{font-size:clamp(14px,1.1vw,17px);max-width:34ch}
.case-ai .hit-pair .hit-side{
  align-self:center;padding-left:clamp(18px,2vw,28px);border-left:1px solid var(--line);
}
.case-ai .hit-pair .hit-side b{
  display:block;font-size:clamp(17px,1.4vw,21px);font-weight:500;
  letter-spacing:-.035em;margin-bottom:8px;
}
.case-ai .hit-pair .hit-side p{color:var(--muted);font-size:var(--t-body);line-height:1.55}