/*
 * Посадочная club.obrazm.ru (редизайн 2026-09).
 *
 * Источник — утверждённый руководством макет; из его сборки взята только авторская
 * часть таблицы стилей, Tailwind-обвязка выброшена (разметка её не использует).
 * Правки к макету собраны в конце файла блоком «Дополнения», чтобы оригинал
 * оставался сверяемым с макетом построчно.
 *
 * Анимации появления (.reveal, image-pan) построены на scroll-driven
 * animation-timeline: view(). Там, где браузер её не знает (Firefox), длительность
 * анимации равна нулю и при animation-fill-mode: both элемент сразу принимает
 * конечное состояние — раздел виден, просто без выезда.
 */

:root {
  --ink:#080808;
  --cream:#eee9df;
  --orange:#ef6d30;
  --red:#8e0718;
  --acid:#f3ff56;
  --line-dark:#fff3;
  --line-light:#08080833
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  background:var(--ink)
}
body {
  background:var(--ink);
  color:#fff;
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  overflow-x:hidden
}
a {
  color:inherit;
  text-decoration:none
}
img {
  max-width:100%;
  display:block
}
section,footer,div {
  min-width:0
}
::selection {
  background:var(--acid);
  color:var(--ink)
}
.site-shell {
  overflow:clip
}
.section-tag {
  letter-spacing:.14em;
  text-transform:uppercase;
  font:10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace
}
.reveal {
  animation:linear both reveal-up;
  animation-timeline:view();
  animation-range:entry 5% cover 34%
}
@keyframes reveal-up {
  0% {
    opacity:.12;
    transform:translateY(80px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
.site-header {
  z-index:20;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  height:92px;
  padding:0 clamp(18px,2.4vw,42px);
  display:grid;
  position:absolute;
  inset:0 0 auto
}
.brand img {
  object-fit:contain;
  object-position:left center;
  filter:brightness(0)invert();
  width:152px;
  height:54px
}
.desktop-nav {
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffffffc7;
  gap:34px;
  font:11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  display:flex
}
.desktop-nav a {
  transition:opacity .25s
}
.desktop-nav a:hover {
  opacity:.45
}
.dot-menu {
  justify-self:end;
  position:relative
}
.dot-menu summary {
  cursor:pointer;
  grid-template-rows:repeat(2,5px);
  grid-template-columns:repeat(2,5px);
  place-content:center;
  gap:7px;
  width:36px;
  height:36px;
  list-style:none;
  display:grid
}
.dot-menu summary::-webkit-details-marker {
  display:none
}
.dot-menu summary span {
  background:#fff;
  border-radius:50%;
  width:5px;
  height:5px;
  transition:transform .25s,background .25s
}
.dot-menu[open] summary span {
  background:var(--acid);
  transform:scale(1.35)
}
.dot-menu>div {
  background:#090909;
  border:1px solid #ffffff40;
  gap:19px;
  width:270px;
  padding:25px;
  display:grid;
  position:absolute;
  top:46px;
  right:0;
  box-shadow:0 20px 80px #00000073
}
.dot-menu>div a {
  letter-spacing:.08em;
  text-transform:uppercase;
  justify-content:space-between;
  align-items:center;
  font:11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  display:flex
}
.hero {
  isolation:isolate;
  background:radial-gradient(circle at 50% 38%,#bc1730 0,#92091b 35%,#710611 72%,#580309 100%);
  height:100svh;
  min-height:760px;
  position:relative;
  overflow:hidden
}
.hero:before {
  content:"";
  z-index:-1;
  opacity:.22;
  background-image:linear-gradient(#ffffff0d 1px,#0000 1px),linear-gradient(90deg,#ffffff0d 1px,#0000 1px);
  background-size:5vw 5vw;
  position:absolute;
  inset:0;
  -webkit-mask-image:linear-gradient(#000,#0000 82%);
  mask-image:linear-gradient(#000,#0000 82%)
}
.hero-word {
  z-index:0;
  letter-spacing:-.11em;
  color:#0000;
  -webkit-text-stroke:1px #ffffff24;
  white-space:nowrap;
  font-size:clamp(140px,22vw,410px);
  font-weight:900;
  line-height:.72;
  position:absolute;
  top:46%;
  left:50%;
  transform:translate(-50%,-50%)
}
.hero-rings {
  z-index:0;
  pointer-events:none;
  place-items:center;
  display:grid;
  position:absolute;
  inset:0
}
.hero-rings i {
  aspect-ratio:1;
  border:1px solid #ffffff1f;
  border-radius:50%;
  width:min(62vw,920px);
  animation:5s ease-in-out infinite ring-pulse;
  position:absolute
}
.hero-rings i:nth-child(2) {
  width:min(45vw,680px);
  animation-delay:-.8s
}
.hero-rings i:nth-child(3) {
  width:min(29vw,440px);
  animation-delay:-1.6s
}
@keyframes ring-pulse {
  50% {
    opacity:.38;
    transform:scale(1.035)
  }
}
.hero-media {
  z-index:1;
  clip-path:polygon(13% 0,87% 0,100% 14%,100% 100%,0 100%,0 14%);
  width:min(42vw,650px);
  height:78%;
  position:absolute;
  top:50%;
  left:50%;
  overflow:hidden;
  transform:translate(-50%,-43%)
}
.hero-media:after {
  content:"";
  mix-blend-mode:multiply;
  background:linear-gradient(#9b051c1f,#19000580);
  position:absolute;
  inset:0
}
.hero-media img {
  object-fit:cover;
  object-position:58% 52%;
  filter:grayscale()contrast(1.22)brightness(.78);
  mix-blend-mode:multiply;
  width:100%;
  height:100%;
  animation:8s ease-in-out infinite hero-breathe;
  transform:scale(1.04)
}
@keyframes hero-breathe {
  50% {
    transform:scale(1.085)
  }
}
.hero-shade {
  z-index:2;
  pointer-events:none;
  background:linear-gradient(#00000008 40%,#000000b8 100%);
  position:absolute;
  inset:0
}
.hero-kicker {
  z-index:4;
  letter-spacing:.12em;
  text-transform:uppercase;
  justify-content:space-between;
  font:10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  display:flex;
  position:absolute;
  top:108px;
  left:clamp(18px,2.4vw,42px);
  right:clamp(18px,2.4vw,42px)
}
.hero-title {
  z-index:4;
  position:absolute;
  top:50%;
  left:clamp(18px,2.4vw,42px);
  transform:translateY(-35%)
}
.hero-title>p {
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 28px;
  font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace
}
.hero-title h1 {
  letter-spacing:-.075em;
  text-transform:uppercase;
  margin:0;
  font-size:clamp(68px,9vw,166px);
  font-weight:900;
  line-height:.76
}
.hero-title>a {
  letter-spacing:.08em;
  text-transform:uppercase;
  border-bottom:1px solid;
  align-items:center;
  gap:14px;
  margin-top:34px;
  padding-bottom:8px;
  font:11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  display:inline-flex
}
.hero-facts {
  z-index:4;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,3vw,58px);
  width:min(44vw,660px);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  display:grid;
  position:absolute;
  bottom:34px;
  right:clamp(18px,2.4vw,42px)
}
.hero-facts span {
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:16px;
  font-size:10px;
  display:block
}
.hero-facts p {
  color:#ffffffd1;
  text-transform:uppercase;
  margin:0;
  font-size:10px;
  line-height:1.45
}
.scroll-cue {
  z-index:4;
  border:1px solid #ffffff59;
  border-radius:50%;
  place-items:center;
  width:38px;
  height:38px;
  animation:1.8s ease-in-out infinite cue;
  display:grid;
  position:absolute;
  bottom:30px;
  left:50%;
  transform:translate(-50%)
}
@keyframes cue {
  50% {
    transform:translate(-50%,7px)
  }
}
.intro-section {
  background:var(--cream);
  color:var(--ink);
  padding:clamp(100px,11vw,180px) clamp(24px,4vw,70px) clamp(130px,14vw,230px)
}
.intro-grid {
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);
  align-items:end;
  gap:8vw;
  margin:78px 0 130px;
  display:grid
}
.intro-grid h2,.inside-heading h2,.community-copy h2,.results-heading h2,.rhythm-copy h2,.trust-intro h2 {
  letter-spacing:-.075em;
  margin:0;
  font-size:clamp(58px,8.3vw,148px);
  line-height:.86
}
.intro-grid h2 span {
  color:var(--red)
}
.intro-copy {
  max-width:520px
}
.intro-copy .lead {
  letter-spacing:-.025em;
  margin:0 0 30px;
  font-size:clamp(20px,1.8vw,29px);
  line-height:1.32
}
.intro-copy>p:not(.lead) {
  color:#5b5750;
  margin:0;
  font-size:16px;
  line-height:1.65
}
.intro-copy>a {
  letter-spacing:.1em;
  text-transform:uppercase;
  border-bottom:1px solid;
  align-items:center;
  gap:12px;
  margin-top:35px;
  padding-bottom:8px;
  font:10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  display:inline-flex
}
.intro-gallery {
  min-height:min(68vw,1000px);
  position:relative
}
.intro-gallery figure {
  background:#bbb;
  margin:0;
  position:absolute;
  overflow:hidden
}
.intro-gallery img {
  object-fit:cover;
  filter:grayscale()contrast(1.05);
  width:100%;
  height:100%;
  transition:filter .5s,transform .7s
}
.intro-gallery figure:hover img {
  filter:grayscale(0)contrast();
  transform:scale(1.025)
}
.gallery-main {
  width:54%;
  height:82%;
  top:0;
  left:7%
}
.gallery-side {
  width:34%;
  height:55%;
  bottom:0;
  right:4%
}
.gallery-note {
  z-index:2;
  background:var(--acid);
  width:31%;
  padding:28px;
  position:absolute;
  bottom:2%;
  left:0
}
.gallery-note span {
  text-transform:uppercase;
  letter-spacing:.1em;
  font:10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace
}
.gallery-note p {
  letter-spacing:-.03em;
  margin:32px 0 0;
  font-size:clamp(18px,1.6vw,26px);
  line-height:1.15
}
.marquee {
  background:var(--orange);
  color:var(--ink);
  border-block:1px solid #00000080;
  overflow:hidden
}
.marquee div {
  letter-spacing:-.06em;
  white-space:nowrap;
  width:max-content;
  padding:23px 0 19px;
  font-size:clamp(48px,7vw,112px);
  font-weight:900;
  line-height:.8;
  animation:24s linear infinite marquee
}
@keyframes marquee {
  to {
    transform:translate(-50%)
  }
}
.inside-section {
  background:var(--ink);
  padding:clamp(110px,11vw,180px) clamp(24px,4vw,70px)
}
.inside-heading {
  grid-template-columns:.35fr 1.65fr;
  gap:5vw;
  margin:85px 0 120px;
  display:grid
}
.inside-heading>p {
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#ffffff7a;
  margin:8px 0 0;
  font:10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace
}
.inside-heading h2 {
  max-width:1200px
}
.inside-heading h2 em {
  color:var(--orange);
  font-style:normal
}
.feature-list {
  border-top:1px solid var(--line-dark)
}
.feature-row {
  border-bottom:1px solid var(--line-dark);
  grid-template-columns:90px minmax(260px,.85fr) minmax(320px,1fr) 48px;
  align-items:center;
  gap:32px;
  min-height:148px;
  transition:color .3s,background .3s,padding .3s;
  display:grid
}
.feature-row:hover {
  background:var(--acid);
  color:var(--ink);
  padding-inline:18px
}
.feature-row>span {
  color:var(--orange);
  letter-spacing:.1em;
  font:10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace
}
.feature-row:hover>span {
  color:var(--red)
}
.feature-row h3 {
  letter-spacing:-.045em;
  margin:0;
  font-size:clamp(28px,2.8vw,48px);
  font-weight:500;
  line-height:1
}
.feature-row p {
  color:#ffffff8c;
  max-width:620px;
  margin:0;
  font-size:15px;
  line-height:1.55
}
.feature-row:hover p {
  color:#000000a8
}
.feature-row i {
  border:1px solid;
  border-radius:50%;
  place-items:center;
  width:42px;
  height:42px;
  transition:transform .3s;
  display:grid
}
.feature-row:hover i {
  transform:rotate(45deg)
}
.community-section {
  background:#111;
  align-items:flex-end;
  min-height:1000px;
  padding:clamp(90px,9vw,150px) clamp(24px,4vw,70px);
  display:flex;
  position:relative;
  overflow:hidden
}
.community-section>img,.community-overlay {
  object-fit:cover;
  width:100%;
  height:100%;
  position:absolute;
  inset:0
}
.community-section>img {
  filter:grayscale()contrast(1.08);
  animation:linear both image-pan;
  animation-timeline:view();
  animation-range:entry exit 0%;
  transform:scale(1.05)
}
@keyframes image-pan {
  0% {
    transform:scale(1.08)translateY(-3%)
  }
  to {
    transform:scale(1.08)translateY(3%)
  }
}
.community-overlay {
  background:linear-gradient(#0000001a 22%,#000000e6 94%),linear-gradient(90deg,#5a000e4d,#0000 70%)
}
.community-word {
  color:#0000;
  -webkit-text-stroke:1px #ffffff4d;
  letter-spacing:-.09em;
  font-size:19vw;
  font-weight:900;
  line-height:1;
  position:absolute;
  top:10%;
  left:-2%
}
.community-copy {
  z-index:2;
  max-width:950px;
  position:relative
}
.community-copy h2 {
  margin:48px 0 35px
}
.community-copy p {
  color:#ffffffb3;
  max-width:620px;
  margin:0;
  font-size:17px;
  line-height:1.6
}
.results-section {
  background:var(--red);
  padding:clamp(110px,11vw,180px) clamp(24px,4vw,70px) 0
}
.results-heading {
  grid-template-columns:1.25fr .55fr;
  align-items:end;
  gap:8vw;
  margin:85px 0 120px;
  display:grid
}
.results-heading h2 span {
  color:var(--acid)
}
.results-heading>p {
  color:#ffffffb8;
  margin:0 0 8px;
  font-size:16px;
  line-height:1.6
}
.result-list {
  border-top:1px solid #ffffff4d;
  margin:0;
  padding:0;
  list-style:none
}
.result-list li {
  border-bottom:1px solid #ffffff4d;
  grid-template-columns:120px 1fr;
  align-items:center;
  min-height:134px;
  display:grid
}
.result-list li>span {
  color:var(--acid);
  letter-spacing:.12em;
  font:10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace
}
.result-list li>p {
  letter-spacing:-.045em;
  margin:0;
  font-size:clamp(27px,3.2vw,54px);
  line-height:1.04
}
.rhythm-section {
  background:var(--cream);
  min-height:900px;
  color:var(--ink);
  grid-template-columns:1.08fr .92fr;
  display:grid
}
.rhythm-image {
  min-height:780px;
  overflow:hidden
}
.rhythm-image img {
  object-fit:cover;
  object-position:72% center;
  filter:grayscale()contrast(1.08);
  width:100%;
  height:100%;
  transition:filter .6s;
  transform:scaleX(-1)
}
.rhythm-section:hover .rhythm-image img {
  filter:grayscale(.2)
}
.rhythm-copy {
  flex-direction:column;
  justify-content:center;
  padding:clamp(80px,8vw,140px) clamp(35px,6vw,100px);
  display:flex
}
.rhythm-copy h2 {
  margin:65px 0 38px;
  font-size:clamp(52px,6.3vw,104px)
}
.rhythm-copy>p {
  color:#5b5750;
  max-width:570px;
  margin:0;
  font-size:17px;
  line-height:1.65
}
.rhythm-copy ul {
  border-top:1px solid var(--line-light);
  gap:17px;
  margin:46px 0 0;
  padding:30px 0 0;
  list-style:none;
  display:grid
}
.rhythm-copy li {
  letter-spacing:.08em;
  text-transform:uppercase;
  align-items:center;
  gap:12px;
  font:11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  display:flex
}
.rhythm-copy li svg {
  color:var(--red)
}
.trust-section {
  background:var(--ink);
  padding:clamp(110px,11vw,180px) clamp(24px,4vw,70px)
}
.trust-intro h2 {
  margin:80px 0 120px
}
.trust-intro h2 span {
  color:var(--orange)
}
.trust-facts {
  border-block:1px solid var(--line-dark);
  grid-template-columns:repeat(3,1fr);
  display:grid
}
.trust-facts>div {
  border-right:1px solid var(--line-dark);
  flex-direction:column;
  justify-content:space-between;
  min-height:260px;
  padding:34px;
  display:flex
}
.trust-facts>div:last-child {
  border-right:0
}
.trust-facts strong {
  letter-spacing:-.07em;
  font-size:clamp(48px,6vw,100px);
  line-height:.9
}
.trust-facts span {
  color:#ffffff8a;
  letter-spacing:.08em;
  text-transform:uppercase;
  font:10px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace
}
.trust-note {
  color:#ffffffa8;
  max-width:670px;
  margin:75px 0 35px auto;
  font-size:18px;
  line-height:1.65
}
.outline-link {
  letter-spacing:.1em;
  text-transform:uppercase;
  border-bottom:1px solid;
  align-items:center;
  gap:13px;
  margin-left:calc(100% - 670px);
  padding-bottom:8px;
  font:10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  display:inline-flex
}
.membership-section {
  background:radial-gradient(circle at 74% 46%,#bd1730 0,var(--red) 38%,#650510 82%);
  padding:clamp(100px,10vw,170px) clamp(24px,4vw,70px);
  position:relative;
  overflow:hidden
}
.membership-orbit {
  pointer-events:none;
  place-items:center;
  display:grid;
  position:absolute;
  inset:0
}
.membership-orbit i {
  aspect-ratio:1;
  border:1px solid #ffffff26;
  border-radius:50%;
  width:66vw;
  position:absolute
}
.membership-orbit i:nth-child(2) {
  width:42vw
}
.membership-heading {
  z-index:1;
  margin:80px 0 100px;
  position:relative
}
.membership-heading>span {
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:30px;
  font:10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  display:block
}
.membership-heading h2 {
  letter-spacing:-.095em;
  text-transform:uppercase;
  margin:0;
  font-size:clamp(100px,17vw,300px);
  line-height:.68
}
.membership-heading h2 b {
  max-width:100%;
  font:inherit;
  white-space:nowrap;
  display:block
}
.price-grid {
  z-index:1;
  border-block:1px solid #ffffff4d;
  grid-template-columns:repeat(2,1fr);
  display:grid;
  position:relative
}
.price-grid>div {
  flex-direction:column;
  min-height:330px;
  padding:38px 0;
  display:flex
}
.price-grid>div:first-child {
  border-right:1px solid #ffffff4d
}
.price-grid>div:last-child {
  padding-left:6vw
}
.price-grid span {
  letter-spacing:.11em;
  text-transform:uppercase;
  font:10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace
}
.price-grid strong {
  letter-spacing:-.08em;
  margin-top:auto;
  font-size:clamp(70px,9vw,150px);
  line-height:.8
}
.price-grid p {
  color:#ffffffb8;
  max-width:430px;
  margin:28px 0 0;
  font-size:14px;
  line-height:1.55
}
.membership-action {
  z-index:1;
  align-items:center;
  gap:48px;
  margin-top:48px;
  display:flex;
  position:relative
}
.membership-action>a {
  background:var(--acid);
  min-width:330px;
  min-height:72px;
  color:var(--ink);
  letter-spacing:.1em;
  text-transform:uppercase;
  justify-content:space-between;
  align-items:center;
  padding:0 30px;
  font:11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  transition:transform .25s,background .25s;
  display:inline-flex
}
.membership-action>a:hover {
  background:#fff;
  transform:translateY(-4px)
}
.membership-action>p {
  color:#ffffff8f;
  max-width:500px;
  margin:0;
  font-size:11px;
  line-height:1.55
}
.membership-action>p a {
  border-bottom:1px solid
}
.footer {
  background:#050505;
  padding:100px clamp(24px,4vw,70px) 35px
}
.footer-top {
  border-bottom:1px solid var(--line-dark);
  justify-content:space-between;
  align-items:flex-start;
  gap:60px;
  padding-bottom:90px;
  display:flex
}
.footer-top img {
  filter:brightness(0)invert();
  width:190px
}
.footer-top h2 {
  letter-spacing:-.065em;
  text-align:right;
  max-width:900px;
  margin:0;
  font-size:clamp(48px,6.5vw,108px);
  line-height:.88
}
.footer-grid {
  grid-template-columns:repeat(3,1fr);
  gap:70px;
  max-width:850px;
  margin:80px 0 100px auto;
  display:grid
}
.footer-grid>div {
  align-content:start;
  gap:13px;
  display:grid
}
.footer-grid span {
  color:var(--orange);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:15px;
  font:9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace
}
.footer-grid a {
  color:#ffffffa8;
  font-size:14px;
  transition:color .25s
}
.footer-grid a:hover {
  color:#fff
}
.footer-bottom {
  border-top:1px solid var(--line-dark);
  color:#ffffff59;
  letter-spacing:.06em;
  text-transform:uppercase;
  justify-content:space-between;
  gap:25px;
  padding-top:28px;
  font:9px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  display:flex
}
.footer-bottom div {
  gap:25px;
  display:flex
}
@media (max-width:960px) {
  .site-header {
    grid-template-columns:1fr auto
  }
  .desktop-nav {
    display:none
  }
  .hero-media {
    width:66vw;
    height:67%;
    transform:translate(-50%,-46%)
  }
  .hero-title {
    top:43%;
    transform:none
  }
  .hero-facts {
    width:auto;
    left:24px;
    right:24px
  }
  .intro-grid,.inside-heading,.results-heading {
    grid-template-columns:1fr;
    gap:45px
  }
  .feature-row {
    grid-template-columns:60px 1fr 40px;
    padding-block:30px
  }
  .feature-row p {
    grid-column:2/4
  }
  .rhythm-section {
    grid-template-columns:1fr
  }
  .rhythm-image {
    min-height:650px
  }
  .trust-facts>div {
    min-height:220px
  }
  .outline-link {
    margin-left:0
  }
}
@media (max-width:640px) {
  .brand img {
    width:138px
  }
  .hero {
    min-height:780px
  }
  .hero-kicker span:last-child {
    display:none
  }
  .hero-media {
    width:78vw;
    height:60%;
    top:42%
  }
  .hero-title {
    top:35%
  }
  .hero-title>p {
    margin-bottom:18px;
    font-size:9px
  }
  .hero-title h1 {
    font-size:62px
  }
  .hero-title>a {
    margin-top:24px
  }
  .hero-word {
    font-size:42vw;
    top:38%
  }
  .hero-rings {
    top:-120px
  }
  .hero-facts {
    gap:16px;
    bottom:34px
  }
  .hero-facts>div:nth-child(2) {
    display:none
  }
  .hero-facts {
    grid-template-columns:1fr 1fr
  }
  .hero-facts p {
    font-size:9px
  }
  .scroll-cue {
    display:none
  }
  .intro-grid {
    margin:56px 0 80px
  }
  .intro-grid h2,.inside-heading h2,.community-copy h2,.results-heading h2,.rhythm-copy h2,.trust-intro h2 {
    font-size:48px
  }
  .intro-gallery {
    min-height:710px
  }
  .gallery-main {
    width:83%;
    height:68%;
    left:0
  }
  .gallery-side {
    width:53%;
    height:42%;
    right:0
  }
  .gallery-note {
    width:64%;
    padding:22px
  }
  .inside-heading {
    margin:56px 0 70px
  }
  .feature-row {
    grid-template-columns:38px 1fr;
    gap:18px;
    min-height:auto
  }
  .feature-row h3 {
    font-size:29px
  }
  .feature-row p {
    grid-column:1/3;
    font-size:14px
  }
  .feature-row i {
    display:none
  }
  .community-section {
    min-height:780px
  }
  .community-word {
    font-size:25vw;
    top:17%
  }
  .community-copy p {
    font-size:15px
  }
  .results-heading {
    margin:56px 0 70px
  }
  .result-list li {
    grid-template-columns:45px 1fr;
    min-height:118px
  }
  .result-list li>p {
    font-size:26px
  }
  .rhythm-image {
    min-height:500px
  }
  .rhythm-copy {
    padding:80px 24px
  }
  .trust-intro h2 {
    margin:56px 0 70px
  }
  .trust-facts {
    grid-template-columns:1fr
  }
  .trust-facts>div {
    border-right:0;
    border-bottom:1px solid var(--line-dark);
    min-height:180px
  }
  .membership-heading {
    max-width:100%;
    overflow:hidden
  }
  .membership-heading h2 {
    letter-spacing:-.085em;
    width:100%;
    font-size:min(19.5vw,82px);
    line-height:.76
  }
  .price-grid {
    grid-template-columns:1fr
  }
  .price-grid>div {
    min-height:250px
  }
  .price-grid>div:first-child {
    border-bottom:1px solid #ffffff4d;
    border-right:0
  }
  .price-grid>div:last-child {
    padding-left:0
  }
  .membership-action {
    flex-direction:column;
    align-items:stretch
  }
  .membership-action>a {
    width:100%;
    min-width:0
  }
  .footer-top {
    flex-direction:column
  }
  .footer-top h2 {
    text-align:left
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:45px;
    margin-left:0
  }
  .footer-bottom {
    flex-direction:column
  }
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,:before,:after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important
  }
  .reveal {
    animation:none
  }
}

/* ============================================================
 * Дополнения к макету
 * ============================================================ */

/*
 * Логотип. В макете лежал растр с непрозрачным тёмно-серым фоном, а поверх него
 * применён filter: brightness(0) invert() — фильтр красит весь непрозрачный
 * прямоугольник, и в шапке с подвалом вместо логотипа выходил белый блок.
 * Источник заменён на векторный логотип института с прозрачным фоном; фильтр
 * оставлен — он делает знак белым, как и задумано в монохромной шапке.
 */
.brand img {
  width: 178px;
  height: 40px;
}
.footer-top img {
  width: 210px;
}

/* Вход для тех, у кого подписка уже есть: в макете точки входа не было. */
.nav-login {
  color: #fff;
  border-bottom: 1px solid #ffffff59;
  padding-bottom: 2px;
}
.desktop-nav a.nav-login:hover {
  opacity: 1;
  border-bottom-color: var(--acid);
}
.dot-menu > div a.nav-login {
  color: var(--acid);
}

@media (max-width: 640px) {
  .brand img {
    width: 148px;
    height: 34px;
  }
  .footer-top img {
    width: 168px;
  }
}

/*
 * Крупные заголовки на узких экранах. В макете ниже 640px они зафиксированы на 48px,
 * и самое длинное слово («Профессиональная») не влезает в 342px контента у телефона
 * 390px — хвост уходит за край и срезается overflow-x: hidden. Ниже ~444px размер
 * становится тягучим; на самой границе 640px он прежний, макет не меняется.
 */
@media (max-width: 640px) {
  .intro-grid h2,
  .inside-heading h2,
  .community-copy h2,
  .results-heading h2,
  .rhythm-copy h2,
  .trust-intro h2 {
    font-size: min(48px, 10.8vw);
  }
}