/* case-cr.css — editorial refinement isolated from the original case. */

.case-cr{
  --muted:rgba(9,10,11,.70);
  --dim:rgba(9,10,11,.56);
}
.case-cr .band{
  --muted:rgba(240,241,235,.70);
  --dim:rgba(240,241,235,.55);
}

.case-cr .chap{padding-block:clamp(56px,6vw,92px)}
.case-cr .chap-head{margin-bottom:clamp(28px,3.2vw,46px)}

/* The three solutions remain one ink story, but the entrances no longer use
   a full viewport of air before their first piece of evidence appears. */
#cr-solutions{
  position:relative;z-index:2;padding-block:0;
  border-radius:var(--radius-section) var(--radius-section) 0 0;
}
#cr-solutions > .chap:first-of-type{padding-top:clamp(64px,7vw,104px)}
#cr-solutions > .chap:last-of-type{padding-bottom:clamp(64px,7vw,104px)}
#cr-solutions > .chap{padding-block:clamp(48px,5vw,76px)}
#cr-solutions > #s3{padding-bottom:clamp(40px,4vw,60px)}

/* One anchor and two supporting proofs: the old four-tile gallery gave every
   capture the same voice and made the redesign evidence feel repetitive. */
.cr-proof{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,1.8vw,28px)}
.cr-proof-side{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,1.8vw,28px)}
@media(min-width:960px){
  .cr-proof{grid-template-columns:minmax(0,1.65fr) minmax(300px,.85fr);align-items:start}
  .cr-proof-main{position:sticky;top:calc(var(--nav-h) + 76px)}
}

.case-cr .vid video{accent-color:var(--lime)}
.case-cr .vid + .fig-wide{max-width:none}
.case-cr .cr-toasts .fig-shot{
  box-sizing:border-box;padding:1px;border-radius:0;overflow:visible;
}
.case-cr .cr-toasts img{border-radius:0}

/* The redesign proofs use .mcard from case.css. A slightly longer blur than
   the DEX default: these captures carry more detail at the lower edge. */
.case-cr .cr-proof-card{
  --mcard-blur-h:40px;
  --mcard-mask:.86;
  --mcard-fade-h:48px;
  --mcard-fade-mid:rgba(20,21,24,.38) 55%;
  --mcard-cap-pad:18px 20px 22px;
}
.case-cr .cr-proof-card .fig-shot{
  border-radius:var(--radius-media);overflow:hidden;background:#17181d;
}
.case-cr .cr-proof-card.cr-toasts .fig-shot{
  padding:2px;border-radius:0;overflow:visible;
}
.case-cr .cr-proof-card.cr-toasts .fig-shot::before,
.case-cr .cr-proof-card.cr-toasts .fig-shot::after{display:none}
.case-cr .note small{
  display:block;margin-top:10px;color:var(--dim);
  font-family:var(--mono);font-size:10px;line-height:1.5;letter-spacing:.06em;
}

/* Put the outcome before the evidence, but quietly: Solution 02 already closes
   on a lime .hit, and a second lime slab two screens later read as shouting.
   The same two numbers as a .nums row — only the achievement keeps the lime. */
.case-cr .cr-mobile-nums{
  margin-top:0;margin-bottom:clamp(26px,3vw,44px);
}
.case-cr .cr-mobile-nums b i{font-style:normal;font-weight:300;opacity:.5}
.case-cr .cr-mobile-nums .lab-m{display:block;max-width:30ch}
/* .nums-lead paints a lime chip but inherits its colour. On the light ground of
   #context that is ink and reads; inside .band it is --paper, i.e. white on lime.
   First time this component lands on the dark run, so the fix stays local. */
.case-cr .band .nums-lead b{color:var(--ink)}

/* Compact mobile proofs: one card owns the screen and its explanation.
   The useful middle of each long capture remains visible while the lower
   edge softens into the caption instead of extending for another viewport. */
.case-cr .cr-mobile-card{
  --mcard-inset:0px;
  --mcard-blur:6px;
  --mcard-blur-h:48px;
  --mcard-mask:.9;
  --mcard-fade-h:54px;
  --mcard-fade-mid:rgba(20,21,24,.5) 52%;
  --mcard-cap-pad:12px 20px 22px;
}
.case-cr .cr-mobile-card .fig-shot{
  height:clamp(360px,36vw,440px);
  overflow:hidden;border-radius:0;background:#17181d;
}
.case-cr .cr-mobile-card .fig-shot img{
  width:auto;max-width:calc(100% - 24px);height:calc(100% - 19px);
  margin:19px auto 0;object-fit:contain;object-position:center top;
  border-radius:0;transform:none;
}
@media(min-width:900px){
  /* The supplied crops have slightly different aspect ratios. Matching the
     columns to those ratios keeps the visible side padding equal without
     stretching any interface. */
  .case-cr #s3 .figs{
    grid-template-columns:minmax(0,1.02fr) minmax(0,.95fr) minmax(0,1fr);
  }
  .case-cr #s3 .f-2{grid-column:auto}
}

#cr-result{padding-block:clamp(52px,6vw,88px)}
.case-cr .did-item{padding:clamp(20px,2vw,28px)}
.case-cr .did-item p{line-height:1.5}

@media(max-width:959px){
  /* Keep the selected reason next to its screen. Expanding all five reasons
     on a phone separated the explanation from the panel by several screens. */
  .case-cr .vtab-b{grid-template-rows:0fr}
  .case-cr .vtab[aria-selected="true"] .vtab-b{grid-template-rows:1fr}
  .case-cr .vtab-b p{opacity:0}
  .case-cr .vtab[aria-selected="true"] .vtab-b p{opacity:1}

  /* On a single-column layout the card widths follow the crop ratios, so
     each image keeps the same visual side inset as the registration card. */
  .case-cr .cr-mobile-trade{width:calc(100% - 22px);margin-inline:auto}
  .case-cr .cr-mobile-bot{width:calc(100% - 6px);margin-inline:auto}
}

@media(max-width:700px){
  .case-cr .chap{padding-block:52px}
  .case-cr .chap-head{margin-bottom:28px}
  .case-cr .vtab{padding-block:16px}
  .case-cr .vtab-t{font-size:17px}
  .case-cr .vtab-b p{font-size:14px;line-height:1.58}
  .case-cr .lang-btn{min-width:34px;min-height:34px}
  .case-cr .nav-cta{min-height:44px}
  .case-cr .cr-mobile-card .fig-shot{height:380px}
  .case-cr .cr-mobile-card .fig-shot img{height:calc(100% - 20px);margin-top:20px}
}

@media(prefers-reduced-motion:reduce){
  .cr-proof-main{position:relative;top:0}
}