/* v26: verified shops, readable stories, and a direct route from the opening.
   The existing reveal observer owns entrances; every case remains in the page. */
body[data-visual-edition] :is(.case-section,.case-hero-link) {
  --case-ink:var(--edition-ink,var(--hero-ink));
  --case-muted:var(--read-muted,#4f617a);
  --case-tone:var(--edition-strong,var(--hero-tone));
  --case-accent:var(--edition-accent,var(--hero-accent));
  --case-paper:var(--edition-paper,var(--hero-paper));
  --case-card:var(--edition-card,#fff);
  --case-tint:var(--edition-tint,var(--hero-soft));
  --case-line:color-mix(in srgb,var(--case-tone) 20%,var(--case-card));
  --case-ease:cubic-bezier(.16,1,.3,1);
}

body[data-visual-edition] .case-section {
  container:case-section / inline-size;
  color:var(--case-ink);
  background:linear-gradient(180deg,color-mix(in srgb,var(--case-tint) 45%,var(--case-paper)),var(--case-paper) 310px);
  border-top:1px solid var(--case-line);
}
body[data-visual-edition] .case-section > .section-lead {
  color:var(--case-muted);
  font-size:14px;
  line-height:1.9;
}
body[data-visual-edition] .case-proof-line {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:9px 18px;
  margin:26px 0 28px;
  padding:16px 0;
  border-block:1px solid var(--case-line);
}
body[data-visual-edition] .case-proof-line > strong {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px;
  color:var(--case-tone);
  font:800 42px/1 var(--display);
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
body[data-visual-edition] .case-proof-line > strong > span {
  font:700 13px/1.5 var(--sans);
  letter-spacing:0;
}
body[data-visual-edition] .case-proof-line > p {
  margin:0;
  color:var(--case-muted);
  font-size:14px;
  line-height:1.7;
}
body[data-visual-edition] .case-proof-line > p > small {display:block;font-size:12px;line-height:1.7}
body[data-visual-edition] .case-list {
  display:grid;
  gap:24px;
}
body[data-visual-edition] .customer-case {
  min-width:0;
  overflow:hidden;
  border:1px solid var(--case-line);
  border-radius:14px;
  color:var(--case-ink);
  background:var(--case-card);
  box-shadow:0 8px 28px color-mix(in srgb,var(--case-tone) 8%,transparent);
  isolation:isolate;
}
body[data-visual-edition] .case-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 12px;
  padding:15px 20px;
  border-bottom:1px solid var(--case-line);
  background:color-mix(in srgb,var(--case-tint) 48%,var(--case-card));
  font-size:12px;
  line-height:1.65;
}
body[data-visual-edition] .case-match {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  color:var(--case-tone);
}
body[data-visual-edition] .case-match::before {
  content:"";
  width:5px;
  height:5px;
  flex:none;
  border-radius:50%;
  background:var(--case-tone);
}
body[data-visual-edition] .case-industry {
  padding:3px 9px;
  border:1px solid var(--case-line);
  border-radius:4px;
  font-weight:700;
  color:var(--case-ink);
  background:var(--case-card);
}
body[data-visual-edition] .customer-case[data-case-match="related"] .case-match::before {
  background:transparent;
  border:1px solid currentColor;
}
body[data-visual-edition] .case-media {
  min-width:0;
  margin:0;
  padding:20px 20px 0;
}
body[data-visual-edition] .customer-case .case-photo {
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:var(--case-ratio,16 / 9);
  max-height:340px;
  overflow:hidden;
  border-radius:7px;
  background:color-mix(in srgb,var(--case-tint) 50%,var(--case-card));
}
body[data-visual-edition] .customer-case .case-photo img {
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
}
body[data-visual-edition] .case-media[data-photo-size="compact"] .case-photo {
  max-width:420px;
  margin-inline:auto;
  background:#152235;
}
body[data-visual-edition] .case-media figcaption {
  margin:9px 0 0;
  font-size:12px;
  line-height:1.65;
  color:var(--case-muted);
  overflow-wrap:anywhere;
}
/* The shared image-error handler hides the photo; avoid leaving an empty frame. */
body[data-visual-edition] .customer-case .case-photo[hidden] {display:none!important}
body[data-visual-edition] .case-media:has(.case-photo[hidden]) {display:none}
body[data-visual-edition] .case-body {
  min-width:0;
  padding:23px 22px 25px;
}
body[data-visual-edition] .case-location {
  margin:0 0 5px;
  font-size:12px;
  font-weight:600;
  line-height:1.7;
  color:var(--case-muted);
}
body[data-visual-edition] .case-shop-name {
  margin:0;
  font-size:clamp(26px,5.5cqw,34px);
  font-weight:800;
  line-height:1.3;
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
  text-wrap:balance;
  color:var(--case-ink);
}
body[data-visual-edition] .case-outcome {
  margin:17px 0 9px;
  font-size:20px;
  font-weight:800;
  line-height:1.65;
  letter-spacing:-.035em;
  color:var(--case-tone);
  text-wrap:pretty;
}
body[data-visual-edition] .case-summary {
  margin:0;
  font-size:14px;
  line-height:1.95;
  color:var(--case-ink);
  text-wrap:pretty;
}
body[data-visual-edition] .case-relevance {
  margin:17px 0 0;
  padding:12px 14px;
  border-left:3px solid var(--case-accent);
  background:color-mix(in srgb,var(--case-tint) 55%,var(--case-card));
  color:var(--case-ink);
  font-size:14px;
  line-height:1.85;
}
body[data-visual-edition] .case-points {
  display:grid;
  gap:0;
  list-style:none;
  margin:21px 0 0;
  padding:0;
}
body[data-visual-edition] .case-points > li {
  position:relative;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  align-content:start;
  gap:4px 8px;
  min-width:0;
  padding:13px 0;
  border-top:1px solid var(--case-line);
}
body[data-visual-edition] .case-points > li > span {
  grid-column:1;
  grid-row:1 / 3;
  padding-top:2px;
  font:800 20px/1.2 var(--display);
  color:var(--case-tone);
}
body[data-visual-edition] .case-points > li > strong {
  grid-column:2;
  font-size:14px;
  line-height:1.6;
  font-weight:800;
  color:var(--case-ink);
}
body[data-visual-edition] .case-points > li > small {
  grid-column:2;
  font-size:14px;
  line-height:1.7;
  color:var(--case-muted);
}
body[data-visual-edition] .case-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  margin:23px 0 0;
}
body[data-visual-edition] .case-actions > a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  min-width:0;
  padding:10px 14px;
  border:1px solid transparent;
  border-radius:7px;
  font-size:14px;
  font-weight:800;
  line-height:1.6;
  text-decoration:none;
  transition:background .25s,box-shadow .25s,translate .35s var(--case-ease);
}
body[data-visual-edition] .case-actions .case-official-link {
  color:#fff;
  background:var(--case-tone);
}
body[data-visual-edition] .case-actions .case-feature-link {
  padding-inline:10px;
  color:var(--case-tone);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}
body[data-visual-edition] .case-note {
  margin:15px 0 0;
  font-size:12px;
  line-height:1.85;
  color:var(--case-muted);
}
body[data-visual-edition] .case-consult-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 18px;
  min-height:64px;
  margin:28px 0 0;
  padding:17px 2px;
  border-block:1px solid var(--case-line);
  color:var(--case-ink);
  font-size:14px;
  font-weight:700;
  line-height:1.8;
  text-decoration:none;
}
body[data-visual-edition] .case-consult-link > span {
  color:var(--case-tone);
  text-decoration:underline;
  text-underline-offset:5px;
}

/* Keep the first step into a real shop close to the opening proof. */
body[data-visual-edition] .case-hero-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:14px 0 20px;
  padding:14px 16px;
  min-height:72px;
  border:1px solid var(--case-line);
  border-left:3px solid var(--case-accent);
  border-radius:8px;
  color:var(--case-ink);
  background:color-mix(in srgb,var(--case-tint) 50%,var(--case-card));
  text-decoration:none;
  transition:background .25s,box-shadow .25s;
}
body[data-visual-edition] .case-hero-link > span {min-width:0}
body[data-visual-edition] .case-hero-link small {
  display:block;
  margin-bottom:3px;
  font-size:12px;
  line-height:1.6;
  color:var(--case-muted);
}
body[data-visual-edition] .case-hero-link strong {
  display:block;
  font-size:14px;
  line-height:1.7;
  overflow-wrap:anywhere;
}
body[data-visual-edition] .case-hero-link > b {
  display:grid;
  place-items:center;
  flex:none;
  width:34px;
  height:34px;
  border-radius:50%;
  color:#fff;
  background:var(--case-tone);
  font-size:20px;
  line-height:1;
  transition:translate .4s var(--case-ease);
}
body[data-visual-edition] :is(.case-section a,.case-hero-link):focus-visible {
  outline:3px solid var(--case-tone);
  outline-offset:4px;
}

/* One entrance uses the shared observer and never cycles readable content away. */
body[data-visual-edition].js-ready .customer-case[data-reveal] {
  transition:opacity .55s ease,transform .7s var(--case-ease);
}
body[data-visual-edition].js-ready .customer-case.is-visible .case-media {
  animation:case-photo-arrive .8s var(--case-ease) both;
}
@keyframes case-photo-arrive {
  from {opacity:.65;transform:translateY(10px)}
  to {opacity:1;transform:none}
}
@media (hover:hover) and (pointer:fine) {
  body[data-visual-edition] .case-official-link:hover {
    translate:0 -2px;
    box-shadow:0 5px 13px color-mix(in srgb,var(--case-tone) 18%,transparent);
  }
  body[data-visual-edition] .case-feature-link:hover {background:var(--case-tint)}
  body[data-visual-edition] .case-hero-link:hover {background:var(--case-tint)}
  body[data-visual-edition] .case-hero-link:hover > b {translate:2px -2px}
  body[data-visual-edition] .case-consult-link:hover > span {text-decoration-thickness:2px}
}

/* A row on wider pages, one complete story at a time in the narrow column. */
@container case-section (min-width:480px) {
  body[data-visual-edition] .case-points {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
  }
  body[data-visual-edition] .case-points > li {gap:7px 6px;border-top-width:2px}
  body[data-visual-edition] .case-points > li > span {grid-row:1}
  body[data-visual-edition] .case-points > li > small {grid-column:1 / -1}
  body[data-visual-edition] .case-list-overview .customer-case {
    display:grid;
    grid-template-columns:minmax(0,37%) minmax(0,1fr);
    grid-template-rows:auto 1fr;
  }
  body[data-visual-edition] .case-list-overview .case-heading {grid-column:1 / -1}
  body[data-visual-edition] .case-list-overview .case-media {padding:23px 0 20px 18px;align-self:start}
  body[data-visual-edition] .case-list-overview .case-body {padding:23px 20px 24px}
  body[data-visual-edition] .case-list-overview .case-shop-name {font-size:26px}
  body[data-visual-edition] .case-list-overview .case-outcome {font-size:18px;margin-top:13px}
  body[data-visual-edition] .case-list-overview .case-actions {gap:2px;margin-top:17px}
  body[data-visual-edition] .case-list-overview .case-actions > a {font-size:14px;padding-inline:10px}
  body[data-visual-edition] .case-list-overview .case-feature-link {padding-inline:0}
  body[data-visual-edition] .case-list-overview .case-media:has(.case-photo[hidden]) + .case-body {grid-column:1 / -1}
}
@container case-section (max-width:330px) {
  body[data-visual-edition] .case-heading {padding:13px 15px;gap:7px}
  body[data-visual-edition] .case-media {padding:15px 15px 0}
  body[data-visual-edition] .case-body {padding:19px 16px 22px}
  body[data-visual-edition] .case-shop-name {font-size:26px}
  body[data-visual-edition] .case-outcome {font-size:19px;line-height:1.65}
  body[data-visual-edition] .case-actions > a {flex:1 1 100%}
  body[data-visual-edition] .case-actions {gap:4px}
}

@media (prefers-reduced-motion:reduce) {
  body[data-visual-edition] :is(.case-section,.case-hero-link),
  body[data-visual-edition] :is(.case-section,.case-hero-link) * {animation:none!important;transition:none!important}
  body[data-visual-edition] .customer-case[data-reveal] {opacity:1!important;transform:none!important}
  body[data-visual-edition] :is(.case-official-link,.case-hero-link > b) {translate:none!important}
}
body[data-visual-edition].motion-off :is(.case-section,.case-hero-link),
body[data-visual-edition].motion-off :is(.case-section,.case-hero-link) *,
html[data-motion="off"] body[data-visual-edition] :is(.case-section,.case-hero-link),
html[data-motion="off"] body[data-visual-edition] :is(.case-section,.case-hero-link) * {animation:none!important;transition:none!important}
body[data-visual-edition].motion-off .customer-case[data-reveal],
html[data-motion="off"] body[data-visual-edition] .customer-case[data-reveal] {opacity:1!important;transform:none!important}
body[data-visual-edition].motion-off :is(.case-official-link,.case-hero-link > b),
html[data-motion="off"] body[data-visual-edition] :is(.case-official-link,.case-hero-link > b) {translate:none!important}