.case-hero { padding-top: 52px; padding-bottom: 92px; }
.case-back { display: inline-block; border-bottom: 1px solid var(--ink); font-size: 13px; font-weight: 900; padding-bottom: 5px; margin-bottom: 76px; }
.case-back:hover { color: var(--accent-text); border-color: var(--accent-text); }
.case-hero .section-index { display: block; padding: 0; }
.case-hero h1 { font-size: clamp(76px, 10vw, 156px); font-weight: 900; line-height: .95; letter-spacing: -.09em; margin: 18px 0 25px; }
.case-period { color: var(--accent-text); }
.case-hero > p { max-width: 900px; font-size: clamp(21px, 2.2vw, 29px); line-height: 1.4; color: var(--muted); }
.case-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 32px; }
.case-actions > span { font-size: 13px; font-weight: 800; color: var(--muted); }
.case-visual { padding: 95px 25px; background: #ffcb86; color: #172118; }
.case-visual-inner { max-width: 1100px; margin: auto; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 30px); transform: rotate(-2deg); }
.case-visual-inner span { background: #fffdf6; border: 2px solid #172118; box-shadow: 6px 7px 0 #172118; border-radius: 12px; padding: 20px 25px; font-size: clamp(17px, 2vw, 27px); font-weight: 900; letter-spacing: -.03em; }
.case-visual-inner span:nth-of-type(2) { background: #d8f275; }
.case-visual-inner span:nth-of-type(3) { background: #bfd7f0; }
.case-visual-inner b { font-size: 28px; }
.case-content { padding-top: 120px; padding-bottom: 120px; }
.case-content section + section { border-top: 1px solid var(--line); margin-top: 100px; padding-top: 100px; }
.case-intro, .case-result { display: grid; grid-template-columns: 240px 1fr; gap: 55px; }
.case-content .section-index { padding-top: 10px; }
.case-content h2 { font-size: clamp(46px, 5vw, 76px); font-weight: 900; line-height: 1.02; letter-spacing: -.07em; max-width: 850px; margin-bottom: 22px; }
.case-content p { max-width: 850px; font-size: 20px; line-height: 1.6; color: var(--muted); }
.case-flow > .section-index, .case-decisions > .section-index { display: block; padding: 0; margin-bottom: 22px; }
.case-flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; }
.case-flow-grid > div { border: 1px solid var(--line); border-radius: 18px; background: var(--card); padding: 29px; }
.case-flow-grid strong { color: var(--accent-text); font-size: 12px; letter-spacing: .1em; }
.case-flow-grid h3 { font-size: 31px; letter-spacing: -.06em; margin: 24px 0 9px; }
.case-flow-grid p { font-size: 17px; margin-bottom: 0; }
.case-demo-heading { display: flex; justify-content: space-between; align-items: start; gap: 30px; }
.case-demo-heading .section-index { display: block; padding: 0; margin-bottom: 22px; }
.case-demo-heading p { margin-bottom: 0; }
.demo-sample { border: 1px solid var(--line); border-radius: 999px; padding: 9px 13px; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; white-space: nowrap; }
.demo-shell { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr); gap: 24px; margin-top: 36px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); padding: clamp(20px, 3vw, 38px); }
.demo-controls { display: flex; flex-direction: column; align-items: stretch; padding: 4px 0; }
.demo-controls label { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 900; margin: 0 0 10px; }
.demo-controls label output { color: var(--accent-text); }
.demo-controls select { width: 100%; padding: 14px 40px 14px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 800; margin-bottom: 38px; }
.demo-controls input[type=range] { width: 100%; margin: 10px 0 0; cursor: pointer; accent-color: #577f32; }
.demo-ticks { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 900; margin-top: 9px; }
.demo-output { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 16px; }
.demo-price, .demo-history, .demo-message { border: 1px solid var(--line); border-radius: 16px; padding: 22px; min-width: 0; }
.demo-price { display: flex; flex-direction: column; justify-content: center; background: var(--paper); }
.demo-price > span, .demo-message > span { font-size: 11px; font-weight: 900; letter-spacing: .08em; color: var(--muted); }
.demo-price strong { display: block; margin: 12px 0 4px; font-size: clamp(38px, 4vw, 61px); line-height: 1; letter-spacing: -.07em; white-space: nowrap; }
.demo-price small { color: var(--accent-text); font-size: 12px; font-weight: 800; line-height: 1.4; }
.demo-history { display: flex; flex-direction: column; justify-content: space-between; min-height: 190px; }
.demo-history-label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.demo-history-label span { color: var(--muted); }
.demo-bars { display: flex; align-items: end; gap: 10px; height: 100px; padding-top: 15px; }
.demo-bars span { display: block; flex: 1; min-width: 0; border-radius: 7px 7px 2px 2px; background: #8da35b; transition: height .25s ease, opacity .25s ease, background .25s ease; }
.demo-bars span.is-active { background: #d85d47; }
.demo-bars span.is-future { opacity: .25; }
.demo-message { grid-column: 1 / -1; background: #172b20; color: #f5f6ed; }
.demo-message > span { color: #d8f275; }
.case-content .demo-message p { margin: 12px 0 0; color: #f5f6ed; font-size: 18px; line-height: 1.4; }
.demo-controls :is(select, input):focus-visible { outline: 3px solid #d85d47; outline-offset: 3px; }
.case-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 7%; }
.case-columns p { margin: 0; }
.case-end { display: flex; flex-wrap: wrap; gap: 27px; margin-top: 35px; }
.case-end a { display: inline-block; font-size: 14px; font-weight: 900; border-bottom: 1px solid var(--ink); padding-bottom: 5px; }
.case-end a:hover { color: var(--accent-text); border-color: var(--accent-text); }
.case-contact { background: #172b20; color: #f5f6ed; padding: 78px 0; }
.case-contact .wrap { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.case-contact h2 { font-size: clamp(37px, 4vw, 58px); line-height: 1.04; letter-spacing: -.07em; margin: 0; max-width: 760px; }
.case-contact .button-dark { background: #d8f275; border-color: #d8f275; color: #172118; white-space: nowrap; }
@media(max-width: 900px) {
  .case-visual-inner { flex-wrap: wrap; }
  .case-intro, .case-result { grid-template-columns: 180px 1fr; gap: 28px; }
  .demo-shell { grid-template-columns: 1fr; }
}
@media(max-width: 760px) {
  .case-hero { padding-top: 38px; padding-bottom: 75px; }
  .case-back { margin-bottom: 65px; }
  .case-hero h1 { font-size: clamp(63px, 13vw, 100px); }
  .case-visual { padding: 65px 20px; }
  .case-content { padding-top: 80px; padding-bottom: 80px; }
  .case-content section + section { margin-top: 70px; padding-top: 70px; }
  .case-intro, .case-result { display: block; }
  .case-flow-grid { grid-template-columns: 1fr; gap: 12px; }
  .case-columns { grid-template-columns: 1fr; gap: 20px; }
  .case-contact .wrap { flex-direction: column; align-items: flex-start; }
  .case-demo-heading { flex-direction: column; gap: 16px; }
}
@media(max-width: 540px) {
  .case-hero h1 { font-size: clamp(54px, 14vw, 76px); }
  .case-hero > p { font-size: 20px; }
  .case-visual-inner { display: grid; justify-items: center; transform: none; }
  .case-visual-inner b { transform: rotate(90deg); line-height: 1; }
  .case-visual-inner span { min-width: 175px; text-align: center; }
  .case-content h2 { font-size: 46px; }
  .case-content p { font-size: 18px; }
  .demo-output { grid-template-columns: 1fr; }
  .demo-message { grid-column: auto; }
}