/* Why students choose FastIQ — three step cards (Figma 111:279) */
.why__inner{
  display: flex; flex-direction: column; align-items: center;
  gap: var(--head-gap);
  padding: var(--section-y) var(--gx);
}
.why__title{ text-align: center; }
.why__title .t-h2--regular{ font-weight: 400; }

.why__steps{
  display: flex; justify-content: center; gap: var(--space-5);
  width: 100%; max-width: calc(384px * 3 + var(--space-5) * 2);   /* never wider than the space between the gutter lines */
  margin: 0; padding: 0; list-style: none;
}
.step{ display: flex; flex-direction: column; gap: var(--space-5); flex: 1 1 0; width: auto; max-width: 384px; min-width: 0; }

.step__media{
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 384 / 252;           /* the card scales with the device width */
  border-radius: var(--radius-card);
  box-shadow: 0 2px 20px rgba(0,0,0,.03), 0 2px 6px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.1);
}
/* The artwork is authored at 384 x 252 "units". --u is 1/384 of the card width (container query units),
   so every size below is calc(var(--u) * N) and the whole illustration fills the card at any width — no JS needed. */
.step__media{ container-type: inline-size; }
.stage{
  --u: calc(100cqw / 384);
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}

.step__text{ display: flex; align-items: center; gap: var(--space-4); }
.step__text > div{ display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.step__title{ margin: 0; font: 500 16px/24px var(--font-ui); letter-spacing: -0.015em; color: #171717; }
.step__desc{ margin: 0; font: 400 14px/20px var(--font-ui); letter-spacing: -0.006em; color: #5c5c5c; }
.step__num{
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 96px;
  background: #fff; border: 1px solid rgba(0,0,0,.1);
  font: 500 16px/24px var(--font-ui); letter-spacing: -0.011em; color: #5c5c5c;
}
.step__num--active{ color: var(--color-primary); }

/* 1 · upload — diamond pattern backdrop */
.step__media--upload{ border: 1px solid #f7f7f7; border-radius: 16px; background: #0934a3; }
.step__media--upload .stage{
  display: flex; align-items: center; padding: 0 calc(var(--u) * 32);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 0 72 36 36 72 0 36Z' fill='%23235cfb'/%3E%3C/svg%3E");
  background-size: calc(var(--u) * 72) calc(var(--u) * 72); background-position: center;
}
.upload{
  width: 100%; display: flex; flex-direction: column; gap: calc(var(--u) * 16);
  padding: calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 14);
  background: #fff; border: calc(var(--u) * 1) solid #ebebeb; border-radius: calc(var(--u) * 12);
}
.upload__row{ display: flex; gap: calc(var(--u) * 12); align-items: flex-start; }
.upload__text{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 4); }
.upload__name{ margin: 0; font: 500 calc(var(--u) * 14)/calc(var(--u) * 20) var(--font-ui); letter-spacing: -0.006em; color: #171717; }
.upload__meta{ margin: 0; display: flex; align-items: center; gap: calc(var(--u) * 4); font: 400 calc(var(--u) * 12)/calc(var(--u) * 16) var(--font-ui); color: #5c5c5c; white-space: nowrap; }
.upload__status{ display: inline-flex; gap: calc(var(--u) * 4); color: #171717; }
.upload__status img{ animation: why-spin 1s linear infinite; }
@keyframes why-spin{ to { transform: rotate(360deg); } }
.upload__close{ display: grid; place-items: center; padding: calc(var(--u) * 2); border-radius: calc(var(--u) * 6); }
.upload__bar{ height: calc(var(--u) * 6); border-radius: calc(var(--u) * 999); background: #f7f7f7; overflow: hidden; }
.upload__bar i{ display: block; height: 100%; width: 10%; border-radius: calc(var(--u) * 999); background: #335cff; animation: why-upload 4s ease-in-out infinite; }
@keyframes why-upload{ 0% { width: 10%; } 70%, 100% { width: 92%; } }

.fileicon{ position: relative; flex: none; width: calc(var(--u) * 40); height: calc(var(--u) * 40); overflow: hidden; }
.fileicon > img{ position: absolute; max-width: none; }
.fileicon__body{ left: 10%; right: 10%; top: 0; width: 80%; height: 100%; }
.fileicon__fold{ left: 57.5%; top: 2.5%; width: 35.6%; height: 35.6%; }
.fileicon__tag{
  position: absolute; left: 0; bottom: calc(var(--u) * 6);
  padding: calc(var(--u) * 2) calc(var(--u) * 3); border-radius: calc(var(--u) * 4); background: #fb3748; color: #fff;
  font: 600 calc(var(--u) * 11)/calc(var(--u) * 12) var(--font-ui); letter-spacing: .02em; text-transform: uppercase;
}

/* 2 · chat — dark backdrop with a glowing wave */
.step__media--chat{ background: #000; border-radius: var(--radius-card); }
.wave{ position: absolute; inset: 0; width: 100%; height: 100%; }
.wave__line{ fill: none; stroke: #235cfb; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wave__glow{ fill: none; stroke: #235cfb; stroke-width: 16; opacity: .9; }
.wave__move{ animation: wave-slide 9s linear infinite; }
@keyframes wave-slide{ to { transform: translateX(115.2px); } }
.step__media--chat .stage{ padding: calc(var(--u) * 20) calc(var(--u) * 22); }
.mock{                                         /* slightly enlarged so the tiny UI text stays legible */
  position: relative; width: calc(var(--u) * 304); height: calc(var(--u) * 190); border-radius: calc(var(--u) * 7.6); background: rgba(249,239,228,.25);
  transform: scale(1.118); transform-origin: 0 0;
}
.mock__window{
  position: absolute; inset: calc(var(--u) * 2); overflow: hidden;
  background: #fdfdfd; border: calc(var(--u) * .38) solid #ecedef;
  border-radius: calc(var(--u) * 6.08); box-shadow: 0 0 calc(var(--u) * 6.08) rgba(0,0,0,.04);
  font-family: var(--font-ui); color: #171717;
}
.mock img{ display: block; max-width: none; }
.mock__head{ display: flex; align-items: center; gap: calc(var(--u) * 4.56); padding: calc(var(--u) * 6.46) calc(var(--u) * 7.6); }
.mock__arrows{ display: flex; gap: calc(var(--u) * 1.52); }
.mock__arrow{ position: relative; display: block; width: calc(var(--u) * 4.94); height: calc(var(--u) * 5.7); }
.mock__arrow img{ position: absolute; left: 27.08%; top: 15.7%; width: 45.84%; height: 68.6%; max-width: none; }
.mock__crumb{ font: 500 calc(var(--u) * 5.7)/calc(var(--u) * 8.55) var(--font-ui); letter-spacing: -.02em; color: #a3a3a3; white-space: nowrap; }
.mock__crumb b{ font-weight: 500; color: #555; }
.mock__chev{ width: calc(var(--u) * 7.6); height: calc(var(--u) * 7.6); }
.mock__more{ margin-left: auto; display: grid; place-items: center; padding: calc(var(--u) * 1.52); border-radius: calc(var(--u) * 8); }
.mock__more img{ width: calc(var(--u) * 7.6); height: calc(var(--u) * 7.6); }
.mock__file{
  position: absolute; left: calc(var(--u) * 159.5); top: calc(var(--u) * 30);
  display: flex; align-items: center; gap: calc(var(--u) * 4.56); padding: calc(var(--u) * 3.8) calc(var(--u) * 6.08) calc(var(--u) * 3.8) calc(var(--u) * 4.56);
  background: #ebebeb; border: calc(var(--u) * .38) solid #ebebeb; border-radius: calc(var(--u) * 6.08);
}
.mock__file-icon{ display: grid; place-items: center; padding: calc(var(--u) * 3.04); border-radius: calc(var(--u) * 36); background: #f7f7f7; }
.mock__file-icon img{ width: calc(var(--u) * 7.6); height: calc(var(--u) * 7.6); }
.mock__file-text{ display: flex; flex-direction: column; gap: calc(var(--u) * 1.52); }
.mock__file-name{ display: flex; align-items: center; gap: calc(var(--u) * 4.56); font: 500 calc(var(--u) * 5.32)/calc(var(--u) * 7.6) var(--font-ui); white-space: nowrap; }
.mock__file-name i{ display: grid; place-items: center; width: calc(var(--u) * 6.08); height: calc(var(--u) * 6.08); border-radius: 50%; background: #262626; }
.mock__file-name i img{ width: calc(var(--u) * 5.32); height: calc(var(--u) * 5.32); }
.mock__file-type{ font: 500 calc(var(--u) * 4.56)/calc(var(--u) * 6.08) var(--font-ui); color: #5c5c5c; }
.mock__answer{ position: absolute; left: calc(var(--u) * 23); top: calc(var(--u) * 62); width: calc(var(--u) * 233); font: 400 calc(var(--u) * 6)/calc(var(--u) * 9.12) var(--font-ui); letter-spacing: -.01em; }
.mock__answer p{ margin: 0 0 calc(var(--u) * 9.12); }
.mock__answer b{ font-weight: 700; }
.mock__answer strong{ font-weight: 600; }
.mock__glow{ position: absolute; left: 6%; top: calc(var(--u) * 126); width: 88%; height: auto; opacity: .7; pointer-events: none; }
.mock__prompt{
  position: absolute; left: 50%; bottom: calc(var(--u) * 14); transform: translateX(-50%); width: calc(var(--u) * 254.6);
  padding: calc(var(--u) * 1.14); background: #f7f7f7; border: calc(var(--u) * .38) solid #235cfb; border-radius: calc(var(--u) * 7.6);
}
.mock__prompt-in{
  display: flex; flex-direction: column; gap: calc(var(--u) * 7.6);
  padding: calc(var(--u) * 5.32) calc(var(--u) * 4.56) calc(var(--u) * 4.56); background: #fff; border: calc(var(--u) * .38) solid #235cfb; border-radius: calc(var(--u) * 7.22);
  box-shadow: 0 calc(var(--u) * 3.8) calc(var(--u) * 6.84) calc(var(--u) * -1.9) rgba(35,92,251,.2), 0 calc(var(--u) * 2.28) calc(var(--u) * 9.88) calc(var(--u) * -.76) rgba(35,92,251,.15);
}
.mock__prompt-in p{ margin: 0; padding: calc(var(--u) * 3.8) calc(var(--u) * 1.52); font: 400 calc(var(--u) * 5.7)/calc(var(--u) * 9.12) var(--font-ui); letter-spacing: -.006em; color: #a3a3a3; }
.mock__actions{ display: flex; justify-content: space-between; }
.mock__actions span{ display: grid; place-items: center; padding: calc(var(--u) * 1.52); border-radius: calc(var(--u) * 9); background: #f7f7f7; }
.mock__actions img{ width: calc(var(--u) * 7.6); height: calc(var(--u) * 7.6); }

/* 3 · calendar — soft multi-colour gradient backdrop */
.step__media--calendar{
  background:
    radial-gradient(60% 55% at 4% 6%,   #f3e0a0 0%, rgba(243,224,160,0) 100%),
    radial-gradient(55% 60% at 96% 4%,  #8fc4ff 0%, rgba(143,196,255,0) 100%),
    radial-gradient(70% 70% at 70% 45%, #235cfb 0%, rgba(35,92,251,0) 100%),
    radial-gradient(65% 60% at 0% 100%, #4fc8b0 0%, rgba(79,200,176,0) 100%),
    radial-gradient(60% 55% at 100% 100%, #bae173 0%, rgba(186,225,115,0) 100%),
    #2f66f0;
  background-size: 130% 130%, 130% 130%, 130% 130%, 130% 130%, 130% 130%, auto;
  background-repeat: no-repeat;
  animation: why-drift 16s ease-in-out infinite alternate;
}
.step__media--calendar .stage{ padding: calc(var(--u) * 60) calc(var(--u) * 40) 0; }
@keyframes why-drift{ to { background-position: 100% 90%, 0% 20%, 20% 70%, 80% 0%, 10% 10%, 0 0; } }
.cal__pill{
  position: absolute; top: calc(var(--u) * 42); left: 0; right: 0; margin-inline: auto; width: max-content; z-index: 1;
  display: inline-flex; align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 8);
  background: var(--color-primary); border: calc(var(--u) * 1) solid #fff; border-radius: calc(var(--u) * 10);
  font: 500 calc(var(--u) * 14)/calc(var(--u) * 20) var(--font-ui); letter-spacing: -.006em; color: #fff; white-space: nowrap;
}
.cal{ position: relative; height: calc(var(--u) * 342); border-radius: calc(var(--u) * 9); background: #fff; }
.cal__month{ position: absolute; left: calc(var(--u) * 26); top: calc(var(--u) * 28); margin: 0; font: 700 calc(var(--u) * 16)/calc(var(--u) * 24) var(--font-ui); letter-spacing: .024em; color: #000; }
.cal__week, .cal__days{
  position: absolute; left: calc(var(--u) * 26.3); display: grid;
  grid-template-columns: repeat(7, calc(var(--u) * 35.914)); text-align: center;
}
.cal__week{ top: calc(var(--u) * 79); font: 400 calc(var(--u) * 12)/calc(var(--u) * 16) var(--font-ui); color: rgba(60,60,67,.6); }
.cal__days{ top: calc(var(--u) * 97.29); grid-auto-rows: calc(var(--u) * 38.286); }
.cal__days > *{ display: grid; place-items: center; font: 400 calc(var(--u) * 16)/calc(var(--u) * 21) var(--font-ui); letter-spacing: -.02em; color: #000; }
.cal__days .is-out{ color: #808080; }
.cal__day{
  position: relative; isolation: isolate; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; border-radius: calc(var(--u) * 100);
  transition: background-color .2s ease;
}
.cal__day::before{                              /* selected "pill" – grows in with an ease-out, no bounce */
  content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 38); height: calc(var(--u) * 38); margin: calc(var(--u) * -19) 0 0 calc(var(--u) * -19);
  border-radius: calc(var(--u) * 100); border: calc(var(--u) * 1) solid rgba(0,0,0,.12);
  background: linear-gradient(180deg, #ecf1fd, #b4c8ff);
  z-index: -1; opacity: 0; transform: scale(.6); transition: opacity .25s ease, transform .35s cubic-bezier(.19, 1, .22, 1);
}
.cal__day:hover:not(.is-exam){ background: rgba(35, 92, 251, .07); }
.cal__day.is-exam::before{ opacity: 1; transform: scale(1); }
.cal__day:focus-visible{ outline: calc(var(--u) * 2) solid var(--color-primary); outline-offset: calc(var(--u) * -4); }
.cal__pill{ transition: transform .45s cubic-bezier(.19, 1, .22, 1), box-shadow .45s ease; }
.cal__pill.is-set{ box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) calc(var(--u) * -6) rgba(35, 92, 251, .6); }
.cal__pill.is-pulse{ animation: pill-pulse 1.4s cubic-bezier(.19, 1, .22, 1); }
@keyframes pill-pulse{ 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }

@media (max-width: 1023px){
  .why__steps { flex-direction: column; align-items: center; width: 100%; max-width: none; }
  .step { flex: none; width: min(720px, 100%); max-width: none; }
}
@media (prefers-reduced-motion: reduce){
  .upload__status img, .upload__bar i, .wave__move, .step__media--calendar, .cal__pill { animation: none; }
}

/* mock chat: streamed answer (js/steps.js) */
.mock__file, .mock__answer p{ transition: opacity .5s cubic-bezier(.19, 1, .22, 1), transform .5s cubic-bezier(.19, 1, .22, 1); }
.mock.is-reset .mock__file{ opacity: 0; transform: translateX(calc(var(--u) * 10)); }
.mock .w{ transition: opacity .35s ease-out; }
.mock.is-reset .w{ opacity: 0; }
.step__media--chat:focus-visible{ outline: 2px solid var(--color-primary); outline-offset: 3px; }