.about-page{background:#303146}
.about-hero{background:var(--red);color:#fff;padding:0 0 72px}
.about-intro{width:calc(100% - 32px);max-width:1130px;margin:0 auto;padding:55px 8px 0}
.gold-label{margin:0 0 18px;color:#fff;font-size:16px;font-weight:600}
.gold-label:before,.gold-label:after{content:'';display:inline-block;width:48px;height:2px;background:var(--gold);vertical-align:middle;margin:0 12px 3px 0}
.gold-label:after{margin:0 0 3px 12px}
.about-intro h1{font-size:64px;line-height:1.02;margin:28px 0 20px;font-weight:700}
.about-intro>p:last-child{max-width:760px;font-size:16px;line-height:1.6}

.about-story{min-height:430px;background:var(--deep);color:#fff;padding:85px max(5%,calc((100% - 1130px)/2));display:grid;grid-template-columns:1fr 1.45fr;gap:80px;align-items:center}
.play-mark{width:64px;height:64px;border:2px solid #ddd;border-radius:50%;justify-self:center;display:grid;place-items:center}
.play-mark span{margin-left:5px;width:16px;height:20px;background:#ddd;clip-path:polygon(0 0,100% 50%,0 100%)}
.center-label{text-align:left}
.about-story h2{font-size:30px;line-height:1.18;margin:18px 0}
.about-story>div>p:not(.gold-label){font-size:16px;line-height:1.6;max-width:650px}
.about-benefits{display:grid;grid-template-columns:1fr 1fr;gap:35px}
.about-benefits ul{margin:12px 0 0;padding:0;list-style:none}
.about-benefits li{font-size:15px;margin:9px 0;padding-left:20px;position:relative}
.about-benefits li:before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:800}

.rate-section{background:#ae2020;text-align:center;padding:70px 5% 75px;color:#fff}
.rate-section p,.crew>p{color:var(--gold);font-size:18px;font-weight:600;margin:0}
.rate-section h2,.crew h2{margin:8px 0 22px;font-size:38px}
.rate-section i,.crew>i,.join-rules>i{display:block;width:90px;height:3px;background:var(--gold);margin:0 auto}
.rates{max-width:1050px;margin:42px auto 0;display:grid;grid-template-columns:repeat(4,1fr)}
.rates div{display:grid;gap:8px}
.rates b{font-size:48px;line-height:1;color:var(--gold)}
.rates span{font-size:14px;font-weight:600}

.founder{padding:90px max(5%,calc((100% - 1130px)/2));background:#303146;color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.founder>img{width:100%;height:430px;object-fit:cover}
.founder h2{font-size:30px;line-height:1.2;margin:18px 0}
.tweet-card{background:#fff;color:#262630;padding:18px;font-size:14px;line-height:1.45}
.tweet-card small{color:#656570}
.tweet-card p{margin:12px 0}
.founder-actions{margin:18px 0}
.founder-actions span,.crew figcaption span,.social-dot{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#f0aa16;color:#fff;margin-right:7px;font-size:14px;font-weight:700}
.small-gold,.pill-gold{display:inline-block;background:var(--gold);color:#17120e;font-size:15px;font-weight:600;padding:10px 18px}

.crew{background:#303146;color:#fff;padding:70px 5% 95px;text-align:center}
.crew-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1130px;margin:42px auto 0}
.crew figure{margin:0}
.crew figure img{width:100%;height:300px;object-fit:cover}
.crew figcaption{padding:14px}

.join-rules{background:#ae2020;color:#fff;text-align:center;padding:70px 20px}
.join-rules h2{font-size:34px;margin:0 0 18px}
.join-rules h3{font-size:19px;margin:25px 0 6px}
.join-rules ol{display:inline-block;text-align:left;margin:0 35px 24px 0;font-size:14px;line-height:1.65}
.pill-gold{border-radius:22px;padding:10px 24px}

@media(max-width:1024px){
  .about-intro{padding-top:48px}
  .about-intro h1{font-size:56px}
  .about-story{gap:48px;padding:70px 6%}
  .about-story h2{font-size:25px}
  .founder{gap:40px;padding:70px 6%}
  .founder>img{height:380px}
  .crew{padding-left:6%;padding-right:6%}
}

@media(max-width:767px){
  .about-hero{padding-bottom:55px}
  .about-intro{width:100%;padding:38px 6% 0}
  .about-intro h1{font-size:43px;margin-top:22px}
  .about-intro>p:last-child{font-size:15px}
  .about-story,.founder{grid-template-columns:1fr;padding:55px 6%;gap:36px}
  .about-story{min-height:auto}
  .play-mark{justify-self:start}
  .about-story h2{font-size:24px}
  .about-benefits{grid-template-columns:1fr;gap:0}
  .rate-section{padding:55px 6%}
  .rate-section h2,.crew h2{font-size:30px}
  .rates{grid-template-columns:repeat(2,1fr);gap:32px 20px}
  .rates b{font-size:40px}
  .founder>img{height:290px}
  .founder h2{font-size:26px}
  .crew{padding:55px 6% 70px}
  .crew-grid{grid-template-columns:1fr;gap:28px}
  .crew figure img{height:300px}
  .join-rules{padding:55px 6%}
  .join-rules ol{display:block;margin:0 0 24px;padding-left:22px}
}