.case-sharing {
  background:
    radial-gradient(ellipse at 75% 15%, #4e432938, transparent 58%), #0d1820;
  border-top: 1px solid #73613d55;
  border-bottom: 1px solid #73613d55;
}
.case-sharing h2 {
  font-size: clamp(34px, 5vw, 70px);
  line-height: 1.45;
  letter-spacing: 0.035em;
}
.case-sharing h2 em {
  font-style: normal;
  color: #e8cc94;
}
.case-lead {
  font-size: clamp(19px, 2.5vw, 29px);
  line-height: 1.85;
  margin: 32px 0 50px;
  color: #e9e7df;
}
.case-network {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.case-network article {
  border-top: 1px solid #a88b56;
  padding: 28px 0;
  position: relative;
}
.case-network article::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e8cc94;
  box-shadow: 0 0 22px #e8cc9466;
}
.case-network span {
  font:
    italic 23px Georgia,
    serif;
  color: #b39866;
}
.case-network h3 {
  margin: 18px 0 14px;
  font-size: 25px;
}
.case-network p {
  font-size: 14px;
  line-height: 1.95;
  color: #c1cbd1;
}
.case-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px;
  margin: 32px 0 40px;
}
.case-story p {
  line-height: 2;
  font-size: 16px;
}
.sharing-notice {
  border: 1px solid #b3986670;
  background: #af8d4510;
  padding: 28px 32px;
}
.sharing-notice strong {
  color: #eed9b0;
  font-size: 18px;
}
.sharing-notice p {
  font-size: 14px;
  line-height: 1.9;
  margin: 13px 0 0;
}
.bundle-notice {
  margin-top: 38px;
  border-left: 3px solid #e8cc94;
  background: #192d38;
  padding: 30px 36px;
}
.bundle-notice h3 {
  font-size: clamp(23px, 3vw, 34px);
  line-height: 1.55;
  margin: 16px 0 24px;
}
.bundle-notice p {
  line-height: 1.95;
}
.tool-label {
  font-size: 15px;
  margin: 0 0 12px;
}
.tool-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.entry-field .tool-choice {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  min-height: 54px;
  border: 1px solid #5e7482;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  background: #162630;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.tool-choice:has(input:checked) {
  background: #493e28;
  border-color: #e8cc94;
  color: #fff3d7;
}
.tool-choice input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: #d5b881;
  margin: 0;
}
.tool-choice span {
  overflow-wrap: anywhere;
}
.tool-options[aria-invalid="true"] {
  outline: 2px solid #fdaaaa;
  outline-offset: 4px;
}
/* The native layout remains the fallback. Motion only changes decorative transforms. */
.benefits-section {
  overflow: clip;
  background:
    radial-gradient(ellipse at 22% 30%, #223c4344, transparent 60%), #101d25;
}
.benefits-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 7vw;
  align-items: start;
}
.benefits-intro {
  position: sticky;
  top: 100px;
  padding-top: 20px;
}
.benefits-intro h2 {
  font-size: clamp(27px, 3vw, 43px);
  line-height: 1.55;
}
.benefit-grid {
  grid-template-columns: 1fr;
  gap: 32px;
  background: none;
  border: 0;
  margin-top: 0;
  perspective: 1000px;
}
.benefit {
  min-height: 300px;
  position: relative;
  overflow: hidden;
  padding: 46px 40px;
  background: linear-gradient(135deg, #1b303c, #11222c);
  border: 1px solid #52626b88;
  border-radius: 6px;
  isolation: isolate;
  box-shadow: 0 20px 70px #0002;
}
.benefit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 0% 0%, #d5b88133, transparent 75%);
  opacity: var(--glow, 0.25);
}
.benefit::after {
  content: attr(data-display);
  position: absolute;
  right: 12px;
  bottom: -28px;
  font:
    180px Georgia,
    serif;
  color: #d5b8810a;
  z-index: -1;
  line-height: 1;
}
.benefit h3 {
  font-size: clamp(21px, 2vw, 27px);
  margin: 26px 0 18px;
}
.benefit p {
  font-size: 15px;
  line-height: 2;
}
.benefit-number {
  font:
    italic 39px Georgia,
    serif;
  color: #ecd2a1;
}
.benefit-orbit {
  height: 300px;
  width: min(100%, 370px);
  position: relative;
  margin: 34px auto 10px;
  isolation: isolate;
}
.orbit-ring {
  position: absolute;
  border: 1px solid #bfa6755c;
  border-radius: 50%;
  inset: 35px;
  transform: rotate(var(--orbit, 0deg)) rotateX(55deg);
  box-shadow:
    inset 0 0 40px #d5b8810b,
    0 0 30px #d5b8810b;
}
.orbit-ring-two {
  inset: 23px;
  transform: rotate(calc(var(--orbit, 0deg) * -1)) rotateY(55deg);
  border-color: #d5b88188;
}
.orbit-axis {
  position: absolute;
  inset: 56px;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    #e4c88f calc(var(--journey, 0) * 360deg),
    #43566055 0
  );
  mask: radial-gradient(transparent 69%, #000 70%);
  transform: rotate(-5deg);
}
.orbit-word {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: "Shippori Mincho", serif;
  font-size: clamp(25px, 3vw, 35px);
  white-space: nowrap;
  color: #f2ddb4;
  transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px)));
  text-shadow: 0 0 40px #d5b88144;
}
.orbit-sales {
  --x: 0px;
  --y: -112px;
}
.orbit-time {
  --x: 118px;
  --y: 72px;
}
.orbit-income {
  --x: -118px;
  --y: 72px;
}
.orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font:
    italic 95px Georgia,
    serif;
  color: #f2ddb4;
}
.benefit-progress {
  display: flex;
  gap: 9px;
  align-items: center;
  color: #b7c8d1;
  font-size: 12px;
  letter-spacing: 0.15em;
  margin: 24px 0;
}
.benefit-progress span {
  font-size: 20px;
  color: #f2ddb4;
}
.benefit-progress i {
  display: block;
  height: 1px;
  flex: 1;
  background: linear-gradient(
    to right,
    #e8cc94 calc(var(--journey, 0) * 100%),
    #4c606b 0
  );
}
.benefit-scroll-note {
  font-size: 14px;
  color: #b7c8d1;
  line-height: 1.9;
  text-align: center;
}
.benefits-motion-enabled .benefit {
  transform: translate3d(var(--travel, 0px), var(--rise, 0px), 0)
    rotateY(var(--turn, 0deg)) scale(var(--scale, 1));
  will-change: transform;
}
.benefits-motion-enabled .benefit-orbit {
  will-change: transform;
}
@media (max-width: 900px) {
  .benefits-stage {
    gap: 32px;
  }
  .benefits-intro {
    top: 85px;
  }
  .benefits-intro h2 {
    font-size: 25px;
  }
  .benefit {
    padding: 34px 26px;
    min-height: 300px;
  }
  .benefit-orbit {
    height: 250px;
  }
  .case-network {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .benefits-stage {
    display: block;
  }
  .benefits-intro {
    position: static;
    padding-top: 0;
  }
  .benefits-intro h2 {
    font-size: 29px;
  }
  .benefit-grid {
    margin-top: 34px;
    gap: 24px;
  }
  .benefit {
    min-height: 260px;
    padding: 34px 27px;
  }
  .benefit h3 {
    font-size: 23px;
  }
  .benefit-orbit {
    width: 290px;
    height: 260px;
    margin: 26px auto 0;
  }
  .orbit-word {
    font-size: 27px;
  }
  .orbit-center {
    font-size: 76px;
  }
  .case-network {
    gap: 16px;
  }
  .case-network h3 {
    font-size: 22px;
  }
  .case-network p {
    font-size: 12px;
  }
  .case-story {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .case-story p {
    font-size: 15px;
  }
  .sharing-notice {
    padding: 24px 20px;
  }
  .sharing-notice strong {
    font-size: 16px;
  }
  .bundle-notice {
    padding: 26px 22px;
  }
  .tool-options {
    grid-template-columns: 1fr;
  }
  .benefit-scroll-note {
    margin-bottom: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .benefits-motion-enabled .benefit {
    transform: none;
    will-change: auto;
  }
  .orbit-ring {
    transform: none;
  }
  .tool-choice {
    transition: none;
  }
}

.benefits-subtitle {
  font-size: 20px;
  line-height: 1.9;
  color: #d5dce0;
  margin-top: 24px;
}
.benefits-subtitle span {
  display: inline-block;
}