:root{
  --red:#ff2b7d;
  --paper:#faf5ed;
}

.site-header{
  background:#0b0b0b;
  color:#fff;
  border-bottom:1px solid #343434;
  backdrop-filter:none;
}

.site-header .brand-mark img{filter:brightness(0) invert(1)}
.site-header .brand-mark sup{color:#fff}
.try-link{border-color:#777;border-radius:0}
.try-link:hover{background:var(--red);border-color:var(--red)}

.hero{
  grid-template-columns:1fr 1.05fr;
  align-items:stretch;
  padding:0;
  background:#090909;
  color:#fff;
}

.hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:7vw 4vw 7vw max(5vw,44px);
}

.hero h1{font-size:clamp(58px,7vw,104px)}
.accent-one{color:var(--red)}
.hero-lead{color:#f4f1ed;font-weight:700}
.button.primary{background:var(--red)}
.button.ghost{border-color:#777;background:transparent;color:#fff}
.trial-note{color:#aaa}

.hero-visual{background:#faf3e8;overflow:hidden}
.hero-visual .halo{
  width:64%;
  background:transparent;
  border:1px solid #d9cec1;
}
.shape{background:transparent;border:42px solid var(--red)}
.shape-a{width:230px;height:230px;top:-90px;right:-70px}
.shape-b{width:150px;height:150px;bottom:-70px;left:-45px;background:transparent}

.facts{
  margin:0;
  background:#faf3e8;
  border-bottom:10px solid var(--red);
}

.title-line{display:block;white-space:nowrap}
.section-head{max-width:960px}
.why .section-head h2,.products .section-head h2{font-size:clamp(36px,4.7vw,66px)}
.section-head>p:last-child{max-width:900px}
.split{grid-template-columns:1.08fr .92fr;gap:72px}
.split h2{font-size:clamp(36px,4vw,56px);line-height:1.15;letter-spacing:-.045em}
.split p{max-width:650px}

.product-grid article{position:relative}
.product-grid article.middle-product img{transform:scale(.8)}
.product-tag{
  position:absolute;
  top:28px;
  left:28px;
  z-index:2;
  padding:6px 9px;
  background:#111;
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
}
.product-grid article p{line-height:1.7}
.product-grid article p strong{color:var(--ink)}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding:0}
  .hero-copy{padding:70px 24px}
  .title-line{white-space:normal}
  .split{grid-template-columns:1fr}
}