/* «Окно» — the title spread: who and with what, why trust, the price and the booking on the left page,
   the arch window with Irina on the right, the greeting as the left running head.
   The stage question («Что сейчас про тебя?») lives on the practices page as a bookmark under its title. */
.okno { padding-top: var(--header-h); }
.okno__book { min-height: min(calc(100svh - var(--header-h)), 1000px); padding-bottom: clamp(36px, 4vw, 64px); }
.okno__copy { display: grid; gap: 22px; align-content: center; }
.okno__who { display: grid; gap: 12px; }
.okno__topics { display: grid; gap: 4px; max-width: 34em; }
.okno__topics li { position: relative; padding-left: 22px; font-size: clamp(17px, .3vw + 15px, 19px); line-height: 1.4; color: var(--ink); }
.okno__topics li::before { content: ''; position: absolute; left: 2px; top: .58em; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--terracotta); background: color-mix(in srgb, var(--terracotta) 22%, transparent); }
.okno__topics abbr { text-decoration: none; }
/* Wide screens: the points run in lines (three at most), so the facts and the button stay on the first screen. */
@media (min-width: 861px) { .okno__topics { display: flex; flex-wrap: wrap; gap: 4px 24px; } .okno__topics li { white-space: nowrap; font-size: 17px; } }
.okno__greeting { font-family: var(--serif); font-style: italic; color: var(--ink-soft); }
.okno__greeting .icon { width: 18px; height: 18px; }
.okno__title { font-size: clamp(52px, 6.4vw, 104px); line-height: .95; letter-spacing: -.035em; }
.okno__title em { display: block; padding-left: .5em; }
.okno__lead { max-width: 30em; }
.okno__actions .btn--large { padding-inline: 24px 22px; }
.okno__actions { align-items: center; column-gap: 14px; }
/* One filled button on the page: the second step («Сначала попробовать практики») is a quiet link at every width. */
.okno__actions .btn--ghost { --btn-bd: transparent; min-height: 48px; padding-inline: 4px; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .32em; }
.okno__actions .btn--ghost:hover { --btn-bg: transparent; text-decoration-color: currentColor; color: var(--terracotta-ink); }
.okno__book { --page-pad: clamp(24px, 3vw, 52px); }
.okno__night-note, .okno__welcome { display: flex; gap: 10px; align-items: flex-start; max-width: 32em; font-family: var(--serif); font-style: italic; font-size: clamp(19px, .6vw + 15px, 22px); line-height: 1.4; color: var(--ink-soft); }
.okno__night-note .icon { width: 20px; height: 20px; margin-top: 4px; color: var(--terracotta-ink); }

/* The arch window on the right page */
.okno__window { display: grid; justify-items: center; align-content: center; margin: 0; }
.okno__frame { position: relative; width: min(100%, 440px, max(280px, calc((100svh - var(--header-h) - 230px) / 1.32))); translate: 0 calc(var(--sy, 0) * -.06px); }
.okno__frame::before {
  content: ''; position: absolute; inset: -14px; border-radius: 999px 999px 18px 18px;
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); pointer-events: none;
}
.arch-window {
  position: relative; aspect-ratio: 5 / 6.6; border-radius: var(--arch); overflow: hidden;
  background: var(--paper-3); box-shadow: var(--shadow-md); isolation: isolate;
}
.arch-window__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; filter: var(--photo-filter); transition: opacity 1.2s var(--ease-out), transform 1.6s var(--ease-settle); }
.arch-window:hover .arch-window__img { transform: scale(1.035); }
.arch-window__img--evening { object-position: 50% 35%; opacity: 0; }
.arch-window.is-evening .arch-window__img--evening.is-ready { opacity: 1; }
/* The mullion: a thin cross, like a real window frame over the photo. */
.arch-window__mullion {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(16% - .5px), rgba(255, 255, 255, .42) calc(16% - .5px) calc(16% + .5px), transparent calc(16% + .5px)),
    linear-gradient(180deg, transparent calc(9% - .5px), rgba(255, 255, 255, .42) calc(9% - .5px) calc(9% + .5px), transparent calc(9% + .5px));
  mix-blend-mode: soft-light;
}
html[data-part='evening'] .arch-window::after, html[data-theme='night'] .arch-window::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(200deg, rgba(231, 167, 127, .26), transparent 60%);
  mix-blend-mode: soft-light;
}

/* The badge on the right shoulder of the arch (it does not spin) */
.orbit-badge {
  position: absolute; z-index: 2; top: 8%; right: -50px; width: 132px; height: 132px;
  display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--shadow-sm);
  border: 1px solid var(--line); translate: 0 calc(var(--sy, 0) * -.1px);
}
html.motion-reduced .okno__frame, html.motion-reduced .orbit-badge { translate: none; }
@media (prefers-reduced-motion: reduce) { html:not(.motion-allowed) .okno__frame, html:not(.motion-allowed) .orbit-badge { translate: none; } }
.orbit-badge__ring { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); overflow: visible; }
.orbit-badge__ring text { font-family: var(--sans); font-size: 8.4px; font-weight: 500; letter-spacing: .06em; fill: var(--ink-soft); }
.orbit-badge__flower { width: 44px; height: 44px; color: var(--terracotta); stroke-width: 1.2; }

/* The bookmark under the title spread: «Что сейчас про тебя?» in one quiet band. */
.stage-pick { position: relative; border-block: 1px solid var(--line); background: color-mix(in srgb, var(--sage-50) 70%, transparent); }
.stage-pick__inner {
  width: min(1440px, 100% - 2 * var(--gutter)); margin-inline: auto; padding-block: clamp(22px, 2.6vw, 36px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(2 * var(--page-pad, 64px)); align-items: center; row-gap: 14px;
}
.stage-pick__q { font-size: clamp(30px, 2vw + 16px, 46px); line-height: 1.05; }
.stage-pick__body { display: grid; gap: 12px; }
.stage-pick__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stage-pick__chips .chip { min-height: 48px; padding-inline: 16px 18px; }
.stage-pick__chips .chip--quiet { background: transparent; }
.stage-pick__hint { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; font-size: var(--text-small); color: var(--muted); }
.stage-pick__hint .link { min-height: 36px; font-weight: 400; color: var(--ink-soft); }
.stage-pick__hint .link[aria-pressed='true'] { color: var(--green); font-weight: 600; text-decoration-color: currentColor; }
.stage-pick__reply:empty { display: none; }
.stage-reply { display: grid; gap: 6px; }
.stage-reply__text { font-family: var(--serif); font-style: italic; font-size: clamp(20px, .7vw + 15px, 24px); line-height: 1.4; color: var(--ink); max-width: 30em; }
.stage-reply__next { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.stage-reply__dot { color: var(--faint); }
html[data-theme='night'] .stage-pick { background: color-mix(in srgb, var(--paper-2) 80%, transparent); }

@media (max-width: 1300px) { .orbit-badge { right: -30px; } }
@media (max-width: 1100px) {
  .orbit-badge { right: -22px; width: 116px; height: 116px; }
  .stage-pick__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  /* Phone: the greeting, the title, the window, then the offer. */
  .okno__book { min-height: 0; padding-bottom: 36px; }
  .okno__book .spread__run--l { display: flex; order: 1; margin-bottom: 18px; border-bottom: 0; padding-bottom: 0; }
  .okno__book .spread__run--r { display: none; }
  .okno__copy { display: contents; }
  .okno__title { order: 2; margin-bottom: 8px; }
  .okno__window { order: 3; margin-block: 24px 22px; }
  .okno__frame { width: min(100% - 28px, 420px, max(240px, 40svh)); translate: none; }
  .okno__who { order: 4; }
  .okno__actions { order: 5; margin-top: 18px; }
  .okno__terms { order: 6; margin-top: 14px; }
  .okno__proof { order: 7; margin-top: 20px; }
  .arch-window { aspect-ratio: 4 / 5; }
  .orbit-badge { right: -10px; top: 6%; width: 100px; height: 100px; translate: none; }
  .orbit-badge__flower { width: 32px; height: 32px; }
}
@media (max-width: 560px) {
  .okno__title { font-size: clamp(46px, 14vw, 72px); }
  .okno__title em { padding-left: .3em; }
  .stage-pick__chips .chip { flex: 1 1 calc(50% - 8px); justify-content: flex-start; padding-inline: 12px; min-height: 54px; line-height: 1.25; text-align: left; }
  .stage-pick__chips .chip--quiet { flex-basis: 100%; }
}

/* Threshold sheet before the loss pages */
.sheet--threshold { --sheet-bg: #f3efe6; }
html[data-theme='night'] .sheet--threshold { --sheet-bg: var(--paper-2); }
.threshold__candle { width: 32px; height: 32px; color: var(--terracotta-ink); margin-bottom: 14px; }
.threshold__text { font-size: clamp(18px, .4vw + 16px, 20px); line-height: 1.65; color: var(--ink-soft); max-width: 34em; margin-bottom: 26px; }
.threshold__actions { display: grid; gap: 10px; margin-bottom: 18px; }
.threshold__actions .btn { justify-content: flex-start; }
@media (min-width: 640px) { .threshold__actions { grid-template-columns: repeat(3, 1fr); } .threshold__actions .btn { justify-content: center; } }

/* «Что сейчас про тебя» in «Как мне удобнее» */
.stage-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stage-option {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); text-align: left; font-size: var(--text-small); line-height: 1.3;
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out), color .25s var(--ease-out), transform .3s var(--ease-settle);
}
.stage-option:active { transform: scale(var(--press)); }
@media (max-width: 380px) { .stage-list { grid-template-columns: minmax(0, 1fr); } }
.stage-option .icon { width: 22px; height: 22px; color: var(--sage-500); }
.stage-option:hover { border-color: var(--sage-500); }
.stage-option[aria-pressed='true'] { background: var(--green); color: var(--on-green); border-color: var(--green); }
.stage-option[aria-pressed='true'] .icon { color: currentColor; }

/* Phones: who and with what, the booking, the price and why trust — all before the photo, on the first screen. */
@media (max-width: 560px) {
  .okno__book .spread__run--l { margin-bottom: 12px; }
  .okno__title { margin-bottom: 4px; }
  .okno__who { order: 3; }
  .okno__actions { order: 4; margin-top: 16px; }
  .okno__terms { order: 5; margin-top: 10px; }
  .okno__proof { order: 6; margin-top: 16px; }
  .okno__window { order: 7; margin-block: 32px 8px; }
}