@charset "utf-8";

.icon-sprite { position: absolute; width: 0px; height: 0px; overflow: hidden; }

.icon { width: 30px; height: 30px; fill: none; stroke: currentcolor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.section { padding: 72px 0px; }

h2 { font-size: clamp(27px, 3.1vw, 41px); }

.case { grid-template-columns: 1.05fr 1fr 1fr; gap: 40px; align-items: center; }

.case-heading h3 { font-size: 22px; margin-top: 10px; }

.case-stat { display: flex; gap: 15px; align-items: start; }

.case-stat > .icon { color: var(--pink); margin-top: 5px; }

.case-stat strong { display: block; font: 36px / 1.15 Unbounded, sans-serif; letter-spacing: -0.045em; }

.case-stat small { font: 18px Eesti, sans-serif; letter-spacing: 0px; }

.case-stat p { font-size: 18px; color: var(--gray); margin-top: 8px; }

.bar-comparison { margin-top: 14px; display: grid; gap: 6px; width: 180px; }

.bar-before { height: 7px; border-radius: 8px; background: rgb(215, 215, 223); width: 100%; transform-origin: left center; }

.bar-after { height: 7px; border-radius: 8px; background: var(--pink); width: 44%; transform-origin: left center; }

.time-dots { display: flex; gap: 5px; margin-top: 17px; flex-wrap: wrap; }

.time-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); }

.section-lead { font-size: 21px; color: var(--gray); margin-top: 20px; max-width: 520px; }

.process-outcome { display: flex; align-items: center; gap: 12px; font-size: 18px; color: var(--gray); padding-top: 12px; }

.process-outcome .icon { color: var(--pink); }

.process-map { display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); margin-top: 44px; position: relative; gap: 20px; }

.process-map::before { content: ""; position: absolute; top: 36px; left: 8%; right: 8%; height: 1px; background: rgb(218, 218, 222); }

.process-step { position: relative; background: none; border: 0px; padding: 0px 0px 12px; color: var(--ink); text-align: left; display: flex; flex-direction: column; align-items: start; gap: 12px; min-width: 0px; }

.process-step > .icon { background: white; border: 1px solid var(--line); width: 72px; height: 72px; border-radius: 22px; padding: 21px; color: var(--gray); }

.process-step.selected > .icon { background: var(--pink); border-color: var(--pink); color: white; }

.process-step strong { font-size: 22px; font-weight: 500; }

.process-step span { font-size: 18px; color: var(--gray); max-width: 165px; }

.process-step.selected strong { color: var(--pink); }

.process-detail { display: flex; align-items: center; gap: 20px; border-top: 1px solid var(--line); padding: 22px 0px; margin-top: 15px; min-height: 97px; }

.process-detail-number { font: 24px Unbounded, sans-serif; color: var(--pink); }

.process-detail p { font-size: 20px; max-width: 720px; }

.process-hint { font-size: 18px; color: var(--gray); margin-left: auto; white-space: nowrap; }

.gift-strip { display: flex; align-items: center; gap: 24px; margin-top: 20px; padding: 23px 28px; border-radius: 18px; }

.gift-symbol { color: var(--pink); }

.gift-symbol .icon { width: 46px; height: 46px; }

.gift-strip .gift-label { display: block; font-size: 18px; margin: 0px 0px 7px; }

.gift-strip h3 { font: 22px Eesti, sans-serif; letter-spacing: 0px; max-width: none; }

.gift-strip .btn { margin-left: auto; }

.topics { background: rgb(250, 250, 250); }

.topics-grid { grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 32px; margin-top: 37px; }

.topic { display: flex; flex-direction: column; gap: 14px; padding: 0px; border: 0px; }

.topic-icon { width: 54px; height: 54px; background: var(--rose); border-radius: 16px; display: grid; place-items: center; color: var(--pink); }

.topic h3 { font-size: 24px; }

.topic p { font-size: 18px; color: var(--gray); line-height: 1.45; }

.agenda { margin-top: 30px; }

.agenda li { font-size: 22px; padding: 0px; align-items: stretch; gap: 20px; }

.agenda li::before { padding-top: 24px; }

.agenda details { min-width: 0px; }

.agenda summary { list-style: none; display: flex; align-items: center; gap: 19px; padding: 22px 0px; cursor: pointer; min-height: 82px; color: var(--ink); }

summary::-webkit-details-marker { display: none; }

.agenda summary > .icon { color: var(--pink); width: 25px; height: 25px; }

.expand-mark { margin-left: auto; font-size: 26px; line-height: 1; color: var(--gray); width: 28px; text-align: center; }

.agenda details[open] .expand-mark { transform: rotate(45deg); color: var(--pink); }

.agenda-detail { padding: 0px 50px 24px 44px; font-size: 18px; color: var(--gray); max-width: 850px; }

.agenda li.is-active summary { color: var(--pink); }

.speakers .wrap { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 30px 60px; }

.speakers h2 { grid-column: 1 / -1; }

.speaker { grid-template-columns: 1fr; gap: 22px; align-items: start; padding: 12px 0px 0px; border: 0px; }

.portrait { width: 170px; height: 170px; }

.speaker h3 { font-size: 25px; }

.role { font-size: 18px; min-height: 54px; margin-bottom: 12px; }

.expert-highlight { font-size: 18px; color: var(--gray); }

.expert-highlight b { color: var(--ink); font-size: 22px; font-weight: 500; }

.speaker-details { margin-top: 15px; }

.speaker-details summary { list-style: none; cursor: pointer; color: var(--pink); font-size: 18px; display: flex; gap: 14px; align-items: center; }

.speaker-details ul { font-size: 18px; margin-top: 15px; }

.speaker-details[open] summary span { transform: rotate(45deg); }

.takeaways { display: flex; flex-direction: column; gap: 18px; margin: 28px 0px; }

.takeaways > div { display: flex; gap: 15px; align-items: center; font-size: 21px; }

.takeaways .icon { width: 27px; height: 27px; }

.materials h2 { font-size: 37px; }

.about-grid h2 { font-size: 32px; }

.about p { font-size: 20px; }

@media (max-width: 1000px) {
  .case { gap: 20px; }
  .case-stat { gap: 9px; }
  .case-stat strong { font-size: 28px; }
  .case-stat small { font-size: 18px; }
  .topics-grid { gap: 22px; }
  .topic h3 { font-size: 21px; }
  .process-map { gap: 15px; }
  .process-step strong { font-size: 20px; }
  .process-step span { font-size: 18px; }
}

@media (max-width: 760px) {
  .section { padding: 48px 0px; }
  .case { grid-template-columns: 1fr 1fr; gap: 25px 15px; }
  .case-heading { grid-column: 1 / -1; }
  .case-heading h3 br { display: none; }
  .case-stat { flex-direction: column; gap: 8px; }
  .case-stat strong { font-size: 25px; }
  .case-stat small { display: block; font-size: 18px; margin-top: 5px; }
  .case-stat p { font-size: 18px; }
  .bar-comparison { width: 100%; min-width: 115px; }
  .time-dots { gap: 4px; }
  .time-dots i { width: 7px; height: 7px; }
  .section-lead { font-size: 18px; }
  .process-outcome { font-size: 18px; padding-top: 0px; }
  .process-map { grid-template-columns: 1fr; gap: 8px; margin-top: 27px; }
  .process-map::before { inset: 30px auto 30px 27px; width: 1px; height: auto; }
  .process-step { display: grid; grid-template-columns: 56px 1fr; gap: 0px 17px; padding: 7px 0px; align-items: center; }
  .process-step > .icon { grid-row: 1 / 3; width: 56px; height: 56px; padding: 15px; border-radius: 17px; }
  .process-step strong { font-size: 21px; }
  .process-step span { max-width: none; font-size: 18px; }
  .process-detail { gap: 14px; align-items: start; min-height: 110px; }
  .process-detail p { font-size: 18px; }
  .process-detail-number { font-size: 20px; }
  .process-hint { display: none; }
  .gift-strip { gap: 15px; padding: 22px; flex-wrap: wrap; }
  .gift-strip h3 { font-size: 21px; }
  .gift-strip .btn { width: 100%; margin-left: 0px; }
  .gift-symbol .icon { width: 34px; height: 34px; }
  .topics-grid { grid-template-columns: 1fr 1fr; gap: 30px 22px; }
  .topic { gap: 12px; }
  .topic h3 { font-size: 20px; }
  .topic p { font-size: 18px; }
  .topic-icon { width: 46px; height: 46px; border-radius: 14px; }
  .topic-icon .icon { width: 26px; height: 26px; }
  .agenda li { gap: 8px; grid-template-columns: 27px 1fr; }
  .agenda li::before { font-size: 18px; padding-top: 23px; }
  .agenda summary { font-size: 19px; gap: 10px; min-height: 77px; }
  .agenda summary > .icon { width: 22px; height: 22px; }
  .expand-mark { font-size: 22px; flex: 0 0 auto; width: 20px; }
  .agenda-detail { padding: 0px 10px 20px 0px; font-size: 18px; }
  .speakers .wrap { grid-template-columns: 1fr; gap: 35px; }
  .speaker { gap: 20px; }
  .portrait { width: 150px; height: 150px; }
  .role { min-height: 0px; }
  .takeaways > div { font-size: 19px; }
  .materials h2 { font-size: 29px; }
  .about-grid h2 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .process-step, .expand-mark { transition: none; }
}