.feature-editorial {
  position: relative;
  display: grid;
  max-width: var(--max);
  padding-inline: 3vw;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-block: 76px 92px;
}

.feature-editorial::before {
  content: "";
  position: absolute;
  inset: -80px 10% auto;
  height: 230px;
  background: radial-gradient(ellipse, rgba(132, 42, 211, .12), transparent 68%);
  pointer-events: none;
}

.feature-editorial .story-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 10px clamp(30px, 3vw, 54px) 20px;
  background: none;
  border: 0;
  border-radius: 0;
}

.feature-editorial .story-card > p:not(.eyebrow) { color: #aaa5b6; }

.feature-editorial .story-card + .story-card {
  border-left: 1px solid rgba(151, 126, 178, .13);
}

.feature-editorial .story-card h2 {
  max-width: 13em;
  margin: 10px 0 18px;
  font-size: clamp(28px, 2vw, 32px);
  line-height: 1.12;
  letter-spacing: -.025em;
}

.feature-editorial .story-card > p:not(.eyebrow) {
  max-width: 37em;
  font-size: 16px;
  line-height: 1.72;
}

.feature-editorial .eyebrow,
.requirements .eyebrow {
  font-size: 11px;
  letter-spacing: .07em;
  opacity: .76;
}

.feature-editorial .mini-chat {
  display: grid;
  width: min(100%, 390px);
  margin: 32px 0 0 auto;
  gap: 10px;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .3));
}

.feature-editorial .mini-chat span {
  display: block;
  padding: 13px 15px;
  border-color: rgba(159, 96, 202, .2);
  background: rgba(14, 14, 27, .88);
}

.feature-editorial .mini-chat span:first-child {
  margin-left: 24%;
  background: linear-gradient(135deg, rgba(56, 18, 89, .9), rgba(31, 20, 61, .94));
  border-color: rgba(172, 76, 238, .35);
}

.privacy-feature .tags,
.tone-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 25px;
}

.privacy-feature .tags span,
.tone-examples span {
  padding: 6px 11px;
  border: 1px solid rgba(154, 93, 193, .25);
  border-radius: 999px;
  background: rgba(16, 15, 27, .58);
  color: #c9b9d4;
  font-size: 12px;
}

.local-visual {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  max-width: 310px;
  margin-top: 28px;
  padding: 14px 17px;
  border-radius: 13px;
  background: linear-gradient(120deg, rgba(24, 22, 39, .85), rgba(12, 12, 21, .3));
  box-shadow: 0 17px 40px rgba(0, 0, 0, .18);
  overflow: hidden;
}

.local-visual .device-core {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  background: radial-gradient(circle at 35% 28%, #d373ff, #5b1aa1 72%);
  color: white;
  font: 600 18px Georgia, serif;
  box-shadow: 0 0 20px rgba(169, 63, 255, .28);
}

.local-visual b,
.local-visual small { display: block; }
.local-visual b { font-size: 13px; }
.local-visual small { color: #9791a4; font-size: 11px; }
.local-visual i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #b85bff; opacity: .35; }
.local-visual i:nth-last-child(3) { right: 24px; top: 18px; }
.local-visual i:nth-last-child(2) { right: 42px; bottom: 18px; }
.local-visual i:last-child { right: 15px; bottom: 31px; }

.tone-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 310px;
}

.tone-examples span {
  border-radius: 8px;
  text-align: center;
}

.tone-examples span:nth-child(2) {
  border-color: rgba(181, 79, 244, .5);
  color: #e2b9ff;
  background: rgba(82, 23, 120, .24);
}

.requirements {
  position: relative;
  display: grid;
  max-width: calc(var(--max) - 6vw);
  margin-block: 28px 90px;
  margin-inline: auto;
  padding: 54px 0 0;
  grid-template-columns: minmax(270px, .8fr) minmax(560px, 1.35fr);
  gap: clamp(54px, 7vw, 112px);
  background: none;
  border: 0;
  border-radius: 0;
}

.requirements::before {
  content: "";
  position: absolute;
  top: -30px;
  right: 5%;
  width: 48%;
  height: 220px;
  background: radial-gradient(ellipse, rgba(122, 37, 191, .13), transparent 70%);
  pointer-events: none;
}

.requirements > div:first-child { position: relative; }
.requirements h2 { margin-top: 10px; font-size: clamp(30px, 2.6vw, 40px); letter-spacing: -.03em; }
.requirements > div:first-child > p:last-child { font-size: 16px; line-height: 1.72; }

.requirement-cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
}

.requirement-cards article {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  min-height: 150px;
  justify-content: center;
  padding: 20px 18px;
  border-color: rgba(126, 119, 151, .17);
  background: rgba(13, 14, 25, .52);
}

.requirement-cards article:not(.recommended) { box-shadow: inset 0 1px rgba(255, 255, 255, .018); }

.requirement-cards .recommended {
  min-height: 178px;
  border-color: rgba(174, 68, 231, .76);
  background: radial-gradient(circle at 50% 5%, rgba(119, 37, 173, .28), rgba(13, 12, 25, .92) 68%);
  box-shadow: 0 18px 45px rgba(81, 21, 123, .25), inset 0 0 28px rgba(89, 28, 133, .18);
  transform: translateY(-4px);
}

.requirement-cards small { font-size: 10px; letter-spacing: .07em; opacity: .82; }
.requirement-cards strong { font-size: 20px; line-height: 1.2; }
.requirement-cards span { line-height: 1.5; }

.requirements .disclosure {
  grid-column: 1 / -1;
  max-width: 900px;
  margin: -16px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(126, 119, 151, .12);
  color: #858091;
  line-height: 1.55;
}

@media (max-width: 1150px) {
  .feature-editorial { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-editorial .story-card { padding-inline: 25px; }
  .requirements { grid-template-columns: minmax(250px, .72fr) minmax(0, 1.4fr); gap: 42px; }
  .requirement-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .feature-editorial { grid-template-columns: 1fr; margin-block: 55px 72px; }
  .feature-editorial .story-card { padding: 34px 0; }
  .feature-editorial .story-card + .story-card { border-left: 0; border-top: 1px solid rgba(151, 126, 178, .13); }
  .feature-editorial .mini-chat { margin-left: 0; }
  .requirements { display: grid; grid-template-columns: 1fr; gap: 34px; margin-inline: 20px; padding: 34px 0 0; }
  .requirement-cards { margin-top: 0; }
  .requirements .disclosure { margin-top: -4px; }
}

@media (max-width: 560px) {
  .feature-editorial { padding-inline: 20px; }
  .feature-editorial .story-card h2 { font-size: 28px; }
  .feature-editorial .story-card > p:not(.eyebrow) { font-size: 16px; }
  .requirements { margin-block: 12px 65px; }
  .requirement-cards { grid-template-columns: 1fr; gap: 10px; }
  .requirement-cards article,
  .requirement-cards .recommended { min-height: 0; padding: 18px; transform: none; }
}
