/* "How it works" stage (see how.js). Link after the page stylesheet. Themes: set the --hs-* chip
   variables on .how (light defaults below; the house page sets the dark ones). No gradients, no masks. */
main { overflow-x: clip; }
:where(.how) {
  --hs-chip-bg: rgb(255 251 248 / 0.9);
  --hs-chip-ink: #2a1420;
  --hs-chip-muted: #735e6b;
  --hs-chip-line: rgb(42 20 32 / 0.09);
  --hs-chip-shadow: rgb(70 32 52 / 0.3);
  --hs-guide-bg: #fbe4ea;
  --hs-guide-cool: #ece4fb;
  --hs-track: rgb(42 20 32 / 0.12);
  --hs-on: #c2477f;
  --hs-blob-opacity: 0.42;
  --hs-ring-opacity: 0.55;
  --hs-serif: ui-serif, "Source Serif 4", "Source Serif 4 Display", Georgia, serif;
  --hs-sans: -apple-system, BlinkMacSystemFont, "Manrope", system-ui, sans-serif;
}
:where(.how-stage) { position: relative; }
.how-stage { container-type: inline-size; }
.how-stage > .phone { position: relative; z-index: 2; }

/* Back: aura blobs in phase colours and the two rings. */
.hs-back { position: absolute; inset: -16% -48%; z-index: 0; pointer-events: none; }
.hs-blob { position: absolute; display: block; aspect-ratio: 1; border-radius: 50%; filter: blur(58px); opacity: var(--hs-blob-opacity);
  transition: background-color 1.3s cubic-bezier(0.22, 1, 0.36, 1); }
.hs-blob-a { left: 18%; top: 14%; width: 44%; background: var(--hs-a); }
.hs-blob-b { right: 16%; top: 40%; width: 40%; background: var(--hs-b); }
.hs-blob-c { left: 30%; bottom: 6%; width: 36%; background: var(--hs-c); }
.hs-ring { position: absolute; display: block; left: 50%; top: 50%; width: 136cqw; aspect-ratio: 1; margin: -68cqw 0 0 -68cqw; border-radius: 50%;
  border: 1.5px solid; opacity: var(--hs-ring-opacity); transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1); }
.hs-ring-her { border-color: rgb(255 128 170 / 0.85); box-shadow: 0 0 26px rgb(255 128 170 / 0.55), inset 0 0 26px rgb(255 128 170 / 0.45); transform: translateX(var(--hs-her-x)); }
.hs-ring-him { border-color: rgb(140 150 255 / 0.85); box-shadow: 0 0 26px rgb(140 150 255 / 0.55), inset 0 0 26px rgb(140 150 255 / 0.45); transform: translateX(var(--hs-him-x)); }
.how-stage, .how-stage[data-tone="0"] { --hs-a: #f48ab2; --hs-b: #ffb878; --hs-c: #b894f6; --hs-her-x: -34cqw; --hs-him-x: 34cqw; }
.how-stage[data-tone="1"] { --hs-a: #b48cf2; --hs-b: #f48ab2; --hs-c: #8fbaf5; --hs-her-x: -15cqw; --hs-him-x: 15cqw; }
.how-stage[data-tone="2"] { --hs-a: #8fbaf5; --hs-b: #a9d68c; --hs-c: #b48cf2; --hs-her-x: -12cqw; --hs-him-x: 12cqw; }

/* Chips. */
.hs-chips { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hs-chip { position: absolute; opacity: 0; transform: translate3d(0, 4cqw, 0) scale(0.95);
  transition: opacity 280ms ease-out, transform 360ms cubic-bezier(0.22, 1, 0.36, 1); }
.hs-chips.is-shown .hs-chip { opacity: 1; transform: none; transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--hs-delay), transform 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--hs-delay); }
.hs-pos-0 { left: -36%; top: 9%; width: 70%; --hs-delay: 180ms; }
.hs-pos-1 { right: -34%; top: 42%; width: 60%; --hs-delay: 340ms; }
.hs-pos-2 { left: -30%; top: 72%; width: 64%; --hs-delay: 500ms; }
/* Keep her chart and the review header on the phone visible: step 1 and 2 cards sit lower. */
.hs-g0 .hs-pos-0 { top: 35%; }
.hs-g0 .hs-pos-1 { top: 55%; }
.hs-g0 .hs-pos-2 { top: 77%; }
.hs-g1 .hs-pos-0 { left: -34%; top: 36%; }
.hs-g1 .hs-pos-1 { top: 54%; }
.hs-g1 .hs-pos-2 { top: 72%; }
.hs-card { position: relative; margin: 0; padding: 4.4cqw 5cqw; border: 1px solid var(--hs-chip-line); border-radius: 6cqw; background: var(--hs-chip-bg);
  color: var(--hs-chip-ink); box-shadow: 0 7cqw 16cqw -7cqw var(--hs-chip-shadow), 0 1cqw 3cqw -1cqw var(--hs-chip-shadow);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font: 600 clamp(11px, 4.7cqw, 16px)/1.3 var(--hs-sans); }
.hs-card p { margin: 0; color: inherit; font: inherit; max-width: none; }
.hs-label { color: var(--hs-chip-muted) !important; font-size: 0.8em !important; letter-spacing: 0.02em; margin-bottom: 1.6cqw !important; }
html.motion .hs-chips.is-shown .hs-card { animation: hs-bob 6.5s ease-in-out infinite alternate; }
html.motion .hs-chips.is-shown .hs-pos-1 .hs-card { animation-duration: 7.4s; animation-delay: -2.2s; }
html.motion .hs-chips.is-shown .hs-pos-2 .hs-card { animation-duration: 5.8s; animation-delay: -4s; }
@keyframes hs-bob { from { transform: translate3d(0, -1.6cqw, 0); } to { transform: translate3d(0, 1.6cqw, 0); } }

/* Chart chip: phase hills flowing past today. */
.hs-chart svg { display: block; width: 100%; height: auto; overflow: hidden; border-radius: 2cqw; }
.hs-hill { fill-opacity: 0.7; }
.hs-hill-berry { fill: #e86f9e; }
.hs-hill-jade { fill: #a6cf76; }
.hs-hill-violet { fill: #a97bf0; }
.hs-hill-blue { fill: #7fb2f5; }
.hs-today { stroke: var(--hs-chip-ink); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.55; }
.hs-today-dot { fill: var(--hs-chip-bg); stroke: var(--hs-chip-ink); stroke-width: 1.4; }
html.motion .hs-flow { animation: hs-flow 16s linear infinite; }
@keyframes hs-flow { to { transform: translateX(-180px); } }
.hs-days { display: flex; justify-content: space-between; margin-top: 1.6cqw !important; font-size: 0.78em !important; color: var(--hs-chip-muted) !important; }
.hs-days b { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; margin: -0.3em; border-radius: 50%; border: 1.5px solid var(--hs-on); color: var(--hs-chip-ink); }

/* Cycle day chip: ring progress. */
.hs-day { display: flex; align-items: center; gap: 3.4cqw; }
.hs-progress { flex: none; width: 13cqw; height: 13cqw; transform: rotate(-90deg); }
.hs-track, .hs-arc { fill: none; stroke-width: 3.6; }
.hs-track { stroke: var(--hs-track); }
.hs-arc { stroke: var(--hs-on); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s; }
.is-shown .hs-arc { stroke-dashoffset: 57; }
.hs-day p b { display: block; font-family: var(--hs-serif); font-size: 1.12em; }
.hs-day p span { display: block; color: var(--hs-chip-muted); font-size: 0.8em; font-weight: 500; }

/* Invite chip: her app and his app joined by a travelling spark. */
.hs-pair { display: flex; align-items: center; gap: 2cqw; }
.hs-node { flex: none; display: inline-flex; align-items: center; gap: 1.4cqw; }
.hs-node::before { content: ""; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #f07aa6; box-shadow: 0 0 2.4cqw #f07aa6; }
.hs-node-him::before { background: #8f98ff; box-shadow: 0 0 2.4cqw #8f98ff; }
.hs-link { position: relative; flex: 1; height: 1.5px; background: var(--hs-track); }
.hs-spark { position: absolute; inset: 0; }
.hs-spark::after { content: ""; position: absolute; right: -0.9cqw; top: -0.9cqw; width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: #fff4f8; box-shadow: 0 0 2.6cqw 0.8cqw #f48ab2; }
html.motion .hs-spark { animation: hs-spark 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; }
@keyframes hs-spark { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.hs-note { margin-top: 1.8cqw !important; color: var(--hs-chip-muted) !important; font-size: 0.8em !important; font-weight: 500 !important; }

/* Share chip: toggles switch on one by one. */
.hs-row { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; padding-block: 1.3cqw; }
.hs-row-off span { color: var(--hs-chip-muted); }
.hs-toggle { flex: none; position: relative; width: 9.4cqw; height: 5.4cqw; border-radius: 3cqw; background: var(--hs-track); transition: background-color 500ms ease-out; }
.hs-toggle::after { content: ""; position: absolute; left: 0.6cqw; top: 0.6cqw; width: 4.2cqw; height: 4.2cqw; border-radius: 50%; background: #fff; box-shadow: 0 0.4cqw 1cqw rgb(0 0 0 / 0.25); transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1); }
.is-shown .hs-toggle-on { background: var(--hs-on); }
.is-shown .hs-toggle-on::after { transform: translateX(4cqw); }
.hs-t1, .hs-t1::after { transition-delay: 700ms; }
.hs-t2, .hs-t2::after { transition-delay: 1050ms; }

.hs-read { display: flex; align-items: center; gap: 3cqw; }
.hs-read svg { flex: none; width: 7.4cqw; height: 7.4cqw; fill: none; stroke: var(--hs-on); stroke-width: 1.8; }

/* Russian: «Отправить» is wide, so the button sits above the line instead of beside it. */
.hs-send { display: flex; flex-direction: column; align-items: flex-start; gap: 2.6cqw; }
.hs-send-button { position: relative; flex: none; padding: 1.8cqw 4.4cqw; border-radius: 4cqw; background: var(--hs-on); color: #fff; font-size: 0.92em; }
.hs-send-button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; border-radius: 50%; border: 1.5px solid var(--hs-on); opacity: 0; }
html.motion .is-shown .hs-send-button::after { animation: hs-tap 2.6s cubic-bezier(0.22, 1, 0.36, 1) 1.2s infinite; }
@keyframes hs-tap { 0% { opacity: 0.8; transform: scale(0.5); } 70%, 100% { opacity: 0; transform: scale(2.1); } }
.hs-send p { font-size: 0.86em !important; font-weight: 500 !important; color: var(--hs-chip-muted) !important; }

/* Guide chips: the real card titles from his guide. */
.hs-guide { background: var(--hs-guide-bg); }
.hs-guide-cool { background: var(--hs-guide-cool); }
.hs-guide-title { font-family: var(--hs-serif) !important; font-size: 1.08em !important; line-height: 1.2 !important; }
.hs-badge { display: flex; align-items: center; gap: 1.4cqw; margin-top: 1.6cqw !important; color: var(--hs-chip-muted) !important; font-size: 0.76em !important; font-weight: 500 !important; }
.hs-badge::before { content: ""; width: 2cqw; height: 2cqw; border-radius: 50%; background: #6fae7d; }

/* Step copy: a big quiet number and two short points. */
.how .how-num { margin: 0 0 -0.12em; font: 600 clamp(72px, 7.4vw, 116px)/1 var(--hs-serif); color: var(--hs-num, #c2477f); opacity: 0.22; letter-spacing: -0.02em; }
.how-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; max-width: 440px; }
.how-points li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.45; }
.how-points li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--hs-num, #c2477f); }

@media (max-width: 700px) {
  .hs-pos-0 { left: -24%; width: 66%; }
  .hs-pos-1 { right: -22%; width: 60%; }
  .hs-pos-2 { left: -20%; width: 62%; }
  .hs-back { inset: -10% -30%; }
  .hs-blob { filter: blur(40px); }
  .how .how-num { font-size: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-chip, .hs-chips.is-shown .hs-chip, .hs-ring, .hs-blob, .hs-arc, .hs-toggle, .hs-toggle::after { transition: none !important; }
  .hs-card, .hs-flow, .hs-spark, .hs-send-button::after { animation: none !important; }
}
html.motion .hs-blob { animation: hs-breathe 7s ease-in-out infinite alternate; }
html.motion .hs-blob-b { animation-duration: 8.6s; animation-delay: -3s; }
html.motion .hs-blob-c { animation-duration: 6.2s; animation-delay: -5s; }
@keyframes hs-breathe { from { transform: scale(0.9) translate3d(-3%, 2%, 0); } to { transform: scale(1.1) translate3d(3%, -2%, 0); } }