:root{
  --black:#070707;
  --white:#ffffff;
  --line-dark:rgba(255,255,255,.2);
  --line-light:rgba(0,0,0,.17);
  --muted-dark:#c8c8c8;
  --muted-light:#393939;
  --wrap:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--black);font:16.5px/1.65 Arial,Helvetica,sans-serif}
img{display:block;max-width:100%}
h1,h2,h3{margin:0 0 .55em;font-weight:700;line-height:1.15}
h1{max-width:19ch;font-size:clamp(2.15rem,5.5vw,4.3rem);letter-spacing:-.04em}
h2{font-size:clamp(1.65rem,3.4vw,2.6rem);letter-spacing:-.025em}
h3{font-size:1.08rem}
p{max-width:68ch;margin:0 0 1em}
a{text-underline-offset:.2em}
.wrap{width:min(100%,var(--wrap));margin:0 auto;padding-inline:28px}
.section--black{background:var(--black);color:var(--white)}
.section--black p{color:var(--muted-dark)}
.section--black a{color:var(--white)}
.section--white{background:var(--white);color:var(--black)}
.section--white p{color:var(--muted-light)}
.section-label{margin-bottom:.7rem!important;font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}

.site-head{position:relative;background:var(--black);border-bottom:1px solid var(--line-dark)}
.site-head__row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding-block:18px}
.site-head__logo{width:42px;height:42px;object-fit:contain;border:1px solid var(--line-dark);border-radius:6px}
.site-head__center{display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:0}
.site-head__mark{color:var(--white);font-weight:700}
.site-head__nav{display:flex;align-items:center;justify-content:flex-end;gap:22px;flex-wrap:wrap}
.site-head__nav a{color:var(--muted-dark);font-size:.86rem;text-decoration:none;transition:color .2s ease}
.site-head__nav a:hover,.site-head__nav a:focus-visible{color:var(--white)}

.hero{padding:clamp(64px,10vw,118px) 0 clamp(72px,11vw,126px);border-bottom:1px solid var(--line-light)}
.hero__lead{max-width:72ch;font-size:clamp(1.08rem,2vw,1.28rem)}
.hero__specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:34px 0 0;padding:0;border-block:1px solid var(--line-light)}
.hero__specs div{padding:18px 20px 18px 0}
.hero__specs div+div{padding-left:20px;border-left:1px solid var(--line-light)}
.hero__specs dt{margin-bottom:4px;color:#666;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}
.hero__specs dd{margin:0;font-weight:700}

.about,.steps,.errors,.audience,.tiles{padding:clamp(68px,9vw,104px) 0}
.about__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:28px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--line-dark)}
.about__list li{padding:14px 18px 14px 0;color:var(--muted-dark);border-top:1px solid var(--line-dark)}
.about__list li:nth-child(even){padding-left:18px;border-left:1px solid var(--line-dark)}
.about__note{margin-top:30px}

.steps{border-bottom:1px solid var(--line-light)}
.steps__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:30px 0}
.step-card{min-height:235px;padding:24px;border:1px solid var(--line-light)}
.step-card span{display:block;margin-bottom:36px;color:#696969;font-size:.78rem;font-weight:700;letter-spacing:.1em}
.step-card p{margin-bottom:0;font-size:.95rem}

.errors__layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,8vw,100px);align-items:start}
.check-list{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line-dark)}
.check-list li{padding:11px 0;color:var(--muted-dark);border-top:1px solid var(--line-dark)}

.audience{border-bottom:1px solid var(--line-light)}
.audience p{font-size:1.04rem}

.tiles h2{margin-bottom:30px}
.tiles__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tiles__grid figure{aspect-ratio:1/1;margin:0;overflow:hidden;border:1px solid var(--line-dark);background:#171717}
.tiles__grid img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}

.site-foot{padding:62px 0 0}
.site-foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;padding-bottom:44px}
.site-foot__col p{margin-bottom:.35em}
.site-foot__intro p{max-width:43ch}
.site-foot__legal{padding-block:17px;border-top:1px solid var(--line-light);color:#555;font-size:.8rem}

@media (max-width:780px){
  .site-head__row{grid-template-columns:auto 1fr auto}
  .site-head__center{justify-content:center}
  .site-head__nav{display:none}
  .site-head__mark{text-align:center}
  .steps__grid{grid-template-columns:1fr}
  .step-card{min-height:0}
  .step-card span{margin-bottom:16px}
  .errors__layout{grid-template-columns:1fr}
  .site-foot__grid{grid-template-columns:1fr 1fr}
  .site-foot__intro{grid-column:1/-1}
}

@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding-inline:20px}
  .hero{padding-block:58px 70px}
  .hero__specs{grid-template-columns:1fr}
  .hero__specs div{padding:14px 0}
  .hero__specs div+div{padding-left:0;border-left:0;border-top:1px solid var(--line-light)}
  .about__list{grid-template-columns:1fr}
  .about__list li:nth-child(even){padding-left:0;border-left:0}
  .tiles__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .site-foot__grid{grid-template-columns:1fr;gap:26px}
  .site-foot__intro{grid-column:auto}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}