/* MUST website case only. Screenshot pixels and their original page titles stay intact. */
.must-case {
  --must-deep: #062c4c;
  --must-blue: #0a5e91;
  --must-sky: #70b3ce;
  --must-rule: #d5e5ee;
  --case-paper: #f7fafc;
  background: linear-gradient(180deg, #fff 0, #f7fafc 920px, #f7fafc 100%);
}
.must-case .page-intro { padding-bottom: clamp(30px, 4vw, 58px); }
.must-case .page-intro h1 {
  max-width: 22ch;
  font-size: clamp(36px, 5.1vw, 72px);
  line-height: 1.23;
  text-wrap: balance;
}
html[lang=en] .must-case .page-intro h1 { letter-spacing: -.035em; }
.must-case .page-intro .lede { max-width: 66ch; }
.must-case figure.case-hero { margin-bottom: clamp(40px, 5vw, 76px); }
.must-case .must-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(36px, 5.2vw, 76px) 6.3% clamp(66px, 8.5vw, 126px);
  border: 1px solid #174e70;
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 18% 0, rgb(112 179 206 / .42), transparent 58%),
    radial-gradient(ellipse at 100% 100%, rgb(10 94 145 / .6), transparent 65%),
    linear-gradient(132deg, #0a4368, #062c4c 65%, #073655);
}
.must-case .must-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgb(183 222 239 / .055) 1px, transparent 1px), linear-gradient(90deg, rgb(183 222 239 / .055) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(160deg, #000, transparent 78%);
}
.must-case .must-stage-orbit {
  position: absolute;
  z-index: -1;
  left: 33%;
  top: -44%;
  width: 106%;
  aspect-ratio: 1;
  border: 1px solid rgb(164 214 236 / .18);
  border-radius: 50%;
  pointer-events: none;
}
.must-case .must-stage-orbit::after {
  content: "";
  position: absolute;
  inset: 5.5%;
  border: 1px solid rgb(164 214 236 / .1);
  border-radius: inherit;
}
.must-case .must-browser {
  position: relative;
  width: 90%;
  overflow: hidden;
  border: 1px solid rgb(209 231 244 / .65);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 26px 64px rgb(0 14 29 / .34), 0 1px 0 rgb(255 255 255 / .2);
  transform: rotate(-1deg);
}
.must-case .must-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid #e1e9ef;
  background: #edf3f7;
}
.must-case .must-browser-bar i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: #afc3d1; }
.must-case .must-browser-bar i:first-child { background: #70b3ce; }
.must-case .must-browser-bar span { margin-left: 10px; color: #4e6b7e; font: 11px/1.4 Arial, sans-serif; }
.must-case .must-browser > img,
.must-case .must-phone > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: top;
  background: #fff;
}
.must-case .must-phone {
  position: absolute;
  right: 5.1%;
  bottom: 8.5%;
  width: 18.8%;
  padding: 5px;
  overflow: hidden;
  border: 1px solid #d9e7ef;
  border-radius: clamp(16px, 1.7vw, 25px);
  background: #eaf1f5;
  box-shadow: 0 20px 42px rgb(0 16 33 / .4), inset 0 0 0 1px #fff;
  transform: rotate(3deg);
}
.must-case .must-phone > img { border-radius: clamp(12px, 1.35vw, 20px); }
.must-case .must-stage-label {
  position: absolute;
  left: 6.3%;
  bottom: 27px;
  max-width: 67%;
  color: #d0e5f0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}
.must-case .case-hero > figcaption { padding-left: 2px; }
.must-case .must-summary { margin-top: 0; font-size: clamp(18px, 2vw, 24px); line-height: 1.8; color: var(--must-deep); }
.must-case .must-case-cta { margin-top: clamp(32px, 5vw, 64px); }
.must-case .must-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-column: 1 / -1;
  gap: 0;
  margin-block: clamp(32px, 4vw, 58px);
  border-block: 1px solid var(--must-rule);
}
.must-case .must-overview > section { min-width: 0; padding: 28px 24px 28px 0; }
.must-case .must-overview > section + section { padding-left: 24px; border-left: 1px solid var(--must-rule); }
.must-case .must-overview > section > span { display: block; margin-bottom: 19px; color: var(--must-blue); font: 12px/1.4 Arial, sans-serif; font-variant-numeric: tabular-nums; }
.must-case .must-overview h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.5; }
.must-case .must-overview p { margin: 0; color: #60727d; font-size: 15px; line-height: 1.85; }
.must-case .case-media-section { border-top-color: var(--must-rule); }
.must-case .case-media-section > header { max-width: 840px; margin-bottom: clamp(30px, 4vw, 50px); }
.must-case .case-media-section > header h2 { margin: 0; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.35; text-wrap: balance; }
.must-case .case-media-section > header .kicker { margin-bottom: 12px; }
.must-case .must-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(38px, 4.3vw, 64px) clamp(22px, 3vw, 42px); }
.must-case .must-screen { min-width: 0; margin: 0; }
.must-case .must-screen:first-child { grid-column: 1 / -1; }
.must-case .must-screen-frame {
  min-width: 0;
  padding: 13px;
  overflow: hidden;
  border: 1px solid var(--must-rule);
  border-radius: 16px;
  background: linear-gradient(140deg, #e9f1f7, #f1f7fa 70%);
  box-shadow: 0 7px 22px rgb(19 58 84 / .035);
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}
.must-case .must-screen-url { display: block; margin: 0 4px 12px; color: #597788; font: 11px/1.5 Arial, sans-serif; overflow-wrap: anywhere; }
.must-case .must-screen-frame > img { display: block; width: 100%; max-width: 100%; height: auto; min-height: 0; max-height: none; object-fit: contain; object-position: top; border: 1px solid #dde7ee; border-radius: 6px; background: white; }
.must-case .must-screen:first-child .must-screen-frame { padding: clamp(16px, 2.8vw, 38px); background: radial-gradient(ellipse at 100% 0, #d4e7f2, transparent 65%), #e9f2f8; }
.must-case .must-screen:first-child .must-screen-frame > img { max-width: 1180px; margin-inline: auto; box-shadow: 0 12px 30px rgb(25 65 93 / .08); }
.must-case .must-screen figcaption { padding-top: 20px; }
.must-case .must-screen figcaption > span { display: block; margin-bottom: 7px; color: var(--must-blue); font-size: 12px; font-variant-numeric: tabular-nums; }
.must-case .must-screen figcaption strong { font-size: clamp(18px, 1.7vw, 22px); }
.must-case .must-screen figcaption small { font-size: 13px; }
.must-case .must-screen figcaption p { max-width: 65ch; font-size: 15px; }
.must-case .must-enlarge { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; margin-top: 8px; color: var(--must-blue); font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
.must-case .must-enlarge:focus-visible { outline: 2px solid var(--must-blue); outline-offset: 4px; }
.must-case .must-screen--mobile .must-screen-frame { display: grid; justify-items: center; padding: 22px; background: radial-gradient(ellipse at 20% 0, #d3e8f3, transparent 65%), #e9f2f8; }
.must-case .must-screen--mobile .must-screen-url { justify-self: start; }
.must-case .must-screen--mobile .must-screen-frame > img { width: auto; max-width: 100%; height: clamp(340px, 36vw, 480px); max-height: none; border: 5px solid #fff; border-radius: 17px; box-shadow: 0 12px 26px rgb(24 61 87 / .14); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .must-case .must-screen:hover .must-screen-frame { transform: translateY(-4px); border-color: #8fbad0; box-shadow: 0 12px 30px rgb(10 94 145 / .09); }
}
@media (max-width: 1000px) {
  .must-case .must-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .must-case .must-overview > section { padding: 25px 22px; }
  .must-case .must-overview > section:nth-child(odd) { padding-left: 0; border-left: 0; }
  .must-case .must-overview > section:nth-child(n+3) { border-top: 1px solid var(--must-rule); }
}
@media (max-width: 700px) {
  .must-case .page-intro h1 { font-size: clamp(34px, 7.5vw, 48px); max-width: 22ch; }
  .must-case .must-stage { padding: 30px 18px 74px; border-radius: 16px; }
  .must-case .must-browser { width: 96%; border-radius: 8px; transform: rotate(-1deg); }
  .must-case .must-browser-bar { height: 25px; padding-inline: 9px; gap: 4px; }
  .must-case .must-browser-bar i { width: 4px; height: 4px; }
  .must-case .must-browser-bar span { font-size: 9px; margin-left: 6px; }
  .must-case .must-phone { width: 25%; right: 4%; bottom: 15%; padding: 3px; border-radius: 13px; }
  .must-case .must-phone > img { border-radius: 10px; }
  .must-case .must-stage-label { left: 18px; bottom: 19px; max-width: 88%; font-size: 10px; }
  .must-case .must-gallery { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .must-case .must-screen:first-child { grid-column: auto; }
  .must-case .must-screen-frame { padding: 10px; border-radius: 12px; }
  .must-case .must-screen:first-child .must-screen-frame { padding: 12px; }
  .must-case .must-screen-url { margin-bottom: 9px; font-size: 10px; }
  .must-case .must-screen figcaption { padding-top: 16px; }
  .must-case .must-screen--mobile .must-screen-frame > img { height: 430px; max-height: none; }
}
@media (max-width: 420px) {
  .must-case .must-overview { grid-template-columns: minmax(0, 1fr); }
  .must-case .must-overview > section,.must-case .must-overview > section + section { padding: 21px 0; border-left: 0; }
  .must-case .must-overview > section + section { border-top: 1px solid var(--must-rule); }
  .must-case .must-overview > section > span { margin-bottom: 12px; }
  .must-case .must-screen--mobile .must-screen-frame > img { height: auto; width: 190px; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .must-case .must-screen-frame { transition: none; }
  .must-case .must-screen:hover .must-screen-frame { transform: none; }
}