/* Product capability stories shared by the landing and the domain page. */
.pulse-ring {
  position: absolute;
  width: 44px;
  height: 44px;
  border: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg stroke='%230D0D0D' stroke-width='3.6' stroke-linecap='round'%3E%3Cline x1='24' y1='10' x2='24' y2='4'/%3E%3Cline x1='36.1' y1='17' x2='41.3' y2='14'/%3E%3Cline x1='36.1' y1='31' x2='41.3' y2='34'/%3E%3Cline x1='24' y1='38' x2='24' y2='44'/%3E%3Cline x1='11.9' y1='31' x2='6.7' y2='34'/%3E%3Cline x1='11.9' y1='17' x2='6.7' y2='14'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0;
  pointer-events: none;
}

/* SEO explainer */
.seo-page-hero {
  padding: 170px 0 0;
  background: #fff;
  text-align: center;
}

.seo-page-hero .h1 {
  max-width: none;
}

.seo-page-hero .lead {
  max-width: 780px;
  margin: 26px auto 0;
  color: #595959;
  font-size: 1.25rem;
  line-height: 1.35;
}

.seo-section-sign {
  position: relative;
  display: grid;
  width: 64px;
  height: 64px;
  margin-bottom: 26px;
  place-items: center;
  border: 2.5px solid var(--dark);
  border-radius: 19px;
  background: var(--brand);
  box-shadow: 5px 6px 0 var(--dark);
  transform: rotate(-3deg);
}

.seo-section-sign svg {
  width: 29px;
  height: 29px;
}

.seo-section-sign--small {
  width: 56px;
  height: 56px;
  margin-bottom: 28px;
  border-radius: 17px;
  box-shadow: 4px 5px 0 var(--dark);
}

.seo-page-hero .hero-cta {
  display: flex;
  margin-top: 38px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.seo-hero-mock-wrap {
  padding: 80px 24px 0;
}

#seo-faq {
  padding-top: 38px;
}

.seo-hero-demo {
  position: relative;
  width: min(1180px, 100%);
  min-width: 0;
  height: 560px;
  margin: 0 auto;
  overflow: hidden;
  border: 1.5px solid #dedede;
  border-radius: 2rem;
  background: #f0f1f2;
}

.seo-browser-bar {
  position: absolute;
  inset: 18px 18px auto;
  z-index: 3;
  display: grid;
  height: 54px;
  padding: 0 16px;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  align-items: center;
  border: 1.5px solid #d9d9d9;
  border-radius: 15px;
  background: #fff;
}

.seo-browser-dots {
  display: flex;
  gap: 5px;
}

.seo-browser-dots i {
  width: 7px;
  height: 7px;
  border: 1px solid var(--dark);
  border-radius: 50%;
}

.seo-browser-dots i:first-child {
  background: var(--brand);
}

.seo-browser-address {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  overflow: hidden;
  color: #626262;
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-browser-address svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.seo-hero-stage {
  position: absolute;
  inset: 90px 18px 18px;
  overflow: hidden;
  border: 1.5px solid #d9d9d9;
  border-radius: 1.45rem;
  background: #fff;
}

.seo-hero-index,
.seo-hero-search {
  position: absolute;
  inset: 0;
}

.seo-hero-index {
  width: min(720px, calc(100% - 72px));
  height: max-content;
  margin: auto;
  padding: 28px;
  border: 1.5px solid #d8d8d8;
  border-radius: 1.45rem;
  background: #fff;
  text-align: left;
}

.seo-hero-index__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid #e5e5e5;
}

.seo-hero-index__head small,
.seo-hero-index__head strong {
  display: block;
}

.seo-hero-index__head small {
  color: #777;
  font-size: .7rem;
}

.seo-hero-index__head strong {
  margin-top: 5px;
  font-size: 1rem;
}

.seo-hero-index__head > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: #c6fb50;
  font-style: normal;
  font-weight: 800;
}

.seo-hero-index__rows {
  display: grid;
  margin-top: 18px;
  gap: 9px;
}

.seo-hero-index__rows > span {
  display: grid;
  min-height: 70px;
  padding: 11px 14px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  border-radius: 1rem;
  background: #f0f1f2;
}

.seo-hero-index__rows i {
  display: grid;
  width: 36px;
  height: 36px;
  grid-row: span 2;
  place-items: center;
  border-radius: 11px;
  background: var(--brand);
  font-size: .68rem;
  font-style: normal;
  font-weight: 800;
}

.seo-hero-index__rows b,
.seo-hero-index__rows small,
.seo-hero-index__rows em {
  display: block;
}

.seo-hero-index__rows b {
  align-self: end;
  font-size: .8rem;
}

.seo-hero-index__rows small {
  align-self: start;
  color: #777;
  font-size: .66rem;
}

.seo-hero-index__rows em {
  grid-column: 3;
  grid-row: 1 / 3;
  color: #39734a;
  font-size: .67rem;
  font-style: normal;
  font-weight: 750;
}

.seo-hero-ready {
  position: absolute;
  z-index: 4;
  right: 38px;
  bottom: 34px;
  display: grid;
  min-width: 340px;
  min-height: 74px;
  padding: 12px 16px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 2px solid var(--dark);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 5px 6px 0 var(--dark);
}

.seo-hero-ready > i,
.seo-publish-ready > i,
.seo-origin-status > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: #c6fb50;
  color: var(--dark);
  font-style: normal;
  font-weight: 850;
}

.seo-hero-ready strong,
.seo-hero-ready small {
  display: block;
}

.seo-hero-ready strong {
  font-size: .86rem;
}

.seo-hero-ready small {
  margin-top: 4px;
  color: #777;
  font-size: .68rem;
}

.seo-hero-search {
  display: grid;
  padding: 66px clamp(26px, 7vw, 110px);
  align-content: start;
  background: #fff;
  text-align: left;
  opacity: 0;
}

.seo-hero-search__field {
  display: grid;
  min-height: 60px;
  padding: 0 18px;
  grid-template-columns: 23px minmax(0, 1fr) 2px;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--dark);
  border-radius: 999px;
}

.seo-hero-search__field svg {
  width: 22px;
  height: 22px;
}

.seo-hero-search__field span {
  display: block;
  width: 0;
  overflow: hidden;
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
}

.seo-hero-search__field i {
  width: 2px;
  height: 21px;
  background: var(--dark);
}

.seo-hero-result {
  margin: 28px 8px 0;
  padding: 24px;
  border-radius: 1.2rem;
  background: #f0f1f2;
  opacity: 0;
}

.seo-hero-result small,
.seo-hero-result strong,
.seo-hero-result span {
  display: block;
}

.seo-hero-result small {
  color: #39734a;
  font-size: .7rem;
}

.seo-hero-result strong {
  margin-top: 10px;
  font-size: 1.08rem;
  line-height: 1.2;
}

.seo-hero-result span {
  margin-top: 8px;
  color: #676767;
  font-size: .77rem;
  line-height: 1.45;
}

.seo-hero-visitor {
  display: grid;
  width: min(390px, calc(100% - 16px));
  min-height: 76px;
  margin: 22px 8px 0 auto;
  padding: 12px 16px;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 2px solid var(--dark);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 5px 6px 0 var(--dark);
  opacity: 0;
}

.seo-hero-visitor > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  background: var(--brand);
  font-style: normal;
  font-weight: 800;
}

.seo-hero-visitor strong,
.seo-hero-visitor small {
  display: block;
}

.seo-hero-visitor strong {
  font-size: .82rem;
}

.seo-hero-visitor small {
  margin-top: 4px;
  color: #777;
  font-size: .67rem;
}

.seo-hero-demo.playing .seo-hero-index {
  animation: seoHeroIndex 12s var(--ease-exp) infinite;
}

.seo-hero-demo.playing .seo-hero-ready {
  animation: seoHeroReady 12s var(--ease-spring) infinite;
}

.seo-hero-demo.playing .seo-hero-search {
  animation: seoHeroSearch 12s var(--ease-exp) infinite;
}

.seo-hero-demo.playing .seo-hero-search__field span {
  animation: seoHeroType 12s steps(26, end) infinite;
}

.seo-hero-demo.playing .seo-hero-search__field i {
  animation: seoHeroCaret 12s steps(1, end) infinite;
}

.seo-hero-demo.playing .seo-hero-result {
  animation: seoHeroResult 12s var(--ease-spring) infinite;
}

.seo-hero-demo.playing .seo-hero-visitor {
  animation: seoHeroVisitor 12s var(--ease-spring) infinite;
}

@keyframes seoHeroIndex {
  0%, 36% { opacity: 1; transform: scale(1); }
  44%, 100% { opacity: 0; transform: translateY(-10px) scale(.98); }
}

@keyframes seoHeroReady {
  0%, 14% { opacity: 0; transform: translateY(16px) scale(.94); }
  21%, 35% { opacity: 1; transform: none; }
  43%, 100% { opacity: 0; transform: translateY(-9px) scale(.97); }
}

@keyframes seoHeroSearch {
  0%, 39% { opacity: 0; transform: translateY(14px); }
  47%, 96% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes seoHeroType {
  0%, 48% { width: 0; }
  64%, 100% { width: 26ch; }
}

@keyframes seoHeroCaret {
  0%, 46%, 49%, 52%, 55%, 58%, 61%, 64%, 100% { opacity: 0; }
  47%, 50%, 53%, 56%, 59%, 62%, 63% { opacity: 1; }
}

@keyframes seoHeroResult {
  0%, 65% { opacity: 0; transform: translateY(16px); }
  72%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-5px); }
}

@keyframes seoHeroVisitor {
  0%, 75% { opacity: 0; transform: translateY(14px) scale(.95); }
  82%, 95% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-6px) scale(.98); }
}

.seo-intro,
.seo-recommendations,
.seo-technical-section,
.seo-traffic-section,
.seo-search-cta {
  padding: 112px 0;
}

.seo-publish-story {
  display: grid;
  min-height: 560px;
  padding: clamp(30px, 5vw, 64px);
  grid-template-columns: minmax(0, .78fr) minmax(480px, 1.22fr);
  align-items: center;
  gap: clamp(38px, 6vw, 82px);
  border-radius: 2rem;
  background: #f0f1f2;
}

.seo-publish-story__copy h3 {
  max-width: 520px;
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.4vw, 4.6rem);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: .98;
  text-transform: uppercase;
  -webkit-text-stroke: 1.3px currentColor;
}

.seo-publish-story__copy p {
  max-width: 520px;
  margin-top: 22px;
  color: #5d5d5d;
  font-size: 1rem;
  line-height: 1.55;
}

.seo-publish-stage {
  position: relative;
  height: 410px;
  overflow: hidden;
  border: 1.5px solid #d8d8d8;
  border-radius: 1.5rem;
  background: #fff;
}

.seo-publish-panel,
.seo-publish-pages {
  position: absolute;
  inset: 22px;
}

.seo-publish-panel__head {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e5e5;
  font-size: .9rem;
  font-weight: 750;
}

.seo-publish-panel__head i {
  padding: 7px 11px;
  border-radius: 999px;
  background: #c6fb50;
  font-size: .68rem;
  font-style: normal;
  text-transform: uppercase;
}

.seo-publish-product {
  display: grid;
  min-height: 118px;
  margin-top: 24px;
  padding: 14px;
  grid-template-columns: 86px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 14px;
  border-radius: 1rem;
  background: #f0f1f2;
}

.seo-publish-product__visual {
  position: relative;
  width: 86px;
  height: 86px;
  overflow: hidden;
  border: 1.5px solid #dca44e;
  border-radius: .8rem;
  background:
    linear-gradient(24deg, transparent 46%, rgb(255 255 255 / 46%) 47% 53%, transparent 54%),
    var(--brand);
}

.seo-publish-product__visual::before {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 13px;
  width: 40px;
  height: 47px;
  border: 2px solid var(--dark);
  border-radius: 7px 7px 15px 15px;
  background: #fff7df;
  box-shadow: inset 0 -8px 0 #ffd09c;
  content: "";
  transform: rotate(-4deg);
}

.seo-publish-product__visual::after {
  position: absolute;
  right: 12px;
  bottom: 24px;
  width: 22px;
  height: 25px;
  border: 2px solid var(--dark);
  border-left: 0;
  border-radius: 0 14px 14px 0;
  content: "";
  transform: rotate(-4deg);
}

.seo-publish-product strong,
.seo-publish-product small {
  display: block;
}

.seo-publish-product strong {
  font-size: .9rem;
}

.seo-publish-product small {
  margin-top: 7px;
  color: #777;
  font-size: .73rem;
}

.seo-publish-product > i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #c6fb50;
  font-style: normal;
  font-weight: 800;
}

.seo-publish-button {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  min-height: 58px;
  place-items: center;
  border: 2px solid var(--dark);
  border-radius: 999px;
  background: var(--brand);
  font-size: .9rem;
  font-weight: 750;
}

.seo-publish-pages {
  display: grid;
  align-content: center;
  gap: 10px;
  opacity: 0;
}

.seo-publish-pages > span {
  display: grid;
  min-height: 82px;
  padding: 13px 16px;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  border-radius: 1rem;
  background: #f0f1f2;
}

.seo-publish-pages i {
  display: grid;
  width: 36px;
  height: 36px;
  grid-row: span 2;
  place-items: center;
  border-radius: 11px;
  background: var(--brand);
  color: var(--dark);
  font-size: .7rem;
  font-style: normal;
  font-weight: 800;
}

.seo-publish-pages b,
.seo-publish-pages small {
  display: block;
  min-width: 0;
}

.seo-publish-pages b {
  font-size: .82rem;
}

.seo-publish-pages small {
  overflow: hidden;
  color: #777;
  font-size: .67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-publish-ready {
  position: absolute;
  right: 30px;
  bottom: 28px;
  z-index: 5;
  display: grid;
  width: min(360px, calc(100% - 60px));
  min-height: 82px;
  padding: 12px 16px;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 2px solid var(--dark);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 5px 6px 0 var(--dark);
  opacity: 0;
}

.seo-publish-ready strong,
.seo-publish-ready small {
  display: block;
}

.seo-publish-ready strong {
  font-size: .85rem;
}

.seo-publish-ready small {
  margin-top: 4px;
  color: #777;
  font-size: .66rem;
  line-height: 1.3;
}

.seo-publish-cursor {
  position: absolute;
  z-index: 7;
  width: 38px;
  right: 13%;
  bottom: 20px;
  opacity: 0;
  pointer-events: none;
}

.seo-publish-pulse {
  position: absolute;
  z-index: 6;
  right: calc(30% - 15px);
  bottom: 33px;
  opacity: 0;
  pointer-events: none;
}

.seo-publish-story.playing .seo-publish-panel {
  animation: seoPublishPanel 9s var(--ease-exp) infinite;
}

.seo-publish-story.playing .seo-publish-button {
  animation: seoPublishButton 9s var(--ease-spring) infinite;
}

.seo-publish-story.playing .seo-publish-pages {
  animation: seoPublishPages 9s var(--ease-exp) infinite;
}

.seo-publish-story.playing .seo-publish-pages > span:nth-child(1) { animation: seoPublishRow 9s var(--ease-spring) infinite; }
.seo-publish-story.playing .seo-publish-pages > span:nth-child(2) { animation: seoPublishRow 9s .18s var(--ease-spring) infinite; }
.seo-publish-story.playing .seo-publish-pages > span:nth-child(3) { animation: seoPublishRow 9s .36s var(--ease-spring) infinite; }
.seo-publish-story.playing .seo-publish-ready { animation: seoPublishReady 9s var(--ease-spring) infinite; }
.seo-publish-story.playing .seo-publish-cursor { animation: seoPublishCursor 9s var(--ease-exp) infinite; }
.seo-publish-story.playing .seo-publish-pulse { animation: seoPublishPulse 9s ease-out infinite; }

@keyframes seoPublishPanel {
  0%, 34% { opacity: 1; transform: none; }
  43%, 100% { opacity: 0; transform: translateY(-10px) scale(.98); }
}

@keyframes seoPublishButton {
  0%, 18%, 25%, 100% { transform: none; }
  21% { transform: translateY(2px) scale(.97); }
}

@keyframes seoPublishPages {
  0%, 39% { opacity: 0; }
  46%, 96% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes seoPublishRow {
  0%, 40% { opacity: 0; transform: translateX(-18px); }
  50%, 96% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(8px); }
}

@keyframes seoPublishReady {
  0%, 66% { opacity: 0; transform: translateY(14px) scale(.95); }
  74%, 92% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: translateY(-7px) scale(.98); }
}

@keyframes seoPublishCursor {
  0%, 8% { opacity: 0; transform: translate(125px, 80px) rotate(-8deg); }
  11% { opacity: 1; }
  18%, 24% { opacity: 1; transform: translate(0, 0) rotate(-8deg); }
  21% { transform: translate(0, 2px) scale(.84) rotate(-8deg); }
  29%, 100% { opacity: 0; transform: translate(0, 0) rotate(-8deg); }
}

@keyframes seoPublishPulse {
  0%, 19.5%, 23.5%, 100% { opacity: 0; transform: scale(.4); }
  21% { opacity: 1; transform: scale(1); }
  23% { opacity: 0; transform: scale(1.5); }
}

.seo-responsibility-card h2,
.seo-responsibility-card h3 {
  margin: 0 0 12px;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.seo-responsibility-card li,
.seo-origin-note {
  color: var(--dark-2);
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: -0.025em;
}

.seo-recommendation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.seo-recommendation-card {
  display: flex;
  min-height: 320px;
  padding: 32px;
  flex-direction: column;
  border-radius: 1.5rem;
  background: #f0f1f2;
}

.seo-recommendation-card:nth-child(2) {
  background: #fff8de;
}

.seo-recommendation-card:nth-child(3) {
  background: var(--brand);
}

.seo-recommendation-card h3 {
  display: flex;
  min-height: 3em;
  margin: 0;
  align-items: flex-end;
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 2.5vw, 2.75rem);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: .98;
  text-transform: uppercase;
  -webkit-text-stroke: 1.1px currentColor;
}

.seo-recommendation-card p {
  margin-top: auto;
  padding-top: 22px;
  color: #585858;
  font-size: .95rem;
  line-height: 1.5;
}

.seo-brand-plate {
  margin-bottom: 72px;
  padding: 104px 0;
  background: var(--brand);
}

.seo-brand-layout,
.seo-traffic-layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr);
  align-items: center;
  gap: clamp(44px, 7vw, 100px);
}

.seo-brand-copy .text-l {
  max-width: 650px;
  margin-top: 24px;
  color: #393939;
}

.seo-brand-visual {
  min-height: 440px;
  padding: 26px;
  overflow: hidden;
  border: 1.5px solid var(--dark);
  border-radius: 1.6rem;
  background: #fff;
}

.seo-brand-profile {
  display: grid;
  min-height: 92px;
  padding-bottom: 22px;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid #e3e3e3;
}

.seo-brand-profile > i {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 2px solid var(--dark);
  border-radius: 15px;
  background: var(--brand);
  font-style: normal;
  font-weight: 800;
}

.seo-brand-profile small,
.seo-brand-profile strong,
.seo-brand-profile em {
  display: block;
}

.seo-brand-profile small {
  color: #777;
  font-size: .66rem;
}

.seo-brand-profile strong {
  margin-top: 4px;
  font-size: .95rem;
}

.seo-brand-profile em {
  margin-top: 4px;
  color: #5f5f5f;
  font-size: .7rem;
  font-style: normal;
}

.seo-brand-fields {
  display: grid;
  margin-top: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.seo-brand-fields span {
  display: flex;
  min-height: 72px;
  padding: 10px;
  align-items: center;
  gap: 8px;
  border-radius: .9rem;
  background: #f0f1f2;
  font-size: .68rem;
  font-weight: 700;
}

.seo-brand-fields i {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #c6fb50;
  font-size: .65rem;
  font-style: normal;
  opacity: 0;
}

.seo-brand-result {
  margin-top: 18px;
  padding: 20px;
  border-radius: 1rem;
  background: #f0f1f2;
  opacity: 0;
}

.seo-brand-result small,
.seo-brand-result strong,
.seo-brand-result span {
  display: block;
}

.seo-brand-result small {
  color: #39734a;
  font-size: .67rem;
}

.seo-brand-result strong {
  margin-top: 8px;
  font-size: .92rem;
}

.seo-brand-result span {
  margin-top: 6px;
  color: #676767;
  font-size: .7rem;
}

.seo-brand-visual.playing .seo-brand-fields span:nth-child(1) i { animation: seoBrandCheck 8s .1s var(--ease-spring) infinite; }
.seo-brand-visual.playing .seo-brand-fields span:nth-child(2) i { animation: seoBrandCheck 8s .55s var(--ease-spring) infinite; }
.seo-brand-visual.playing .seo-brand-fields span:nth-child(3) i { animation: seoBrandCheck 8s 1s var(--ease-spring) infinite; }
.seo-brand-visual.playing .seo-brand-result { animation: seoBrandResult 8s var(--ease-exp) infinite; }

@keyframes seoBrandCheck {
  0%, 8% { opacity: 0; transform: scale(.5); }
  16%, 88% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: scale(.7); }
}

@keyframes seoBrandResult {
  0%, 35% { opacity: 0; transform: translateY(14px); }
  46%, 91% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-6px); }
}

.seo-technical-section {
  background: #f0f1f2;
}

.seo-responsibility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.seo-responsibility-card {
  padding: 36px;
  border: 1.5px solid var(--dark);
  border-radius: 26px;
  background: #fff;
}

.seo-responsibility-card--platform {
  background: var(--brand);
}

.seo-technical-section .seo-origin-layout {
  margin-top: 104px;
  padding-top: 104px;
  border-top: 1px solid #d6d6d6;
}

.seo-technical-section .seo-origin-layout .btn {
  margin-top: 28px;
  background: #fff;
}

.seo-responsibility-card ul {
  display: grid;
  gap: 0;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.seo-responsibility-card li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 15px 0;
  border-top: 1px solid rgba(13, 13, 13, 0.18);
  color: var(--dark);
}

.seo-responsibility-card li span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  font: 700 0.76rem/1 var(--font-mono);
}

.seo-origin-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(40px, 7vw, 104px);
  align-items: center;
}

.seo-origin-note {
  max-width: 640px;
  margin: 24px 0 28px;
}

.seo-origin-visual {
  position: relative;
  display: flex;
  min-height: 380px;
  padding: 30px;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  border: 1.5px solid #dedede;
  border-radius: 30px;
  background: #f0f1f2;
}

.seo-origin-visual__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.seo-origin-visual__head span {
  font-weight: 750;
}

.seo-origin-visual__head small {
  color: #777;
  font-size: .74rem;
}

.seo-origin-options {
  display: grid;
  gap: 9px;
}

.seo-origin-option {
  display: grid;
  min-height: 70px;
  padding: 12px 16px;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  border: 1.5px solid #d4d4d4;
  border-radius: 1rem;
  background: #fff;
}

.seo-origin-option small,
.seo-origin-option strong {
  display: block;
  min-width: 0;
}

.seo-origin-option small {
  color: #777;
  font-size: .65rem;
}

.seo-origin-option strong {
  margin-top: 4px;
  overflow: hidden;
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-origin-option > i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1.5px solid var(--dark);
  border-radius: 50%;
  background: #fff;
  font-style: normal;
  font-weight: 800;
}

.seo-origin-option--domain {
  border-color: var(--dark);
  background: var(--brand);
}

.seo-origin-option--domain > i {
  background: #c6fb50;
}

.seo-origin-catalog {
  overflow: hidden;
  border: 1.5px solid #d8d8d8;
  border-radius: 1rem;
  background: #fff;
}

.seo-origin-catalog__bar {
  display: flex;
  min-height: 40px;
  padding: 0 13px;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #e6e6e6;
  color: #626262;
  font-size: .67rem;
}

.seo-origin-catalog__bar svg {
  width: 14px;
  height: 14px;
}

.seo-origin-catalog__bar span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-origin-catalog__body {
  display: flex;
  min-height: 88px;
  padding: 16px;
  align-items: center;
  gap: 13px;
}

.seo-origin-catalog__body > i {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid var(--dark);
  border-radius: 13px;
  background: var(--brand);
  font-style: normal;
  font-weight: 800;
}

.seo-origin-catalog__body strong,
.seo-origin-catalog__body small {
  display: block;
}

.seo-origin-catalog__body strong {
  font-size: .84rem;
}

.seo-origin-catalog__body small {
  margin-top: 5px;
  color: #777;
  font-size: .67rem;
}

.seo-origin-status {
  position: absolute;
  right: 22px;
  bottom: 22px;
  display: flex;
  min-height: 52px;
  padding: 8px 14px 8px 9px;
  align-items: center;
  gap: 9px;
  border: 2px solid var(--dark);
  border-radius: 999px;
  background: #fff;
  box-shadow: 4px 5px 0 var(--dark);
  font-size: .72rem;
  font-weight: 750;
  opacity: 0;
}

.seo-origin-status > i {
  width: 31px;
  height: 31px;
}

.seo-origin-visual.playing .seo-origin-option--platform { animation: seoOriginPlatform 8s var(--ease-exp) infinite; }
.seo-origin-visual.playing .seo-origin-option--domain { animation: seoOriginDomain 8s var(--ease-spring) infinite; }
.seo-origin-visual.playing .seo-origin-catalog { animation: seoOriginCatalog 8s var(--ease-exp) infinite; }
.seo-origin-visual.playing .seo-origin-status { animation: seoOriginStatus 8s var(--ease-spring) infinite; }

@keyframes seoOriginPlatform {
  0%, 22% { opacity: 1; transform: none; }
  34%, 92% { opacity: .48; transform: scale(.98); }
  100% { opacity: 1; transform: none; }
}

@keyframes seoOriginDomain {
  0%, 20% { background: #fff; transform: none; }
  32%, 92% { background: var(--brand); transform: translateY(-2px); }
  100% { background: #fff; transform: none; }
}

@keyframes seoOriginCatalog {
  0%, 30% { opacity: .38; transform: translateY(8px); }
  42%, 94% { opacity: 1; transform: none; }
  100% { opacity: .38; transform: translateY(8px); }
}

@keyframes seoOriginStatus {
  0%, 48% { opacity: 0; transform: translateY(12px) scale(.94); }
  58%, 89% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateY(-6px) scale(.98); }
}

.seo-expectations {
  padding-top: 0;
}

.seo-expectations-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
  gap: clamp(36px, 7vw, 90px);
  align-items: center;
  padding: clamp(38px, 7vw, 84px);
  border-radius: 32px;
  border-radius: 2rem;
  background: #f0f1f2;
}

.seo-expectations-card .text-l {
  max-width: 690px;
  margin-top: 24px;
}

.seo-growth-visual {
  display: grid;
  min-height: 390px;
  padding: 22px;
  align-content: center;
  gap: 9px;
  border: 1.5px solid #d8d8d8;
  border-radius: 1.5rem;
  background: #fff;
}

.seo-growth-row {
  display: grid;
  min-height: 70px;
  padding: 10px 12px;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 11px;
  border-radius: .95rem;
  background: #f0f1f2;
}

.seo-growth-row > i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: var(--brand);
  font-size: .66rem;
  font-style: normal;
  font-weight: 800;
}

.seo-growth-row strong,
.seo-growth-row small {
  display: block;
}

.seo-growth-row strong {
  font-size: .78rem;
}

.seo-growth-row small {
  margin-top: 4px;
  color: #777;
  font-size: .64rem;
}

.seo-growth-row > b {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: #c6fb50;
  font-size: .75rem;
  opacity: 0;
}

.seo-growth-result {
  display: grid;
  margin-top: 8px;
  grid-template-columns: auto minmax(60px, 1fr) auto;
  align-items: center;
  gap: 9px;
  font-size: .7rem;
  font-weight: 700;
}

.seo-growth-result div {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3e3e3;
}

.seo-growth-result div i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}

.seo-growth-result strong {
  color: #39734a;
}

.seo-growth-visual.playing .seo-growth-row:nth-child(1) > b { animation: seoGrowthCheck 7s .2s var(--ease-spring) infinite; }
.seo-growth-visual.playing .seo-growth-row:nth-child(2) > b { animation: seoGrowthCheck 7s .75s var(--ease-spring) infinite; }
.seo-growth-visual.playing .seo-growth-row:nth-child(3) > b { animation: seoGrowthCheck 7s 1.3s var(--ease-spring) infinite; }
.seo-growth-visual.playing .seo-growth-result div i { animation: seoGrowthBar 7s var(--ease-exp) infinite; }

@keyframes seoGrowthCheck {
  0%, 9% { opacity: 0; transform: scale(.5); }
  17%, 84% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(.7); }
}

@keyframes seoGrowthBar {
  0%, 12% { width: 0; }
  58%, 84% { width: 88%; }
  96%, 100% { width: 0; }
}

.seo-check-section {
  padding-top: 0;
}

.seo-check-card {
  display: grid;
  min-height: 620px;
  padding: clamp(34px, 6vw, 78px);
  grid-template-columns: minmax(0, .85fr) minmax(470px, 1.15fr);
  align-items: center;
  gap: clamp(42px, 7vw, 92px);
  border-radius: 2rem;
  background: #f0f1f2;
}

.seo-check-card__copy .text-l {
  max-width: 520px;
  margin-top: 22px;
}

.seo-check-card__copy .btn {
  margin-top: 30px;
}

.seo-checklist {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 20px;
  border: 1.5px solid #d8d8d8;
  border-radius: 1.5rem;
  background: #fff;
  list-style: none;
}

.seo-checklist > li {
  display: grid;
  min-height: 74px;
  padding: 11px 13px;
  grid-template-columns: 34px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  border-radius: 1rem;
  background: #f0f1f2;
}

.seo-checklist > li > span {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  border-radius: 10px;
  background: var(--brand);
  font: 700 .68rem/1 var(--font-mono);
}

.seo-checklist strong,
.seo-checklist small {
  display: block;
}

.seo-checklist strong {
  font-size: .8rem;
}

.seo-checklist small {
  margin-top: 4px;
  color: #777;
  font-size: .65rem;
}

.seo-checklist > li > i {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 50%;
  background: #c6fb50;
  font-size: .78rem;
  font-style: normal;
  font-weight: 850;
  opacity: 0;
}

.seo-check-card.playing .seo-checklist > li:nth-child(1) > i { animation: seoCheckDone 7s .2s var(--ease-spring) infinite; }
.seo-check-card.playing .seo-checklist > li:nth-child(2) > i { animation: seoCheckDone 7s .65s var(--ease-spring) infinite; }
.seo-check-card.playing .seo-checklist > li:nth-child(3) > i { animation: seoCheckDone 7s 1.1s var(--ease-spring) infinite; }
.seo-check-card.playing .seo-checklist > li:nth-child(4) > i { animation: seoCheckDone 7s 1.55s var(--ease-spring) infinite; }
.seo-check-card.playing .seo-checklist > li:nth-child(5) > i { animation: seoCheckDone 7s 2s var(--ease-spring) infinite; }

@keyframes seoCheckDone {
  0%, 9% { opacity: 0; transform: scale(.45); }
  17%, 84% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(.7); }
}

.seo-traffic-layout > div:first-child {
  max-width: 650px;
}

.seo-traffic-layout .text-l {
  margin-top: 24px;
}

.seo-traffic-note {
  margin-top: 22px;
  padding-left: 16px;
  border-left: 4px solid var(--brand);
  color: #4f4f4f;
  font-size: .92rem;
  line-height: 1.5;
}

.seo-traffic-visual {
  position: relative;
  min-height: 500px;
  padding: 26px;
  overflow: hidden;
  border: 1.5px solid #dedede;
  border-radius: 1.7rem;
  background: #f0f1f2;
}

.seo-traffic-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.seo-traffic-sources > span {
  display: grid;
  min-height: 80px;
  padding: 12px;
  grid-template-columns: 28px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  column-gap: 8px;
  border: 1.5px solid #d6d6d6;
  border-radius: 1rem;
  background: #fff;
}

.seo-traffic-sources i {
  display: grid;
  width: 28px;
  height: 28px;
  grid-row: span 2;
  place-items: center;
  border-radius: 9px;
  background: var(--brand);
  font-size: .73rem;
  font-style: normal;
  font-weight: 700;
}

.seo-traffic-sources strong,
.seo-traffic-sources small {
  display: block;
  min-width: 0;
}

.seo-traffic-sources strong {
  font-size: .72rem;
}

.seo-traffic-sources small {
  margin-top: 3px;
  overflow: hidden;
  color: #777;
  font-size: .58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-traffic-route {
  position: relative;
  display: flex;
  height: 108px;
  align-items: center;
  flex-direction: column;
}

.seo-traffic-route::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--dark);
  content: "";
  transform: translateX(-50%);
}

.seo-traffic-route::after {
  content: none;
}

.seo-traffic-route span {
  position: relative;
  z-index: 2;
  display: block;
  max-width: calc(100% - 30px);
  margin-top: 19px;
  padding: 9px 14px;
  overflow: hidden;
  border: 1.5px solid var(--dark);
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 7px #f0f1f2;
  font: 700 .65rem/1 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-traffic-route i {
  position: absolute;
  z-index: 2;
  bottom: 2px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 2px solid var(--dark);
  border-radius: 10px;
  background: var(--brand);
  color: var(--dark);
  font-size: .8rem;
  font-style: normal;
  font-weight: 800;
}

.seo-traffic-storefront {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--dark);
  border-radius: 1.2rem;
  background: #fff;
  box-shadow: 5px 6px 0 var(--dark);
}

.seo-traffic-storefront__bar {
  display: grid;
  min-height: 48px;
  padding: 0 14px;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #e1e1e1;
}

.seo-traffic-storefront__bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c6fb50;
}

.seo-traffic-storefront__bar span {
  font-size: .72rem;
  font-weight: 750;
}

.seo-traffic-storefront__bar b {
  padding: 7px 10px;
  border-radius: 999px;
  background: #f0f1f2;
  font-size: .58rem;
}

.seo-traffic-storefront__body {
  display: grid;
  min-height: 208px;
  padding: 20px;
  grid-template-columns: minmax(0, .88fr) minmax(150px, 1.12fr);
  align-items: center;
  gap: 18px;
}

.seo-traffic-storefront__body small,
.seo-traffic-storefront__body strong {
  display: block;
}

.seo-traffic-storefront__body small {
  color: #777;
  font-size: .62rem;
}

.seo-traffic-storefront__body strong {
  max-width: 180px;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
  -webkit-text-stroke: .65px currentColor;
}

.seo-traffic-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.seo-traffic-products i {
  position: relative;
  min-height: 112px;
  overflow: hidden;
  border-radius: .75rem;
  background: var(--brand);
}

.seo-traffic-products i:nth-child(2) { background: #ffd7bf; }
.seo-traffic-products i:nth-child(3) { background: #c6fb50; }

.seo-traffic-products i::before {
  position: absolute;
  right: 18%;
  bottom: -14px;
  width: 64%;
  height: 82%;
  border: 2px solid var(--dark);
  border-radius: 50% 50% 18% 18%;
  background: #fff8e7;
  content: "";
  transform: rotate(-4deg);
}

.seo-traffic-products i:nth-child(2)::before {
  border-radius: 10px 10px 45% 45%;
  transform: rotate(5deg) scale(.82);
}

.seo-traffic-products i:nth-child(3)::before {
  border-radius: 45% 45% 12px 12px;
  transform: rotate(-2deg) scale(.7);
}

.seo-traffic-arrival {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: grid;
  min-height: 64px;
  padding: 10px 13px;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--dark);
  border-radius: .9rem;
  background: rgb(255 255 255 / 94%);
  box-shadow: 3px 4px 0 var(--dark);
}

.seo-traffic-arrival > i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #c6fb50;
  font-size: .76rem;
  font-style: normal;
  font-weight: 850;
}

.seo-traffic-arrival strong,
.seo-traffic-arrival small {
  display: block;
}

.seo-traffic-arrival strong { font-size: .72rem; }
.seo-traffic-arrival small { margin-top: 3px; color: #777; font-size: .6rem; }

.seo-traffic-visual.playing .seo-traffic-sources > span:nth-child(1) { animation: seoTrafficSource 8s .1s var(--ease-spring) infinite; }
.seo-traffic-visual.playing .seo-traffic-sources > span:nth-child(2) { animation: seoTrafficSource 8s .35s var(--ease-spring) infinite; }
.seo-traffic-visual.playing .seo-traffic-sources > span:nth-child(3) { animation: seoTrafficSource 8s .6s var(--ease-spring) infinite; }
.seo-traffic-visual.playing .seo-traffic-route span { animation: seoTrafficLink 8s var(--ease-exp) infinite; }
.seo-traffic-visual.playing .seo-traffic-storefront { animation: seoTrafficStorefront 8s var(--ease-spring) infinite; }
.seo-traffic-visual.playing .seo-traffic-arrival { animation: seoTrafficArrival 8s var(--ease-spring) infinite; }

@keyframes seoTrafficSource {
  0%, 7% { opacity: .45; transform: translateY(-7px); }
  16%, 88% { opacity: 1; transform: none; }
  98%, 100% { opacity: .45; transform: translateY(-7px); }
}

@keyframes seoTrafficLink {
  0%, 17% { opacity: 0; transform: translateY(-22px) scale(.94); }
  26%, 43% { opacity: 1; transform: none; }
  53%, 100% { opacity: 0; transform: translateY(35px) scale(.96); }
}

@keyframes seoTrafficStorefront {
  0%, 40% { transform: scale(.975); }
  51%, 90% { transform: none; }
  100% { transform: scale(.975); }
}

@keyframes seoTrafficArrival {
  0%, 48% { opacity: 0; transform: translateY(16px) scale(.96); }
  58%, 90% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: translateY(-5px); }
}

.seo-search-cta {
  padding-top: 0;
  padding-bottom: 64px;
}

.seo-search-cta__card {
  padding: clamp(52px, 8vw, 104px) clamp(24px, 8vw, 110px);
  border-radius: 2rem;
  background: var(--brand);
  text-align: center;
}

.seo-search-cta__card .h2 {
  max-width: 1000px;
  margin: 0 auto;
}

.seo-search-cta__card .text-l {
  max-width: 720px;
  margin: 24px auto 0;
}

.seo-search-cta__card .btn {
  margin-top: 30px;
  background: var(--dark);
  color: #fff;
}

@media (max-width: 900px) {
  .seo-intro,
  .seo-recommendations,
  .seo-technical-section,
  .seo-traffic-section,
  .seo-search-cta {
    padding: 82px 0;
  }

  .seo-search-cta {
    padding-top: 0;
    padding-bottom: 52px;
  }

  .seo-responsibility-grid,
  .seo-origin-layout,
  .seo-publish-story,
  .seo-brand-layout,
  .seo-traffic-layout {
    grid-template-columns: 1fr;
  }

  .seo-page-hero {
    padding-top: 128px;
  }

  .seo-page-hero .lead {
    font-size: 1.05rem;
  }

  .seo-hero-demo {
    height: 540px;
  }

  .seo-publish-story,
  .seo-brand-layout,
  .seo-traffic-layout {
    gap: 38px;
  }

  .seo-origin-layout {
    gap: 36px;
  }

  .seo-recommendation-grid {
    grid-template-columns: 1fr;
  }

  .seo-recommendation-card {
    min-height: 260px;
  }

  .seo-brand-copy {
    max-width: 760px;
  }

  .seo-origin-visual {
    min-height: 330px;
  }
}

@media (max-width: 600px) {
  #seo-faq {
    padding-top: 30px;
  }

  .seo-page-hero .hero-cta .btn,
  .seo-origin-layout .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .seo-intro,
  .seo-recommendations,
  .seo-technical-section,
  .seo-traffic-section,
  .seo-search-cta {
    padding: 64px 0;
  }

  .seo-page-hero {
    padding: 120px 0 0;
  }

  .seo-page-hero .h1 {
    font-size: clamp(2rem, 8.5vw, 2.45rem);
    line-height: .93;
  }

  .seo-page-hero .hero-cta {
    display: grid;
    gap: 10px;
  }

  .seo-hero-mock-wrap {
    padding: 56px 0 0;
  }

  .seo-hero-demo {
    height: 500px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .seo-browser-bar {
    inset: 12px 12px auto;
    grid-template-columns: 24px minmax(0, 1fr) 24px;
  }

  .seo-browser-dots {
    visibility: hidden;
  }

  .seo-hero-stage {
    inset: 78px 12px 12px;
  }

  .seo-hero-index {
    width: calc(100% - 24px);
    padding: 18px 14px;
  }

  .seo-hero-index__head {
    padding-bottom: 16px;
  }

  .seo-hero-index__rows > span {
    padding: 9px;
    grid-template-columns: 33px minmax(0, 1fr);
    column-gap: 8px;
  }

  .seo-hero-index__rows em {
    display: none;
  }

  .seo-hero-ready {
    right: 16px;
    bottom: 16px;
    min-width: 0;
    width: calc(100% - 32px);
  }

  .seo-hero-search {
    padding: 44px 15px;
  }

  .seo-hero-search__field {
    padding: 0 13px;
  }

  .seo-hero-result {
    margin: 20px 0 0;
    padding: 19px;
  }

  .seo-hero-visitor {
    width: 100%;
    margin: 18px 0 0;
  }

  .seo-publish-story {
    min-height: 0;
    padding: 30px 18px;
    border-radius: 1.5rem;
  }

  .seo-publish-story__copy h3 {
    font-size: 2.65rem;
  }

  .seo-publish-stage {
    height: 380px;
  }

  .seo-publish-panel,
  .seo-publish-pages {
    inset: 15px;
  }

  .seo-publish-product {
    grid-template-columns: 68px minmax(0, 1fr) 30px;
  }

  .seo-publish-product__visual {
    width: 68px;
    height: 68px;
  }

  .seo-publish-product__visual::before {
    right: 18px;
    bottom: 10px;
    width: 33px;
    height: 39px;
  }

  .seo-publish-product__visual::after {
    right: 9px;
    bottom: 19px;
    width: 19px;
    height: 22px;
  }

  .seo-publish-cursor,
  .seo-publish-pulse {
    display: none;
  }

  .seo-brand-plate {
    margin-bottom: 44px;
    padding: 72px 0;
  }

  .seo-brand-copy .h2 {
    font-size: clamp(2rem, 8.5vw, 2.35rem);
    line-height: .96;
  }

  .seo-brand-copy .text-l,
  .seo-traffic-layout .text-l {
    max-width: none;
    font-size: 1.05rem;
    line-height: 1.45;
  }

  .seo-responsibility-card {
    padding: 26px 22px;
    border-radius: 24px;
  }

  .seo-recommendation-card {
    min-height: 260px;
    padding: 26px 22px;
  }

  .seo-recommendation-card h3 {
    min-height: 0;
    align-items: flex-start;
  }

  .seo-brand-visual {
    min-height: 530px;
    padding: 20px 14px;
  }

  .seo-brand-fields {
    grid-template-columns: 1fr;
  }

  .seo-brand-fields span {
    min-height: 54px;
  }

  .seo-technical-section .seo-origin-layout {
    margin-top: 72px;
    padding-top: 72px;
  }

  .seo-origin-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-origin-visual {
    min-width: 0;
    min-height: 420px;
    padding: 22px 16px;
    border-radius: 24px;
  }

  .seo-origin-visual__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .seo-origin-status {
    right: 15px;
    bottom: 15px;
  }

  .seo-traffic-visual {
    min-height: 500px;
    padding: 22px 16px;
  }

  .seo-traffic-sources {
    gap: 7px;
  }

  .seo-traffic-sources > span {
    min-height: 88px;
    padding: 10px 5px;
    grid-template-columns: 1fr;
    grid-template-rows: 26px auto;
    justify-items: center;
    row-gap: 7px;
    text-align: center;
  }

  .seo-traffic-sources i {
    width: 24px;
    height: 24px;
    grid-row: auto;
  }

  .seo-traffic-sources strong {
    font-size: .67rem;
    white-space: nowrap;
  }

  .seo-traffic-sources small {
    display: none;
  }

  .seo-traffic-storefront__body {
    min-height: 224px;
    padding: 18px 14px 72px;
    grid-template-columns: minmax(0, .85fr) minmax(132px, 1.15fr);
    gap: 12px;
  }

  .seo-traffic-storefront__body strong {
    font-size: 1.2rem;
  }

  .seo-traffic-products i {
    min-height: 94px;
  }

  .seo-search-cta {
    padding-top: 0;
  }

  .seo-search-cta__card {
    padding: 48px 18px;
    border-radius: 1.5rem;
  }

  .seo-search-cta__card .text-l {
    max-width: 360px;
    font-size: 1.05rem;
    line-height: 1.4;
  }

  .seo-search-cta__card .btn {
    width: 100%;
    justify-content: center;
  }
}

.capabilities-section {
  padding-top: 48px;
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.capability-section-sign {
  position: relative;
  width: 68px;
  height: 68px;
  display: grid;
  margin: 0 auto 26px;
  place-items: center;
  border: 2.5px solid #0d0d0d;
  border-radius: 20px;
  background: #fbda5f;
  box-shadow: 5px 6px 0 #0d0d0d;
  color: #0d0d0d;
  transform: rotate(-3deg);
  animation: capabilitySign 3.8s ease-in-out infinite;
}

.capability-section-sign::after {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #0d0d0d;
  border-radius: 50%;
  content: "";
  opacity: 0;
  animation: capabilitySignPulse 3.8s ease-out infinite;
}

.capability-section-sign svg {
  width: 31px;
  height: 31px;
}

@keyframes capabilitySign {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}

@keyframes capabilitySignPulse {
  0%, 45% { opacity: 0; transform: scale(.5); }
  52% { opacity: .55; }
  72%, 100% { opacity: 0; transform: scale(3.2); }
}

.capability-card {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: 2rem;
  padding: clamp(30px, 4vw, 56px);
  isolation: isolate;
}

.capability-card::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1.5px solid rgba(13, 13, 13, .08);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.capability-card--notifications {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  min-height: 620px;
  background: #f0f1f2;
}

.capability-card--domain {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  min-height: 620px;
  background: #fbda5f;
}

.capability-card--publisher {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(440px, 1.12fr);
  grid-template-areas:
    "copy demo"
    "cta demo";
  grid-template-rows: auto auto;
  align-content: center;
  align-items: start;
  column-gap: 54px;
  row-gap: 26px;
  min-height: 450px;
  background: #f0f1f2;
  color: #0d0d0d;
}

.capability-card--publisher .capability-card__copy {
  grid-area: copy;
}

.capability-card--publisher .publisher-demo {
  grid-area: demo;
  align-self: center;
}

.capability-card--publisher > .capability-card__cta {
  grid-area: cta;
  margin-top: 0;
  justify-self: start;
}

.capability-card__copy {
  position: relative;
  z-index: 2;
  display: flex;
  max-width: 530px;
  flex-direction: column;
  align-items: flex-start;
}

.capability-card__title {
  max-width: 100%;
  margin-top: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 4rem);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.04;
  text-transform: uppercase;
  -webkit-text-stroke: 1.5px currentColor;
}

.capability-card__text {
  max-width: 43ch;
  margin-top: 20px;
  color: #585858;
  font-size: 1.04rem;
  line-height: 1.48;
}

.capability-card--publisher .capability-card__text {
  color: #585858;
}

.capability-card__actions {
  display: flex;
  margin-top: 26px;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.capability-card--domain .capability-card__actions {
  width: 100%;
  flex-wrap: nowrap;
  gap: 10px;
}

.capability-card--domain .capability-card__actions > * {
  min-width: 0;
  flex: 1 1 0;
  font-size: .9rem;
  white-space: nowrap;
}

.capability-card__cta {
  margin-top: 26px;
  white-space: nowrap;
}

.capability-card--notifications > .capability-card__cta {
  align-self: flex-start;
  margin-top: 20px;
}

.capability-card__actions .capability-card__cta,
.capability-card__actions .capability-card__link {
  min-height: 55px;
  margin-top: 0;
  padding: 0 28px;
  justify-content: center;
}

.capability-card--domain .capability-card__cta {
  background: #0d0d0d;
  color: #fff;
}

.capability-card--domain .capability-card__cta:hover {
  background: #262626;
}

.capability-card__link {
  display: inline-flex;
  margin-top: 26px;
  align-items: center;
  gap: 9px;
  border: 2px solid #0d0d0d;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s, transform .2s var(--ease-spring);
}

.capability-card__link::after {
  content: "→";
  font-size: 1.2em;
  transition: transform .2s ease;
}

.capability-card__link:hover::after {
  transform: translateX(5px);
}

.capability-card__link:hover {
  background: rgba(13, 13, 13, .07);
  transform: scale(1.04);
}

.capability-card__link:active {
  transform: scale(.97);
}

.capability-card__channels {
  display: flex;
  margin-top: 28px;
  flex-wrap: wrap;
  gap: 8px;
}

.capability-channel {
  display: inline-flex;
  min-height: 36px;
  padding: 0 13px;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #0d0d0d;
  border-radius: 999px;
  background: #fff;
  font-size: .8rem;
  font-weight: 650;
}

.capability-channel img,
.capability-channel svg {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.notification-demo {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 174px;
  margin-top: auto;
  padding: 10px 16px;
  align-content: center;
  gap: 0;
  overflow: hidden;
  border: 1.5px solid #d8d8d8;
  border-radius: 1.25rem;
  background: #fff;
}

.notification-source {
  position: absolute;
  inset: 42px 16px;
  z-index: 2;
  display: flex;
  padding: 0 18px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 2.5px solid #0d0d0d;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 5px 6px 0 #0d0d0d;
  opacity: 0;
}

.notification-source small,
.notification-source strong {
  display: block;
}

.notification-source small {
  color: #727272;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.notification-source strong {
  margin-top: 4px;
  font-size: .86rem;
}

.notification-source > i {
  min-height: 30px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  background: #c6fb50;
  font-size: .65rem;
  font-style: normal;
  font-weight: 750;
}

.notification-stream__item {
  display: grid;
  min-height: 48px;
  padding: 4px 0;
  grid-template-columns: 38px 1fr 26px;
  align-items: center;
  gap: 10px;
  opacity: 0;
}

.notification-stream__item:not(:last-child) {
  border-bottom: 1px solid #e7e7e7;
}

.capability-card.playing .notification-source {
  animation: notificationSource 8s var(--ease-exp) infinite;
}

.capability-card.playing .notification-stream__item:nth-child(2) {
  animation: notificationStream1 8s var(--ease-spring) infinite;
}

.capability-card.playing .notification-stream__item:nth-child(3) {
  animation: notificationStream2 8s var(--ease-spring) infinite;
}

.capability-card.playing .notification-stream__item:nth-child(4) {
  animation: notificationStream3 8s var(--ease-spring) infinite;
}

.notification-stream__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #f0f1f2;
}

.notification-stream__icon img,
.notification-stream__icon svg {
  width: 21px;
  height: 21px;
  object-fit: contain;
}

.notification-stream__item span:nth-child(2) {
  min-width: 0;
}

.notification-stream__item strong,
.notification-stream__item small {
  display: block;
}

.notification-stream__item strong {
  font-size: .82rem;
}

.notification-stream__item small {
  margin-top: 2px;
  color: #777;
  font-size: .69rem;
}

.notification-stream__item i {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #c6fb50;
  font-style: normal;
  font-weight: 800;
}

@keyframes notificationSource {
  0%, 5% { opacity: 0; transform: translateY(14px) scale(.96); }
  11%, 27% { opacity: 1; transform: translateY(0) scale(1); }
  34%, 100% { opacity: 0; transform: translateY(-10px) scale(.97); }
}

@keyframes notificationStream1 {
  0%, 31% { opacity: 0; transform: translateX(-16px); }
  39%, 90% { opacity: 1; transform: translateX(0); }
  98%, 100% { opacity: 0; transform: translateX(8px); }
}

@keyframes notificationStream2 {
  0%, 39% { opacity: 0; transform: translateX(-16px); }
  47%, 90% { opacity: 1; transform: translateX(0); }
  98%, 100% { opacity: 0; transform: translateX(8px); }
}

@keyframes notificationStream3 {
  0%, 47% { opacity: 0; transform: translateX(-16px); }
  55%, 90% { opacity: 1; transform: translateX(0); }
  98%, 100% { opacity: 0; transform: translateX(8px); }
}

.domain-demo {
  width: 100%;
  min-height: 174px;
  margin-top: auto;
  overflow: hidden;
  border: 1.5px solid #d8d8d8;
  border-radius: 1.25rem;
  background: #fff;
}

.domain-card-animation {
  position: relative;
}

.domain-card-scene {
  position: absolute;
  inset: 18px 16px;
  display: grid;
  padding: 13px 16px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  border: 1.5px solid #dedede;
  border-radius: 1.05rem;
  background: #f4f4f4;
  opacity: 0;
}

.domain-card-scene small,
.domain-card-scene strong {
  display: block;
}

.domain-card-scene small {
  color: #727272;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.domain-card-scene strong {
  margin-top: 4px;
  overflow: hidden;
  font: 750 clamp(.78rem, 1.6vw, .94rem)/1.2 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-card-scene--input {
}

.domain-card-scene--input > b {
  min-height: 34px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  background: #0d0d0d;
  box-shadow: 0 3px 0 rgba(13, 13, 13, .28);
  color: #fff;
  font-size: .65rem;
}

.domain-card-scene--checking {
  grid-template-columns: 34px 1fr auto;
}

.domain-card-scene--checking > i {
  width: 30px;
  height: 30px;
  border: 3px solid #e8e8e8;
  border-top-color: #0d0d0d;
  border-radius: 50%;
}

.domain-card-scene--checking > b {
  letter-spacing: .1em;
}

.domain-card-scene--success {
  grid-template-columns: 42px 1fr;
}

.domain-card-scene__lock {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #c6fb50;
}

.domain-card-scene__lock svg {
  width: 22px;
}

.domain-card-cursor {
  position: absolute;
  z-index: 4;
  width: 30px;
  height: auto;
  top: 91px;
  right: 42px;
}

.domain-card-pulse {
  position: absolute;
  z-index: 3;
  width: 44px;
  height: 44px;
  top: 63px;
  right: 63px;
  opacity: 0;
}

.capability-card.playing .domain-card-scene--input { animation: domainCardInput 8.4s linear infinite; }
.capability-card.playing .domain-card-scene--input > b { animation: domainCardButton 8.4s ease infinite; }
.capability-card.playing .domain-card-scene--checking { animation: domainCardChecking 8.4s linear infinite; }
.capability-card.playing .domain-card-scene--checking > i { animation: domainCardSpinner .85s linear infinite; }
.capability-card.playing .domain-card-scene--success { animation: domainCardSuccess 8.4s linear infinite; }
.capability-card.playing .domain-card-cursor { animation: domainCardCursor 8.4s var(--ease-exp) infinite; }
.capability-card.playing .domain-card-pulse { animation: domainCardPulse 8.4s ease-out infinite; }

@keyframes domainCardInput {
  0%, 4% { opacity: 0; transform: translateY(8px); }
  9%, 27% { opacity: 1; transform: translateY(0); }
  32%, 100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes domainCardButton {
  0%, 18% { transform: translateY(0); }
  21%, 24% { transform: translateY(2px) scale(.96); }
  27%, 100% { transform: translateY(0) scale(1); }
}

@keyframes domainCardChecking {
  0%, 29% { opacity: 0; transform: translateY(8px); }
  35%, 58% { opacity: 1; transform: translateY(0); }
  64%, 100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes domainCardSuccess {
  0%, 61% { opacity: 0; transform: translateY(8px); }
  67%, 94% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes domainCardSpinner {
  to { transform: rotate(360deg); }
}

@keyframes domainCardCursor {
  0%, 8% { opacity: 0; transform: translate(45px, 35px) rotate(-8deg); }
  13% { opacity: 1; }
  20%, 27% { opacity: 1; transform: translate(0, 0) rotate(-8deg); }
  33%, 100% { opacity: 0; transform: translate(0, 0) rotate(-8deg); }
}

@keyframes domainCardPulse {
  0%, 19%, 27%, 100% { opacity: 0; transform: scale(.4) rotate(-14deg); }
  22% { opacity: 1; transform: scale(1) rotate(0); }
  26% { opacity: 0; transform: scale(1.45) rotate(6deg); }
}

.publisher-demo {
  position: relative;
  min-height: 320px;
  padding: 26px;
  overflow: hidden;
  border: 1.5px solid #dedede;
  border-radius: 1.5rem;
  background: #fff;
}

.publisher-panel__form {
  position: relative;
  height: 100%;
  animation: none;
}

.publisher-panel__head {
  min-height: 38px;
}

.publisher-panel__head strong,
.publisher-panel__head small,
.publisher-panel__product strong,
.publisher-panel__product small,
.publisher-panel__success strong,
.publisher-panel__success small {
  display: block;
}

.publisher-panel__head strong {
  font-size: .86rem;
}

.publisher-panel__head small,
.publisher-panel__product small,
.publisher-panel__success small {
  margin-top: 3px;
  color: #737373;
  font-size: .66rem;
}

.publisher-panel__product {
  display: grid;
  min-height: 84px;
  margin-top: 15px;
  padding: 9px 12px;
  grid-template-columns: 64px 1fr 28px;
  align-items: center;
  gap: 12px;
  border: 1.5px solid #dfdfdf;
  border-radius: 1rem;
  background: #f4f4f4;
}

.publisher-panel__product > i,
.publisher-panel__channels i {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #c6fb50;
  font-style: normal;
  font-weight: 800;
}

.publisher-panel__image {
  width: 64px;
  height: 64px;
  border-radius: .75rem;
  object-fit: cover;
}

.publisher-panel__channels {
  display: grid;
  margin-top: 12px;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.publisher-panel__channels > span {
  min-height: 40px;
  display: grid;
  padding: 0 10px;
  grid-template-columns: 21px 1fr 22px;
  align-items: center;
  gap: 7px;
  border-radius: .8rem;
  background: #f4f4f4;
  font-size: .68rem;
  font-weight: 750;
}

.publisher-panel__channels img {
  width: 21px;
  height: 21px;
  object-fit: contain;
}

.publisher-panel__channels i {
  width: 22px;
  height: 22px;
  font-size: .7rem;
}

.publisher-panel__button {
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  border: 2px solid #0d0d0d;
  border-radius: 999px;
  background: #fbda5f;
  box-shadow: 0 3px 0 #0d0d0d;
  color: #0d0d0d;
  font: 750 .78rem/1 var(--font-body);
}

.publisher-panel__success {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 28px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  text-align: center;
  opacity: 0;
  transform: scale(.9);
  visibility: hidden;
}

.publisher-panel__success-icon {
  width: 64px;
  height: 64px;
  display: grid;
  margin-bottom: 18px;
  place-items: center;
  border: 2.5px solid #0d0d0d;
  border-radius: 50%;
  background: #fbda5f;
  box-shadow: 0 4px 0 #0d0d0d;
}

.publisher-panel__success-icon svg {
  width: 28px;
}

.publisher-panel__success > strong {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1;
  text-transform: uppercase;
  -webkit-text-stroke: .7px currentColor;
}

.publisher-panel__success-channels {
  display: flex;
  margin-top: 18px;
  gap: 9px;
}

.publisher-panel__success-channels img {
  width: 38px;
  height: 38px;
  padding: 8px;
  border: 1.5px solid #0d0d0d;
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
}

.publisher-panel__cursor {
  position: absolute;
  z-index: 4;
  width: 34px;
  height: auto;
  right: 24%;
  bottom: 48px;
}

.publisher-panel__pulse {
  position: absolute;
  z-index: 3;
  width: 44px;
  height: 44px;
  right: calc(33% - 10px);
  bottom: 49px;
  opacity: 0;
}

.capability-card.playing .publisher-panel__form { animation: publisherForm 7.2s var(--ease-exp) infinite; }
.capability-card.playing .publisher-panel__button { animation: publisherButton 7.2s ease-in-out infinite; }
.capability-card.playing .publisher-panel__success { animation: publisherSuccess 7.2s var(--ease-spring) infinite; }
.capability-card.playing .publisher-panel__cursor { animation: publisherPanelCursor 7.2s var(--ease-exp) infinite; }
.capability-card.playing .publisher-panel__pulse { animation: publisherPanelPulse 7.2s ease-out infinite; }

@keyframes publisherForm {
  0%, 53% { opacity: 1; transform: scale(1); visibility: visible; }
  59% { opacity: 0; transform: scale(.97); visibility: visible; }
  59.01%, 93% { opacity: 0; transform: scale(.97); visibility: hidden; }
  100% { opacity: 1; transform: scale(1); visibility: visible; }
}

@keyframes publisherButton {
  0%, 36%, 100% { transform: translateY(0) scale(1); box-shadow: 0 3px 0 #0d0d0d; }
  40%, 45% { transform: translateY(2px) scale(.98); box-shadow: 0 1px 0 #0d0d0d; }
  50% { transform: translateY(0) scale(1); box-shadow: 0 3px 0 #0d0d0d; }
}

@keyframes publisherSuccess {
  0%, 59% { opacity: 0; transform: scale(.9); visibility: hidden; }
  59.01% { opacity: 0; transform: scale(.9); visibility: visible; }
  67%, 91% { opacity: 1; transform: scale(1); visibility: visible; }
  97% { opacity: 0; transform: scale(.96); visibility: visible; }
  97.01%, 100% { opacity: 0; transform: scale(.96); visibility: hidden; }
}

@keyframes publisherPanelCursor {
  0%, 16% { opacity: 0; transform: translate(32px, 24px) rotate(-8deg); }
  24% { opacity: 1; }
  34%, 46% { opacity: 1; transform: translate(0, 0) rotate(-8deg); }
  54%, 100% { opacity: 0; transform: translate(0, 0) rotate(-8deg); }
}

@keyframes publisherPanelPulse {
  0%, 34%, 47%, 100% { opacity: 0; transform: scale(.4) rotate(-14deg); }
  39% { opacity: 1; transform: scale(1) rotate(0); }
  46% { opacity: 0; transform: scale(1.45) rotate(6deg); }
}


/* Domain page: the same four-card sticky stack used by the home page. */
.domain-how .step-badge {
  display: inline-flex;
  width: max-content;
  margin-bottom: 6px;
  padding: 9px 16px;
  align-items: center;
  border-radius: 100rem;
  background: var(--dark);
  color: #fff;
  font: 600 .875rem/1 var(--font-body);
  letter-spacing: -.01em;
}

.domain-how .sp-3 .step-badge {
  background: var(--brand);
  color: var(--dark);
}

.domain-how .stack {
  width: min(1280px, calc(100% - 48px));
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  gap: 32px;
}

.domain-how .stack-plate {
  position: sticky;
  top: 90px;
  display: grid;
  min-height: 480px;
  overflow: hidden;
  grid-template-columns: 1fr 1.2fr;
  border-radius: var(--radius-plate);
  transform-origin: top center;
  will-change: transform;
}

.domain-how .sp-copy {
  display: flex;
  padding: 56px 20px 56px 52px;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.domain-how .sp-copy p {
  max-width: 38ch;
}

.domain-how .sp-demo {
  position: relative;
  display: grid;
  padding: 44px;
  place-items: center;
}

.domain-how .sp-1 { background: var(--bg-card-alt); }
.domain-how .sp-d { background: var(--brand-tint-1); }
.domain-how .sp-2 { background: var(--brand); }
.domain-how .sp-2 p { color: rgba(13, 13, 13, .75); }
.domain-how .sp-3 { background: var(--dark); color: var(--light); }
.domain-how .sp-3 .h3 { color: var(--brand); }
.domain-how .sp-3 p { color: #cfcfcf; }

.domain-step-stage {
  position: relative;
  width: 100%;
  height: 360px;
  display: grid;
  overflow: hidden;
  place-items: center;
  border-radius: 1.5rem;
  background: #fff;
  color: #0d0d0d;
}

.domain-step-form {
  width: min(380px, calc(100% - 40px));
  padding: 24px;
  border: 2.5px solid #0d0d0d;
  border-radius: 1.1rem;
  background: #f4f4f4;
  box-shadow: 0 5px 0 #0d0d0d;
}

.domain-step-form small,
.domain-step-form strong {
  display: block;
}

.domain-step-form small {
  color: #6d6d6d;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.domain-step-form strong {
  min-height: 56px;
  margin-top: 12px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 2px solid #0d0d0d;
  border-radius: .85rem;
  background: #fff;
  font: 700 .8rem/1 var(--font-mono);
  white-space: nowrap;
}

.domain-step-form button {
  min-height: 46px;
  margin-top: 14px;
  padding: 0 18px;
  border: 2px solid #0d0d0d;
  border-radius: 999px;
  background: #0d0d0d;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
}

.domain-step-cursor {
  position: absolute;
  z-index: 5;
  width: 38px;
  height: auto;
  left: 50%;
  top: 50%;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .22));
  opacity: 0;
  pointer-events: none;
}

.domain-step-add .domain-step-pulse {
  left: calc(50% - 123px);
  top: calc(50% + 2px);
}

.domain-step-add.playing .domain-step-cursor { animation: domainStepAddCursor 8s infinite; }
.domain-step-add.playing .domain-step-pulse { animation: domainStepAddPulse 8s ease-out infinite; }
.domain-step-add.playing .domain-step-form button { animation: domainStepAddButton 8s ease-in-out infinite; }

@keyframes domainStepAddCursor {
  0%, 7% { opacity: 0; transform: translate(180px, 145px); }
  10% { opacity: 1; transform: translate(155px, 125px); animation-timing-function: cubic-bezier(.1, .9, .15, 1); }
  18%, 28% { opacity: 1; transform: translate(-110px, 20px); }
  22% { transform: translate(-110px, 22px) scale(.82); }
  36%, 100% { opacity: 0; transform: translate(180px, 145px); }
}

@keyframes domainStepAddPulse {
  0%, 20%, 31%, 100% { opacity: 0; transform: scale(.4) rotate(-14deg); }
  23% { opacity: 1; transform: scale(1) rotate(0); }
  30% { opacity: 0; transform: scale(1.45) rotate(6deg); }
}

@keyframes domainStepAddButton {
  0%, 20%, 28%, 100% { transform: translateY(0) scale(1); }
  23% { transform: translateY(2px) scale(.96); }
}

.domain-step-dns-card {
  width: min(520px, calc(100% - 34px));
  padding: 22px;
  border: 2.5px solid #0d0d0d;
  border-radius: 1.15rem;
  background: #fff;
  box-shadow: 0 5px 0 #0d0d0d;
}

.domain-step-dns-head {
  display: flex;
  padding-bottom: 16px;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1.5px solid #e2e2e2;
}

.domain-step-dns-head strong { font-size: 1rem; }
.domain-step-dns-head small { color: #6d6d6d; font-size: .68rem; }

.domain-step-dns-row {
  min-height: 58px;
  display: grid;
  margin-top: 9px;
  padding: 0 12px;
  grid-template-columns: 32px 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #dedede;
  border-radius: .85rem;
  background: #f5f5f5;
  font-size: .72rem;
}

.domain-step-dns-row code {
  overflow: hidden;
  font: 700 .7rem/1 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-step-dns-row i {
  position: relative;
  min-width: 92px;
  min-height: 32px;
  display: grid;
  place-items: center;
  border: 1.5px solid #0d0d0d;
  border-radius: 999px;
  background: #fff;
  font-size: .62rem;
  font-style: normal;
  font-weight: 700;
}

.domain-step-dns-row i::after {
  position: absolute;
  display: grid;
  inset: 0;
  place-items: center;
  border-radius: inherit;
  background: #c6fb50;
  color: #0d0d0d;
  content: "✓";
  opacity: 0;
}

.domain-step-dns .domain-step-pulse--one {
  left: calc(50% + 174px);
  top: calc(50% - 50px);
}

.domain-step-dns .domain-step-pulse--two {
  left: calc(50% + 174px);
  top: calc(50% + 17px);
}

.domain-step-dns.playing .domain-step-cursor { animation: domainStepDnsCursor 9s infinite; }
.domain-step-dns.playing .domain-step-pulse--one { animation: domainStepDnsPulse1 9s ease-out infinite; }
.domain-step-dns.playing .domain-step-pulse--two { animation: domainStepDnsPulse2 9s ease-out infinite; }
.domain-step-dns.playing .domain-step-dns-row:nth-child(2) i::after { animation: domainStepDnsCopied1 9s var(--ease-spring) infinite; }
.domain-step-dns.playing .domain-step-dns-row:nth-child(3) i::after { animation: domainStepDnsCopied2 9s var(--ease-spring) infinite; }

@keyframes domainStepDnsCursor {
  0%, 7% { opacity: 0; transform: translate(230px, 145px); }
  10% { opacity: 1; transform: translate(215px, 125px); }
  18%, 31% { opacity: 1; transform: translate(185px, -29px); }
  23% { transform: translate(185px, -27px) scale(.82); }
  43%, 59% { opacity: 1; transform: translate(185px, 38px); }
  49% { transform: translate(185px, 40px) scale(.82); }
  68%, 100% { opacity: 0; transform: translate(230px, 145px); }
}

@keyframes domainStepDnsPulse1 {
  0%, 20%, 31%, 100% { opacity: 0; transform: scale(.4) rotate(-14deg); }
  23% { opacity: 1; transform: scale(1); }
  30% { opacity: 0; transform: scale(1.45) rotate(6deg); }
}

@keyframes domainStepDnsPulse2 {
  0%, 46%, 57%, 100% { opacity: 0; transform: scale(.4) rotate(-14deg); }
  49% { opacity: 1; transform: scale(1); }
  56% { opacity: 0; transform: scale(1.45) rotate(6deg); }
}

@keyframes domainStepDnsCopied1 {
  0%, 22% { opacity: 0; transform: scale(.7); }
  27%, 92% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; }
}

@keyframes domainStepDnsCopied2 {
  0%, 48% { opacity: 0; transform: scale(.7); }
  53%, 92% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; }
}

.domain-step-check-card {
  width: min(470px, calc(100% - 40px));
  padding: 26px;
  border: 2.5px solid #0d0d0d;
  border-radius: 1.15rem;
  background: #fff;
  box-shadow: 0 5px 0 #0d0d0d;
}

.domain-step-check-card > strong {
  display: block;
  margin-bottom: 15px;
  font-size: 1.05rem;
}

.domain-step-check-card > span {
  min-height: 54px;
  display: grid;
  padding: 0 12px;
  grid-template-columns: 30px 1fr 26px;
  align-items: center;
  gap: 9px;
  border-top: 1px solid #e2e2e2;
}

.domain-step-check-card span > i,
.domain-step-check-card span > em {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
  font-weight: 800;
}

.domain-step-check-card span > i { background: #f0f1f2; font-size: .66rem; }
.domain-step-check-card span > b { font-size: .76rem; }
.domain-step-check-card span > em { background: #c6fb50; opacity: 0; transform: scale(.5); }
.domain-step-check.playing .domain-step-check-card span:nth-child(2) > em { animation: domainStepCheck1 8s var(--ease-spring) infinite; }
.domain-step-check.playing .domain-step-check-card span:nth-child(3) > em { animation: domainStepCheck2 8s var(--ease-spring) infinite; }
.domain-step-check.playing .domain-step-check-card span:nth-child(4) > em { animation: domainStepCheck3 8s var(--ease-spring) infinite; }

@keyframes domainStepCheck1 { 0%, 12% { opacity: 0; transform: scale(.5); } 20%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes domainStepCheck2 { 0%, 34% { opacity: 0; transform: scale(.5); } 42%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes domainStepCheck3 { 0%, 58% { opacity: 0; transform: scale(.5); } 66%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

.domain-step-live { height: 380px; }

.domain-step-browser {
  width: min(520px, calc(100% - 40px));
  height: 296px;
  overflow: hidden;
  border: 2.5px solid #0d0d0d;
  border-radius: 1.1rem;
  background: #fff;
  box-shadow: 0 5px 0 #0d0d0d;
}

.domain-step-browser-bar {
  min-height: 48px;
  display: flex;
  padding: 0 12px;
  align-items: center;
  border-bottom: 2px solid #0d0d0d;
  background: #f0f1f2;
}

.domain-step-browser-bar span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  font: 700 .67rem/1 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-step-browser-bar svg { width: 15px; flex: 0 0 15px; }
.domain-step-browser-page { will-change: transform; }
.domain-step-live.playing .domain-step-browser-page { animation: domainStepLiveScroll 9s var(--ease-exp) infinite; }
.domain-step-browser-cover { height: 66px; border-bottom: 2px solid #0d0d0d; background: #fbda5f; }

.domain-step-browser-profile {
  min-height: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e2e2e2;
}

.domain-step-browser-profile i {
  width: 37px;
  height: 37px;
  display: grid;
  margin-top: -25px;
  place-items: center;
  border: 2px solid #0d0d0d;
  border-radius: 50%;
  background: #fff;
  font-style: normal;
}

.domain-step-browser-profile strong { margin-top: 5px; font-family: var(--font-display); text-transform: uppercase; }
.domain-step-browser-profile small { margin-top: 2px; color: #6d6d6d; font-size: .58rem; }
.domain-step-browser-products { display: grid; padding: 10px; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.domain-step-browser-products img { width: 100%; height: 92px; border-radius: .55rem; object-fit: cover; }

.domain-step-live-status {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  min-width: 250px;
  min-height: 72px;
  display: grid;
  padding: 10px 14px;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 10px;
  border: 2.5px solid #0d0d0d;
  border-radius: 1rem;
  background: #fbda5f;
  box-shadow: 0 5px 0 #0d0d0d;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 18px)) scale(.88);
}

.domain-step-live-status > i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  font-style: normal;
  font-weight: 800;
}

.domain-step-live-status strong,
.domain-step-live-status small { display: block; }
.domain-step-live-status strong { font-size: .78rem; }
.domain-step-live-status small { margin-top: 3px; font-size: .62rem; }
.domain-step-live.playing .domain-step-live-status { animation: domainStepLiveStatus 9s var(--ease-spring) infinite; }

@keyframes domainStepLiveScroll { 0%, 18% { transform: translateY(0); } 55%, 86% { transform: translateY(-62px); } 100% { transform: translateY(0); } }
@keyframes domainStepLiveStatus { 0%, 58% { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(.88); } 68%, 90% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, calc(-50% - 10px)) scale(.94); } }

/* Domain landing page. */
.domain-page-hero {
  padding-bottom: 70px;
}

.domain-page-hero .h1 {
  max-width: 1040px;
  margin: 0 auto;
}

.domain-page-hero__actions {
  display: flex;
  margin-top: 30px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.domain-connect-demo {
  position: relative;
  width: min(1280px, calc(100% - 48px));
  min-height: 560px;
  margin: 30px auto 0;
  overflow: hidden;
  border-radius: 2rem;
  background: #f0f1f2;
  isolation: isolate;
}

.domain-connect-scene {
  position: absolute;
  inset: 0;
  display: grid;
  padding: 54px;
  place-items: center;
  opacity: 0;
}

.domain-connect-scene--input {
  animation: domainSceneInput 18s var(--ease-exp) infinite;
}

.domain-connect-scene--dns {
  animation: domainSceneDns 18s var(--ease-exp) infinite;
}

.domain-connect-scene--success {
  animation: domainSceneSuccess 18s var(--ease-exp) infinite;
}

.domain-connect-scene--storefront {
  animation: domainSceneStorefront 18s var(--ease-exp) infinite;
}

.domain-connect-card {
  width: min(100%, 610px);
  border: 2.5px solid #0d0d0d;
  border-radius: 1.45rem;
  background: #fff;
  box-shadow: 12px 14px 0 #0d0d0d;
}

.domain-connect-input {
  padding: 38px;
}

.domain-connect-input > small,
.domain-success-card > small {
  display: block;
  color: #6d6d6d;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.domain-connect-input > strong {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.35rem);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: .95;
  text-transform: uppercase;
  -webkit-text-stroke: 1.25px currentColor;
}

.domain-connect-input__field {
  min-height: 64px;
  margin-top: 30px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  border: 2px solid #0d0d0d;
  border-radius: 1rem;
  font: 700 clamp(.88rem, 2vw, 1rem)/1 var(--font-mono);
}

.domain-connect-input__button {
  width: max-content;
  min-height: 48px;
  margin-top: 16px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  border: 2px solid #0d0d0d;
  border-radius: 999px;
  background: #0d0d0d;
  color: #fff;
  font-size: .85rem;
  font-weight: 750;
  animation: domainConnectButton 18s ease-in-out infinite;
}

.domain-dns-card {
  padding: 28px;
}

.domain-dns-card__head {
  display: flex;
  padding-bottom: 22px;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1.5px solid #e3e3e3;
}

.domain-dns-card__head span {
  font-size: 1.18rem;
  font-weight: 800;
}

.domain-dns-card__head small {
  color: #6d6d6d;
  font-size: .73rem;
}

.domain-dns-card__labels,
.domain-dns-card__row {
  display: grid;
  grid-template-columns: 54px 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.domain-dns-card__labels {
  padding: 17px 15px 8px;
  color: #777;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
}

.domain-dns-card__row {
  min-height: 58px;
  margin-top: 7px;
  padding: 0 15px;
  border: 1.5px solid #dddddd;
  border-radius: .9rem;
  background: #f7f7f7;
  font-size: .82rem;
}

.domain-dns-card__row code {
  overflow: hidden;
  font: 700 .8rem/1 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-dns-card__checking {
  display: flex;
  min-height: 48px;
  margin-top: 18px;
  padding: 0 15px;
  align-items: center;
  gap: 9px;
  border-radius: .9rem;
  background: #fff8de;
  font-size: .78rem;
  font-weight: 700;
}

.domain-dns-card__checking i {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border: 1.5px solid #0d0d0d;
  border-radius: 50%;
  background: #fbda5f;
  animation: domainChecking 1s ease-in-out infinite;
}

.domain-dns-card__checking b {
  margin-left: auto;
  letter-spacing: .12em;
}

.domain-success-card {
  width: min(100%, 540px);
  padding: 44px 38px;
  text-align: center;
}

.domain-success-card__icon {
  width: 78px;
  height: 78px;
  display: grid;
  margin: 0 auto 24px;
  place-items: center;
  border: 2.5px solid #0d0d0d;
  border-radius: 22px;
  background: #fbda5f;
  box-shadow: 5px 6px 0 #0d0d0d;
  transform: rotate(-3deg);
  animation: domainSuccessIcon 1.8s ease-in-out infinite;
}

.domain-success-card__icon svg {
  width: 39px;
  height: 39px;
}

.domain-success-card > strong {
  display: block;
  margin-top: 12px;
  overflow: hidden;
  font: 750 clamp(1.2rem, 3vw, 1.72rem)/1.2 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-success-card__secure {
  display: inline-flex;
  min-height: 38px;
  margin-top: 25px;
  padding: 0 14px;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: #eefbd2;
  font-size: .76rem;
  font-weight: 750;
}

.domain-success-card__secure i {
  width: 9px;
  height: 9px;
  border: 1.5px solid #0d0d0d;
  border-radius: 50%;
  background: #c6fb50;
}

.domain-storefront-window {
  width: min(100%, 760px);
  height: 440px;
  overflow: hidden;
  border: 2.5px solid #0d0d0d;
  border-radius: 1.45rem;
  background: #fff;
  box-shadow: 12px 14px 0 #0d0d0d;
}

.domain-storefront-bar {
  min-height: 68px;
  display: grid;
  padding: 0 18px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  border-bottom: 2px solid #0d0d0d;
  background: #fff;
}

.domain-storefront-dots {
  display: flex;
  gap: 5px;
}

.domain-storefront-dots i {
  width: 9px;
  height: 9px;
  border: 1.5px solid #0d0d0d;
  border-radius: 50%;
  background: #fbda5f;
}

.domain-storefront-url {
  min-width: 0;
  min-height: 40px;
  display: grid;
  padding: 0 13px;
  grid-template-columns: 17px minmax(0, 1fr) 2px;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #f0f1f2;
}

.domain-storefront-url svg {
  width: 17px;
}

.domain-storefront-url strong {
  overflow: hidden;
  font: 700 .78rem/1 var(--font-mono);
  text-overflow: clip;
  white-space: nowrap;
  animation: domainStorefrontType 18s steps(20, end) infinite;
}

.domain-storefront-url > i {
  width: 2px;
  height: 17px;
  background: #0d0d0d;
  animation: domainStorefrontCaret 18s steps(1, end) infinite;
}

.domain-storefront-preview {
  position: relative;
  height: calc(100% - 68px);
  overflow: hidden;
  background: #fff;
  animation: domainStorefrontPreview 18s var(--ease-exp) infinite;
}

.domain-storefront-page {
  min-height: 100%;
  padding-bottom: 88px;
  animation: domainStorefrontScroll 18s var(--ease-exp) infinite;
}

.domain-storefront-cover {
  height: 76px;
  border-bottom: 2px solid #0d0d0d;
  background: #fbda5f;
}

.domain-storefront-profile {
  position: relative;
  min-height: 100px;
  display: flex;
  padding: 16px 20px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 1.5px solid #e1e1e1;
  text-align: center;
}

.domain-storefront-profile > span {
  position: absolute;
  top: -29px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 2px solid #0d0d0d;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 0 #0d0d0d;
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.domain-storefront-profile strong {
  margin-top: 25px;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  -webkit-text-stroke: .6px currentColor;
}

.domain-storefront-profile small {
  margin-top: 4px;
  color: #6d6d6d;
  font-size: .7rem;
}

.domain-storefront-products {
  display: grid;
  padding: 14px 18px 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.domain-storefront-products > span {
  min-width: 0;
  padding: 7px;
  border: 1.5px solid #dedede;
  border-radius: .8rem;
  background: #fff;
}

.domain-storefront-products img {
  width: 100%;
  height: 82px;
  display: block;
  border-radius: .55rem;
  object-fit: cover;
}

.domain-storefront-products i {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  color: #0d0d0d;
  font-size: .66rem;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-connect-finale {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  padding: 36px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #0d0d0d;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  animation: domainConnectFinale 18s var(--ease-exp) infinite;
}

.domain-connect-finale strong {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 8vw, 7rem);
  font-weight: 400;
  letter-spacing: .035em;
  line-height: .9;
  text-transform: uppercase;
  -webkit-text-stroke: 1.5px currentColor;
}

.domain-connect-finale span {
  margin-top: 18px;
  color: #595959;
  font-size: clamp(.9rem, 2vw, 1.15rem);
}

.domain-connect-finale i {
  width: 76px;
  height: 7px;
  margin-top: 24px;
  border: 2px solid #0d0d0d;
  border-radius: 999px;
  background: #fbda5f;
}

.domain-connect-cursor {
  position: absolute;
  z-index: 4;
  width: 39px;
  height: auto;
  top: calc(50% + 92px);
  left: calc(50% - 210px);
  pointer-events: none;
  animation: domainCursor 18s var(--ease-exp) infinite;
}

.domain-connect-pulse {
  position: absolute;
  z-index: 3;
  top: calc(50% + 73px);
  left: calc(50% - 223px);
  opacity: 0;
  pointer-events: none;
  animation: domainCursorPulse 18s ease-out infinite;
}

@keyframes domainSceneInput {
  0%, 3% { opacity: 0; transform: translateY(18px) scale(.98); }
  6%, 21% { opacity: 1; transform: translateY(0) scale(1); }
  25%, 100% { opacity: 0; transform: translateY(-16px) scale(.98); }
}

@keyframes domainSceneDns {
  0%, 23% { opacity: 0; transform: translateY(18px) scale(.98); }
  27%, 47% { opacity: 1; transform: translateY(0) scale(1); }
  51%, 100% { opacity: 0; transform: translateY(-16px) scale(.98); }
}

@keyframes domainSceneSuccess {
  0%, 49% { opacity: 0; transform: translateY(18px) scale(.98); }
  53%, 65% { opacity: 1; transform: translateY(0) scale(1); }
  69%, 100% { opacity: 0; transform: translateY(-12px) scale(.98); }
}

@keyframes domainSceneStorefront {
  0%, 67% { opacity: 0; transform: translateY(18px) scale(.98); }
  71%, 99% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(.99); }
}

@keyframes domainCursor {
  0%, 7% { opacity: 0; transform: translate(185px, 78px) rotate(-8deg); }
  10% { opacity: 1; }
  16%, 21% { opacity: 1; transform: translate(0, 0) rotate(-8deg); }
  18.5% { transform: translate(0, 2px) scale(.84) rotate(-8deg); }
  24%, 100% { opacity: 0; transform: translate(0, 0) rotate(-8deg); }
}

@keyframes domainCursorPulse {
  0%, 17.5%, 22%, 100% { opacity: 0; transform: scale(.4) rotate(-14deg); }
  18.5% { opacity: 1; transform: scale(1) rotate(0); }
  21.5% { opacity: 0; transform: scale(1.45) rotate(6deg); }
}

@keyframes domainConnectButton {
  0%, 17.5%, 22%, 100% { transform: translateY(0) scale(1); }
  18.5% { transform: translateY(2px) scale(.96); }
}

@keyframes domainStorefrontType {
  0%, 71% { clip-path: inset(0 100% 0 0); }
  80%, 99% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}

@keyframes domainStorefrontCaret {
  0%, 70%, 80%, 100% { opacity: 0; }
  71%, 72%, 74%, 76%, 78% { opacity: 1; }
  73%, 75%, 77%, 79% { opacity: 0; }
}

@keyframes domainStorefrontPreview {
  0%, 80% { opacity: .18; filter: blur(2px); }
  81%, 100% { opacity: 1; filter: blur(0); }
}

@keyframes domainStorefrontScroll {
  0%, 81% { transform: translateY(0); }
  87% { transform: translateY(-28px); }
  100% { transform: translateY(-88px); }
}

@keyframes domainConnectFinale {
  0%, 85% { opacity: 0; transform: scale(.98); }
  88%, 98% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.01); }
}

@keyframes domainChecking {
  0%, 100% { transform: scale(.8); opacity: .55; }
  50% { transform: scale(1.15); opacity: 1; }
}

@keyframes domainSuccessIcon {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}

.domain-steps,
.domain-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.domain-step,
.domain-benefit {
  border-radius: 1.4rem;
  padding: 32px;
}

.domain-step {
  min-height: 275px;
  background: #f0f1f2;
}

.domain-step:nth-child(2) {
  background: #fff8de;
}

.domain-step:nth-child(3) {
  background: #fbda5f;
}

.domain-step__number {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 2px solid #0d0d0d;
  border-radius: 50%;
  background: #fff;
  font: 750 .8rem/1 var(--font-mono);
}

.domain-step h2,
.domain-benefit h2 {
  margin-top: 48px;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: .95;
  text-transform: uppercase;
  -webkit-text-stroke: 1px currentColor;
}

.domain-step p,
.domain-benefit p {
  margin-top: 13px;
  color: #585858;
  font-size: .93rem;
}

.domain-benefit {
  min-height: 240px;
  border: 1.5px solid #e6e6e6;
  background: #fff;
}

.domain-benefit h2 {
  margin-top: 0;
}

.domain-note {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(360px, 1.2fr);
  align-items: center;
  gap: 50px;
}

.domain-snapshot-plate {
  background: #f0f1f2;
  color: #0d0d0d;
}

.domain-note__list {
  display: grid;
  gap: 10px;
}

.domain-note__item {
  display: flex;
  min-height: 66px;
  padding: 13px 16px;
  align-items: center;
  gap: 12px;
  border: 1.5px solid rgba(13, 13, 13, .1);
  border-radius: 1rem;
  background: #fff;
  color: #0d0d0d;
  font-size: .88rem;
}

.domain-note__item span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  background: #fbda5f;
  color: #0d0d0d;
  font-weight: 800;
}

@media (max-width: 980px) {
  .domain-how .stack-plate {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .domain-how .sp-copy {
    padding: 44px 40px 6px;
    justify-content: flex-start;
  }

  .domain-how .sp-demo {
    padding: 20px 32px 44px;
  }

  .capability-card--notifications,
  .capability-card--domain {
    grid-column: 1 / -1;
  }

  .capability-card--publisher {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "demo"
      "cta";
    grid-template-rows: auto;
    row-gap: 24px;
  }

  .publisher-demo {
    width: min(100%, 720px);
    margin: 0 auto;
  }

  .domain-steps,
  .domain-benefits {
    grid-template-columns: 1fr;
  }

  .domain-step,
  .domain-benefit {
    min-height: 0;
  }

  .domain-step h2 {
    margin-top: 32px;
  }

  .domain-note {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .domain-how .stack {
    width: calc(100% - 24px);
    gap: 14px;
  }

  .domain-how .stack-plate {
    position: static;
    border-radius: 1.5rem;
  }

  .domain-how .sp-copy {
    padding: 40px 26px 6px;
  }

  .domain-how .sp-demo {
    padding: 20px 20px 32px;
  }

  .domain-step-stage {
    height: 330px;
    border-radius: 1.15rem;
  }

  .domain-step-live {
    height: 350px;
  }

  .domain-step-cursor,
  .domain-step-pulse {
    display: none;
  }

  .domain-step-form,
  .domain-step-check-card {
    width: calc(100% - 24px);
    padding: 18px;
  }

  .domain-step-dns-card {
    width: calc(100% - 20px);
    padding: 15px;
  }

  .domain-step-dns-head {
    padding-bottom: 12px;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .domain-step-dns-row {
    min-height: 62px;
    padding: 8px;
    grid-template-columns: 25px 34px minmax(0, 1fr);
    gap: 5px;
  }

  .domain-step-dns-row i {
    min-width: 0;
    min-height: 30px;
    grid-column: 1 / -1;
  }

  .domain-step-browser {
    width: calc(100% - 20px);
  }

  .capabilities-section {
    padding-top: 24px;
  }

  .capabilities-grid {
    gap: 12px;
  }

  .capability-card {
    min-height: 500px;
    border-radius: 1.5rem;
    padding: 28px 22px;
  }

  .capability-card--notifications {
    min-height: 552px;
  }

  .capability-card--domain {
    min-height: 552px;
  }

  .capability-card--domain .capability-card__actions {
    width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .capability-card--domain .capability-card__actions > * {
    min-width: 0;
    min-height: 50px;
    padding: 0 8px;
    flex: 1 1 0;
    gap: 4px;
    font-size: .72rem;
    white-space: nowrap;
  }

  .capability-card--domain .capability-card__link::after {
    font-size: 1em;
  }

  .capability-card--publisher {
    min-height: 0;
    row-gap: 20px;
  }

  .capability-card--notifications > .capability-card__cta,
  .capability-card--publisher > .capability-card__cta {
    width: 100%;
    justify-content: center;
    justify-self: stretch;
  }

  .capability-card--notifications > .capability-card__cta {
    margin-top: 18px;
  }

  .capability-card--domain .capability-card__actions {
    margin-top: 18px;
  }

  .capability-card__title {
    max-width: 100%;
    font-size: 2.4rem;
    line-height: 1.06;
  }

  .capability-card__text {
    font-size: .96rem;
  }

  .notification-demo {
    min-height: 174px;
    margin-top: 32px;
    padding: 10px 12px;
  }

  .domain-demo {
    min-height: 174px;
    margin-top: 32px;
  }

  .domain-card-scene {
    inset: 18px 12px;
    padding: 11px 12px;
  }

  .domain-card-cursor {
    top: 91px;
    right: 27px;
  }

  .domain-card-pulse {
    top: 72px;
    right: 59px;
  }

  .publisher-demo {
    width: 100%;
    min-height: 300px;
    padding: 18px;
    border-radius: 1.2rem;
  }

  .publisher-panel__product {
    min-height: 76px;
    margin-top: 13px;
    padding: 7px 9px;
    grid-template-columns: 54px 1fr 26px;
    gap: 8px;
  }

  .publisher-panel__image {
    width: 54px;
    height: 54px;
  }

  .publisher-panel__product strong {
    font-size: .72rem;
  }

  .publisher-panel__channels {
    gap: 7px;
  }

  .publisher-panel__channels > span {
    min-width: 0;
    padding: 0 8px;
    grid-template-columns: 19px minmax(0, 1fr) 20px;
    gap: 5px;
    font-size: .64rem;
  }

  .publisher-panel__channels img {
    width: 19px;
    height: 19px;
  }

  .publisher-panel__channels i {
    width: 20px;
    height: 20px;
  }

  .publisher-panel__button {
    min-height: 48px;
    margin-top: 13px;
  }

  .publisher-panel__success {
    padding: 22px;
  }

  .publisher-panel__success > strong {
    font-size: 1.3rem;
  }

  .publisher-panel__cursor {
    width: 29px;
    right: 20%;
    bottom: 53px;
  }

  .publisher-panel__pulse {
    width: 38px;
    height: 38px;
    right: calc(32% - 8px);
    bottom: 53px;
  }

  .domain-page-hero {
    padding-bottom: 46px;
  }

  .domain-connect-demo {
    width: calc(100% - 24px);
    min-height: 500px;
    border-radius: 1.5rem;
  }

  .domain-connect-scene {
    padding: 24px;
  }

  .domain-connect-card {
    box-shadow: 7px 8px 0 #0d0d0d;
  }

  .domain-storefront-window {
    height: 440px;
    box-shadow: 7px 8px 0 #0d0d0d;
  }

  .domain-storefront-bar {
    padding: 0 10px;
    gap: 8px;
  }

  .domain-storefront-dots {
    display: none;
  }

  .domain-storefront-url {
    padding: 0 10px;
    gap: 6px;
  }

  .domain-storefront-products {
    padding-right: 10px;
    padding-left: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .domain-storefront-products img {
    height: 72px;
  }

  .domain-connect-input,
  .domain-success-card {
    padding: 30px 22px;
  }

  .domain-connect-input > strong {
    font-size: 2.35rem;
  }

  .domain-dns-card {
    padding: 22px 16px;
  }

  .domain-dns-card__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .domain-dns-card__labels,
  .domain-dns-card__row {
    grid-template-columns: 38px 46px minmax(0, 1fr);
    gap: 7px;
  }

  .domain-dns-card__labels {
    padding-right: 10px;
    padding-left: 10px;
  }

  .domain-dns-card__row {
    padding: 0 10px;
  }

  .domain-dns-card__row code {
    font-size: .7rem;
  }

  .domain-connect-cursor,
  .domain-connect-pulse {
    display: none;
  }

  .domain-step,
  .domain-benefit {
    padding: 26px 22px;
  }

  .domain-note {
    gap: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-hero-index,
  .seo-hero-ready,
  .seo-hero-search,
  .seo-hero-search__field span,
  .seo-hero-search__field i,
  .seo-hero-result,
  .seo-hero-visitor,
  .seo-publish-panel,
  .seo-publish-button,
  .seo-publish-pages,
  .seo-publish-pages > span,
  .seo-publish-ready,
  .seo-publish-cursor,
  .seo-publish-pulse,
  .seo-origin-option,
  .seo-origin-catalog,
  .seo-origin-status,
  .seo-brand-fields i,
  .seo-brand-result,
  .seo-traffic-sources > span,
  .seo-traffic-route span,
  .seo-traffic-storefront,
  .seo-traffic-arrival,
  .seo-growth-row > b,
  .seo-growth-result div i,
  .seo-checklist > li > i,
  .capability-section-sign,
  .capability-section-sign::after,
  .notification-source,
  .notification-stream__item,
  .publisher-panel__form,
  .publisher-panel__button,
  .publisher-panel__success,
  .publisher-panel__cursor,
  .publisher-panel__pulse,
  .domain-card-scene,
  .domain-card-scene--checking > i,
  .domain-card-cursor,
  .domain-card-pulse,
  .domain-connect-scene,
  .domain-connect-cursor,
  .domain-connect-pulse,
  .domain-storefront-url strong,
  .domain-storefront-url > i,
  .domain-storefront-preview,
  .domain-storefront-page,
  .domain-connect-finale,
  .domain-dns-card__checking i,
  .domain-success-card__icon,
  .domain-step-form button,
  .domain-step-cursor,
  .domain-step-pulse,
  .domain-step-dns-row i::after,
  .domain-step-check-card span > em,
  .domain-step-browser-page,
  .domain-step-live-status {
    animation: none !important;
  }

  .seo-hero-index,
  .seo-hero-ready,
  .seo-publish-panel,
  .seo-origin-catalog,
  .seo-brand-fields i,
  .seo-brand-result,
  .seo-traffic-sources > span,
  .seo-traffic-route span,
  .seo-traffic-storefront,
  .seo-traffic-arrival,
  .seo-growth-row > b,
  .seo-checklist > li > i {
    opacity: 1;
    transform: none;
  }

  .seo-hero-search,
  .seo-hero-visitor,
  .seo-publish-pages,
  .seo-publish-ready,
  .seo-origin-status,
  .seo-publish-cursor,
  .seo-publish-pulse {
    display: none;
  }

  .seo-growth-result div i {
    width: 88%;
  }

  .notification-stream__item,
  .publisher-panel__button {
    opacity: 1;
    transform: none;
  }

  .publisher-panel__cursor,
  .publisher-panel__pulse,
  .publisher-panel__success,
  .domain-card-cursor,
  .domain-card-pulse {
    display: none;
  }

  .domain-card-scene--input,
  .domain-card-scene--checking {
    display: none;
  }

  .domain-card-scene--success {
    opacity: 1;
    transform: none;
  }

  .domain-connect-scene--input,
  .domain-connect-scene--dns,
  .domain-connect-scene--success,
  .domain-connect-finale {
    display: none;
  }

  .domain-connect-scene--storefront {
    opacity: 1;
    transform: none;
  }

  .domain-storefront-url strong {
    clip-path: none;
  }

  .domain-storefront-url > i {
    display: none;
  }

  .domain-storefront-preview {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .domain-storefront-page {
    transform: none;
  }

  .domain-how .stack-plate {
    position: static;
    transform: none !important;
  }

  .domain-step-cursor,
  .domain-step-pulse,
  .domain-step-live-status {
    display: none;
  }

  .domain-step-check-card span > em {
    opacity: 1;
    transform: none;
  }

  .domain-step-browser-page {
    transform: none;
  }
}

/* Short, readable copy next to the shared-address checklist. */
.domain-note__copy .h2{font-size:clamp(2.7rem,4vw,4rem);line-height:1.02}
.domain-note__copy>p{max-width:510px;margin-top:22px;color:#626262;font-size:1.05rem;line-height:1.55}
.domain-note__copy>p+p{margin-top:14px}
.domain-note__address{white-space:nowrap}
@media(max-width:767px){
  .domain-note__copy .h2{font-size:2.8rem}
  .domain-note__copy>p{font-size:1rem;margin-top:18px}
}