/*
 * Landing «/» sections below the hero (docs/redesign/SCREENS.md §5.4–5.8): scenarios
 * «Важен не повод.», «Хорошо, когда всё просто.», «Встречайте людей. Не настройки.» with the room
 * preview card, «Тарифы», the final invitation band, and the lead dialog. The header, the hero
 * and the glass card live in pages.css. Decorative cards (scenario scenes, the room preview) stay
 * light in the dark theme (SCREENS §2.5): their colours are fixed here on purpose.
 */

/* =========================================================================
   Shared section pieces
   ========================================================================= */

.landing-section {
  scroll-margin-top: 24px;
}

.landing-section:focus {
  outline: none;
}

.section-lead {
  color: var(--text-muted);
  font-size: var(--fs-14);
  line-height: 1.65;
}

@media (max-width: 760px) {
  .section-lead {
    font-size: var(--fs-13);
  }
}

/* =========================================================================
   Scenarios «Важен не повод. Важен разговор.» (§5.4)
   ========================================================================= */

.scenarios {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: stretch;
  gap: 68px;
  padding-top: 86px;
}

.scenarios__intro {
  min-width: 0;
  padding-top: 9px;
}

.scenarios__intro .h-1 {
  margin-block: 18px;
}

.scenarios__tabs {
  margin-top: 35px;
}

/* Number tabs keep their size when pressed (the marker is measured). */
.scenarios__tabs .num-tabs__tab:active {
  scale: 1;
}

.scenario-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 455px;
  padding: 32px 36px;
  overflow: hidden;
  border-radius: var(--r-25);
  background-color: #DFEAFF;
  color: #203B66;
  outline-offset: 5px;
}

@media (prefers-reduced-motion: no-preference) {
  .scenario-panel {
    transition: background-color 150ms ease, color 150ms ease;
  }
}

.scenario-panel[data-scene="close"] {
  background-color: #E2EDFC;
}

.scenario-panel[data-scene="ideas"] {
  background-color: #E8E9FF;
  color: #33386E;
}

.scenario-panel__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.scenario-panel__sphere {
  position: absolute;
  top: -90px;
  right: -125px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffffa6, #a1bdf94d 65%, #799fe72b);
  box-shadow: inset 0 0 60px #ffffff50;
}

.scenario-panel__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #728fc459;
  stroke-width: 0.9;
}

.scenario-panel__star {
  position: absolute;
  right: 31px;
  bottom: 90px;
  width: 105px;
  height: 105px;
  color: #94b1e04d;
}

.scenario-page {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.scenario-page--ghost {
  position: absolute;
  margin: 0;
  pointer-events: none;
}

.scenario-page__story {
  padding-block: 48px 45px;
}

.scenario-page__title {
  max-width: 16ch;
  font-size: clamp(38.4px, 3.7vw, 53.6px);
  font-weight: var(--fw-book);
  line-height: 1.1;
  letter-spacing: -0.045em;
  text-wrap: initial;
}

.scenario-page__text {
  max-width: 35ch;
  margin-top: 23px;
  color: #415C84;
  font-size: var(--fs-14);
  line-height: 1.65;
}

.scenario-page__detail {
  display: flex;
  align-items: center;
  gap: 17px;
  color: #415C84;
  font-size: var(--fs-11);
  line-height: 1.5;
}

.scenario-wave {
  display: flex;
  flex: none;
  align-items: center;
  gap: 3px;
  height: 26px;
}

.scenario-wave__bar {
  display: block;
  width: 2px;
  height: 5px;
  border-radius: 3px;
  background: #638BC5;
}

/* =========================================================================
   «Хорошо, когда всё просто.» (§5.5)
   ========================================================================= */

.simple {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: 68px;
  padding-top: 85px;
}

.simple__intro {
  min-width: 0;
}

.simple__intro .h-1 {
  margin-block: 18px;
}

.simple__link {
  --btn-icon: 17px;
  margin-top: 19px;
}

.simple__list {
  min-width: 0;
}

.simple-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 24px;
  align-items: start;
  gap: 16px;
  padding-block: 22px;
  border-bottom: 1px solid var(--border);
}

.simple-row:first-child {
  padding-top: 0;
}

.simple-row:last-child {
  border-bottom: 0;
}

.simple-row__num {
  padding-top: 5px;
  color: var(--text-muted);
  font-size: var(--fs-10);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.simple-row__title {
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}

.simple-row__text {
  max-width: 44ch;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: var(--fs-13);
  line-height: 1.65;
}

.simple-row__icon {
  display: inline-flex;
  color: var(--text-muted);
}

.simple-row__icon .icon,
.simple-row__icon:empty {
  width: 20px;
  height: 20px;
}

/* =========================================================================
   «Встречайте людей. Не настройки.» + the room preview card (§5.6)
   ========================================================================= */

.studio {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 68px;
  padding-block: 85px 0;
}

.studio__copy {
  min-width: 0;
}

.studio__title {
  margin-block: 22px;
  font-size: var(--fs-44);
  font-weight: var(--fw-book);
  line-height: 1.15;
  letter-spacing: var(--tracking-section);
}

.studio__text {
  max-width: 38ch;
  color: var(--text-muted);
  font-size: var(--fs-15);
  line-height: 1.75;
}

.studio__cta {
  --btn-h: 46px;
  margin-top: 27px;
}

.studio__scene {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 355px;
  overflow: hidden;
}

.studio__orbit {
  position: absolute;
  inset: 12px 4px;
  z-index: -1;
  border: 1px solid #a7c1e33b;
  border-radius: 50%;
  transform: rotate(-15deg);
  pointer-events: none;
}

/* The preview card: an illustration surface, light in both themes. */
.studio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 365px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid #ffffff80;
  border-radius: var(--r-24);
  background: linear-gradient(140deg, #E1EDFF, #EDF3FC 55%, #DCE7F8);
  box-shadow: inset 0 1px 0 #ffffff80;
  color: #29456C;
}

.studio-card::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -180px;
  width: 330px;
  height: 330px;
  border: 1px solid #ffffffaa;
  border-radius: 50%;
  pointer-events: none;
}

.studio-card__top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-11);
  line-height: 1.5;
}

.studio-card__top .icon {
  width: 22px;
  height: 22px;
}

.studio-card__line {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 19px;
}

.studio-card__hello {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
}

.studio-card__hint {
  color: #4E678A;
  font-size: var(--fs-11);
  text-align: end;
}

.studio-card__view {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 190px;
  margin-block: 16px 17px;
  overflow: hidden;
  border: 1px solid #ffffff8c;
  border-radius: 17px;
  background: radial-gradient(ellipse at 35% 30%, #E4F0FF, #C9DCF5);
}

.studio-card__view::after {
  content: '';
  position: absolute;
  top: -125px;
  right: -100px;
  width: 230px;
  height: 230px;
  border: 1px solid #ffffff4d;
  border-radius: 50%;
  pointer-events: none;
}

.studio-card__status {
  position: absolute;
  top: 12px;
  left: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #3E5B82;
  font-size: var(--fs-11);
}

.studio-card__status::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #547FB5;
}

.studio-card__avatar {
  position: relative;
  box-shadow: 0 0 0 9px #ffffff2b, 0 0 0 10px #ffffff38;
}

.studio-card__foot {
  position: absolute;
  right: 13px;
  bottom: 12px;
  left: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #35557E;
  font-size: var(--fs-11);
}

.studio-card__name {
  min-width: 0;
  max-width: 80%;
  overflow-wrap: anywhere;
}

.studio-card__mic {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-7);
  background: #f4f8ff94;
  color: #35557E;
}

.studio-card__mic .icon {
  width: 13px;
  height: 13px;
}

.studio-card__mic::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 1px;
  background: currentColor;
  rotate: 45deg;
}

.studio-card__bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
}

.studio-card__chips {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.studio-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 33px;
  padding: 7px 10px;
  border: 1px solid #ffffff7a;
  border-radius: var(--r-10);
  background: #f7faffb3;
  color: #3E5B82;
  font-size: var(--fs-11);
  line-height: 1.2;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), scale var(--dur-fast) ease-out;
}

.studio-chip .icon {
  width: 15px;
  height: 15px;
}

.studio-chip:hover {
  background: #FFFFFF;
  color: #315BD8;
}

.studio-chip:not(:disabled):active {
  scale: 0.96;
}

/* The chips sit on a light card in both themes: a focus ring that reads on it. */
.studio-chip:focus-visible {
  outline-color: #254BC1;
  outline-offset: 3px;
}

.studio-card__caption {
  flex: 0 1 auto;
  color: #4E678A;
  font-size: var(--fs-11);
  text-align: end;
  white-space: nowrap;
}

/* =========================================================================
   «Тарифы» (§5.7)
   ========================================================================= */

.pricing {
  padding-top: 85px;
}

.pricing__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 640px;
}

.pricing__head .h-1 {
  margin-top: 18px;
}

.pricing__head .section-lead {
  margin-top: 18px;
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 35px;
}

.pricing .plan-card {
  scroll-margin-top: 24px;
}

.pricing .plan-card:focus {
  outline: none;
}

.pricing .plan-card .price {
  margin-top: 0;
}

.pricing .plan-card .check-list {
  margin-bottom: 6px;
}

/* Only the featured card has the corner chip: the others use the full width for the title. */
.pricing .plan-card:not(.plan-card--featured) .plan-card__head {
  padding-right: 0;
}

.plan-card__cta {
  --btn-h: 46px;
}

.pricing__note {
  margin-top: 20px;
  color: var(--text-muted);
  font-size: var(--fs-12);
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;
}

/* =========================================================================
   Final invitation «На кого у вас сегодня есть время?» (§5.8)
   ========================================================================= */

.invitation {
  padding-block: 85px 32px;
}

.invitation .invite-band {
  margin-top: 0;
}

/* =========================================================================
   Lead dialog («Связаться с нами»)
   ========================================================================= */

.lead-form {
  display: grid;
  gap: 16px;
}

.lead-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.lead-form .input {
  --input-h: 48px;
}

.field__optional {
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}

@media (max-width: 560px) {
  .lead-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================================
   Breakpoints
   ========================================================================= */

@media (max-width: 1050px) {
  .scenarios {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 40px;
    padding-top: 65px;
  }

  .scenario-panel {
    min-height: 440px;
    padding: 29px;
  }

  .scenario-page__title {
    font-size: 41.6px;
  }

  .simple {
    gap: 40px;
    padding-top: 65px;
  }

  .studio {
    gap: 38px;
    padding-top: 65px;
  }

  .studio__title {
    font-size: 39.2px;
  }

  .studio-card {
    padding-inline: 20px;
  }

  .studio-card__bottom {
    flex-wrap: wrap;
  }

  .studio-card__caption {
    white-space: normal;
  }

  .pricing {
    padding-top: 65px;
  }

  .pricing__grid {
    gap: 18px;
  }

  .invitation {
    padding-top: 65px;
  }
}

@media (max-width: 760px) {
  .scenarios {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
    padding-top: 53px;
  }

  .scenarios__tabs {
    margin-top: 26px;
  }

  .scenario-panel {
    min-height: 390px;
    padding: 27px;
    border-radius: 23px;
  }

  .scenario-panel__sphere {
    top: -60px;
    right: -140px;
    width: 290px;
    height: 290px;
  }

  .scenario-panel__star {
    bottom: 95px;
    width: 85px;
    height: 85px;
  }

  .scenario-page__story {
    padding-block: 39px;
  }

  .scenario-page__title {
    font-size: clamp(35.2px, 7.3vw, 48px);
  }

  .scenario-page__text {
    margin-top: 20px;
    font-size: var(--fs-13);
  }

  .scenario-page__detail {
    gap: 12px;
  }

  .simple {
    grid-template-columns: minmax(0, 1fr);
    gap: 29px;
    padding-top: 53px;
  }

  .studio {
    grid-template-columns: minmax(0, 1fr);
    gap: 29px;
    padding-top: 53px;
  }

  .studio__title {
    margin-block: 18px;
    font-size: 35.2px;
  }

  .studio__text {
    max-width: 42ch;
    font-size: var(--fs-14);
  }

  .studio__cta {
    margin-top: 22px;
  }

  .studio__scene {
    min-height: 320px;
  }

  .studio-card {
    min-height: 300px;
    padding: 19px 20px;
    border-radius: 22px;
  }

  .studio-card__line {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 16px;
  }

  .studio-card__hint {
    text-align: start;
  }

  .studio-card__view {
    min-height: 180px;
    margin-block: 14px;
  }

  .studio-card__bottom {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .studio-card__caption {
    white-space: nowrap;
  }

  .pricing {
    padding-top: 53px;
  }

  .pricing__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .invitation {
    padding-block: 53px 15px;
  }
}

@media (max-width: 400px) {
  .studio-card__bottom {
    gap: 9px;
  }

  .studio-card__chips {
    gap: 5px;
  }

  .studio-chip {
    width: 28px;
    min-width: 28px;
    height: 30px;
    min-height: 30px;
    padding: 5px;
  }

  .studio-chip__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .studio-chip .icon {
    width: 14px;
    height: 14px;
  }

  .studio-card__caption {
    letter-spacing: -0.01em;
  }
}

@media (max-width: 360px) {
  .scenario-panel {
    min-height: 380px;
    padding: 23px;
  }

  .scenario-page__title {
    font-size: 32.8px;
  }

  .scenario-page__detail {
    gap: 10px;
  }

  .scenario-wave {
    gap: 2px;
  }

  .studio__title {
    font-size: 32px;
  }

  .studio-card {
    padding-inline: 16px;
  }

  .studio-card__view {
    min-height: 175px;
  }

  .studio-card__caption {
    white-space: normal;
  }
}

/* Coarse pointers: the small chips get a 44 px hit area without changing their size, and
   «Попробовать Созвон» (36 high) a 44 px one (DESIGN_SYSTEM §12.3). */
@media (pointer: coarse) {
  .studio-chip {
    position: relative;
  }

  .studio-chip::after {
    content: '';
    position: absolute;
    inset: -7px -2px;
  }

  .simple__link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: max(100%, 44px);
    transform: translateY(-50%);
  }
}

/* ≤ 400 the chips are icons only (28×30): 18 px apart, each target reaches 8 px past either side
   (the inset counts from inside the 1 px border) and 7 px up and down, so the three 44×44
   targets keep 2 px apart. */
@media (pointer: coarse) and (max-width: 400px) {
  .studio-card__chips {
    gap: 18px;
  }

  .studio-chip::after {
    inset: -8px -9px;
  }
}

@media (forced-colors: active) {
  .scenario-panel,
  .studio-card {
    border: 1px solid CanvasText;
  }

  .scenario-panel__art,
  .studio__orbit,
  .studio-card::before,
  .studio-card__view::after {
    display: none;
  }

  .scenario-wave__bar {
    background: CanvasText;
  }
}