body {
  margin: 0;
  font-family: "Nunito Sans", "Segoe UI", sans-serif;
  color: #111827;
  background: radial-gradient(circle at 18% 0%, rgba(255, 79, 66, 0.12), transparent 32%), linear-gradient(180deg, #fffafa 0%, #f8fafc 42%, #f8fafc 100%);
}

a {
  color: inherit;
}

.shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.hero {
  border-radius: 28px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  padding: 36px;
  box-shadow: 0 20px 60px rgba(239, 68, 68, 0.16);
  overflow: hidden;
}

.hero.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 28px;
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.hero-visual {
  display: grid;
  gap: 14px;
}

.hero-art {
  width: 100%;
  display: block;
  border-radius: 26px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
}

.hero-note {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  padding: 16px 18px;
  backdrop-filter: blur(14px);
}

.hero-note strong {
  display: block;
  font-size: 1rem;
}

.hero-note p {
  margin: 8px 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}

.hero h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1;
}

.hero p {
  margin: 14px 0 0;
  max-width: 720px;
  font-size: 1.08rem;
  line-height: 1.6;
}

.hero-nudge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.16);
  padding: 10px 12px;
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
}


.actions,
.footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid transparent;
}

.btn-primary {
  background: #fff;
  color: #b91c1c;
}

.btn-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.btn-secondary.dark {
  color: #111827;
  border-color: #d1d5db;
}

.grid {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);
}

.photo-card {
  overflow: hidden;
  padding: 0;
}

.card-media {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: block;
  object-fit: cover;
  background: #e5e7eb;
}

.photo-card-body {
  padding: 18px 20px 22px;
}

.eyebrow {
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ef4444;
}

.metric-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.metric {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 11px;
}

.section-header {
  margin-top: 32px;
}

.section-header.compact {
  margin-top: 0;
}

.section-header h2 {
  margin: 0;
}

.section-header p {
  margin: 10px 0 0;
  color: #4b5563;
  line-height: 1.7;
}

.media-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 20px;
  align-items: center;
}

.media-panel img {
  width: 100%;
  display: block;
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
}

.media-panel .card {
  height: 100%;
}

.card h2,
.card h3 {
  margin: 0 0 10px;
}

.card p,
.card li {
  color: #4b5563;
  line-height: 1.65;
}

.list {
  margin: 0;
  padding-left: 18px;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.pill {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 13px;
  font-weight: 700;
}

.cta {
  margin-top: 30px;
  border-radius: 24px;
  background: #111827;
  color: #fff;
  padding: 30px;
}

.cta p {
  color: rgba(255, 255, 255, 0.82);
}

.footer {
  padding: 20px 0 40px;
  color: #6b7280;
  font-size: 14px;
}

.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.proof-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

.proof-card strong {
  display: block;
  font-size: 1rem;
}

.proof-card p {
  margin: 10px 0 0;
  color: #4b5563;
  line-height: 1.65;
}

.faq-list {
  display: grid;
  gap: 18px;
}

.faq-item h3 {
  margin: 0 0 8px;
}

.faq-item p {
  margin: 0;
}

.related-grid,
.hub-grid {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.related-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hub-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
}

.related-link,
.hub-link {
  display: grid;
  gap: 10px;
  text-decoration: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);
}

.related-link strong,
.hub-link strong {
  font-size: 1rem;
}

.related-link span,
.hub-link span {
  color: #4b5563;
  line-height: 1.6;
}



.decision-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 28px;
  border: 1px solid #fecaca;
  border-radius: 28px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.96), rgba(255, 255, 255, 0.96));
  box-shadow: 0 18px 44px rgba(239, 68, 68, 0.08);
}

.decision-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.decision-copy h2 {
  margin: 8px 0 0;
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  line-height: 1.08;
}

.decision-copy p {
  margin: 12px 0 0;
  color: #4b5563;
  line-height: 1.7;
}

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

.decision-card {
  display: grid;
  gap: 8px;
  min-height: 116px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.decision-card.primary {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #f97316);
}

.decision-card strong {
  font-size: 1rem;
}

.decision-card span {
  color: #4b5563;
  line-height: 1.55;
}

.decision-card.primary span {
  color: rgba(255, 255, 255, 0.9);
}



.community-stat-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: 20px;
  align-items: center;
  margin-top: 28px;
  border: 1px solid #dbeafe;
  border-radius: 28px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.98));
  box-shadow: 0 18px 44px rgba(37, 99, 235, 0.07);
}

.community-stat-copy h2 {
  margin: 8px 0 0;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  line-height: 1.08;
}

.community-stat-copy p {
  margin: 12px 0 0;
  color: #4b5563;
  line-height: 1.7;
}

.community-stat-recent {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8 !important;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 12px;
}

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

.community-stat-card {
  border-radius: 20px;
  border: 1px solid #e0e7ff;
  background: #fff;
  padding: 18px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

.community-stat-card strong {
  display: block;
  color: #111827;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1;
}

.community-stat-card span {
  display: block;
  margin-top: 8px;
  color: #4b5563;
  font-weight: 800;
}


.seo-quick-start {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0 0 18px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
}

.seo-quick-copy {
  display: grid;
  gap: 6px;
}

.seo-quick-label {
  width: fit-content;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.seo-quick-copy strong {
  font-size: clamp(1.05rem, 2.3vw, 1.45rem);
  line-height: 1.12;
  color: #111827;
}

.seo-quick-copy span:last-child {
  color: #4b5563;
  line-height: 1.55;
}

.seo-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.seo-quick-start .btn-primary {
  background: #ef4444;
  color: #fff;
}

.seo-quick-start .btn-secondary.dark {
  background: #fff;
}

@media (max-width: 860px) {
  .hero.hero-split,
  .media-panel,
  .decision-panel,
  .community-stat-panel,
  .grid.cols-3,
  .grid.cols-2,
  .proof-strip,
  .decision-grid,
  .community-stat-grid,
  .related-grid,
  .hub-grid {
    grid-template-columns: 1fr;
  }


  .seo-quick-start {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .seo-quick-actions {
    justify-content: stretch;
    flex-direction: column;
  }

  .shell {
    padding: 14px;
  }

  .hero,
  .card,
  .cta {
    border-radius: 22px;
    padding: 22px;
  }

  .hero h1 {
    font-size: clamp(1.82rem, 10.5vw, 2.55rem);
  }

  .hero-intro,
  .hero-visual {
    display: none;
  }

  .hero-subtitle {
    font-size: 1rem;
    line-height: 1.48;
  }

  .hero-nudge {
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .actions,
  .footer-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    box-sizing: border-box;
  }
}


.viral-share-panel {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.95fr);
  gap: 20px;
  align-items: center;
  border-color: rgba(249, 115, 22, 0.28);
  background: linear-gradient(135deg, #fff7ed, #ffffff 58%, #fef2f2);
}

.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.share-hint {
  grid-column: 1 / -1;
  margin: 0;
  color: #6b7280;
  font-size: 0.95rem;
}

@media (max-width: 760px) {
  .viral-share-panel {
    grid-template-columns: 1fr;
  }
  .share-actions {
    justify-content: flex-start;
  }
}

.answer-block {
  margin: 26px 0;
  padding: 28px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 30px;
  background:
    radial-gradient(circle at 8% 8%, rgba(16, 185, 129, 0.18), transparent 28%),
    linear-gradient(135deg, #fffaf0 0%, #f8fafc 54%, #eef8f1 100%);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.10);
}
.answer-kicker {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 12px;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.answer-block h2 {
  margin: 14px 0 10px;
  max-width: 820px;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: #111827;
}
.answer-block p {
  max-width: 860px;
  margin: 0;
  color: #374151;
  font-size: 1.05rem;
  line-height: 1.7;
}
.answer-block ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.answer-block li {
  position: relative;
  padding: 18px 18px 18px 44px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.74);
  color: #1f2937;
  line-height: 1.55;
}
.answer-block li::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 22px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.15);
}
.answer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
@media (max-width: 760px) {
  .answer-block { padding: 22px; border-radius: 24px; }
  .answer-block ul { grid-template-columns: 1fr; }
  .answer-actions .btn { width: 100%; justify-content: center; }
}
.sticky-conversion-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 40;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(1040px, calc(100% - 28px));
  padding: 12px 14px 12px 18px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 56px rgba(15, 23, 42, 0.20);
  backdrop-filter: blur(18px);
}

.sticky-conversion-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sticky-conversion-copy strong {
  color: #111827;
  font-size: 0.96rem;
}

.sticky-conversion-copy span {
  color: #4b5563;
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-conversion-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  flex: 0 0 auto;
}

.sticky-conversion-bar .btn {
  padding: 10px 14px;
  min-height: 44px;
}

.sticky-conversion-bar .btn-primary {
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
}

@media (max-width: 760px) {
  body { padding-bottom: 118px; }
  .sticky-conversion-bar {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    transform: none;
    display: grid;
    gap: 10px;
    border-radius: 24px;
    padding: 12px;
  }
  .sticky-conversion-copy span {
    white-space: normal;
  }
  .sticky-conversion-actions {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 8px;
  }
  .sticky-conversion-bar .btn {
    width: 100%;
    min-height: 48px;
    padding: 10px 8px;
    font-size: 0.9rem;
  }
}

.seo-score-jump{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:.35rem;margin-top:.85rem;max-width:38rem}
.seo-score-chip{display:flex;align-items:center;justify-content:center;min-height:2.45rem;border-radius:999px;background:#fff;color:#0f172a;font-weight:900;text-decoration:none;box-shadow:0 12px 28px rgba(15,23,42,.14);border:1px solid rgba(15,23,42,.08)}
.seo-score-chip:hover,.seo-score-chip:focus{background:#ff6b57;color:#fff;outline:0;transform:translateY(-1px)}
@media (max-width:640px){.seo-score-jump{grid-template-columns:repeat(5,minmax(0,1fr));}.seo-score-chip{min-height:2.75rem}}

.seo-rate-hero-button{display:flex;align-items:center;justify-content:center;margin-top:1rem;min-height:3.25rem;border-radius:999px;background:#0f172a;color:#fff;text-decoration:none;font-weight:950;box-shadow:0 18px 38px rgba(15,23,42,.22);border:2px solid rgba(255,255,255,.75)}
.seo-rate-hero-button:hover,.seo-rate-hero-button:focus{background:#ff6b57;color:#fff;outline:0;transform:translateY(-1px)}


.seo-flow-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:.85rem 0 .35rem}.seo-flow-step{display:grid;grid-template-columns:auto 1fr;column-gap:.65rem;align-items:start;border:1px solid rgba(15,23,42,.1);border-radius:18px;background:rgba(255,255,255,.78);padding:.75rem;box-shadow:0 10px 24px rgba(15,23,42,.06)}.seo-flow-step b{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:999px;background:#111827;color:#fff;font-size:.9rem}.seo-flow-step span{display:grid;gap:.16rem}.seo-flow-step strong{display:block;font-size:.9rem;line-height:1.15;color:#111827}.seo-flow-step small{display:block;color:#4b5563;line-height:1.35}.seo-quick-start{border:2px solid rgba(239,68,68,.24);box-shadow:0 18px 48px rgba(239,68,68,.1),0 12px 32px rgba(15,23,42,.05)}.seo-rate-hero-button{font-size:1.04rem;letter-spacing:-.01em}@media (max-width:760px){.seo-flow-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}.seo-flow-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:.55rem .4rem;border-radius:16px}.seo-flow-step b{width:1.7rem;height:1.7rem}.seo-flow-step strong{font-size:.78rem}.seo-flow-step small{display:none}.seo-rate-hero-button{min-height:3.6rem}}


.grid>*{min-width:0}.share-copy-card,.share-copy-card *{min-width:0}.share-hint{overflow-wrap:anywhere;word-break:break-word}.quick-start-proof{display:flex;flex-wrap:wrap;gap:.45rem .75rem;align-items:center}.quick-start-proof span{display:inline-flex;align-items:center;min-width:0}@media (max-width:760px){.quick-start-proof{display:grid;grid-template-columns:1fr;gap:.2rem}.share-copy-card .actions{width:100%;max-width:100%}.share-copy-card .btn{width:100%;max-width:100%;white-space:normal;text-align:center}.share-copy-card p{overflow-wrap:anywhere}}

.seo-rate-first-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.85rem;align-items:center;margin:.95rem 0 .4rem;padding:1rem;border-radius:22px;background:linear-gradient(135deg,#fff7ed,#ecfeff);border:3px solid rgba(255,79,66,.58);box-shadow:0 22px 52px rgba(255,79,66,.2),0 12px 36px rgba(15,23,42,.1)}
.seo-rate-first-strip b{display:block;color:#0f172a;font-size:1.02rem;line-height:1.15}.seo-rate-first-strip span{display:block;margin-top:.18rem;color:#475569;font-weight:700;font-size:.9rem;line-height:1.35}.seo-rate-first-cta{display:inline-flex;align-items:center;justify-content:center;min-height:3.3rem;padding:.8rem 1.12rem;border-radius:999px;background:#ff4f42;color:#fff;text-decoration:none;font-weight:950;box-shadow:0 16px 36px rgba(255,79,66,.34);white-space:nowrap}.seo-rate-first-cta:hover,.seo-rate-first-cta:focus{background:#0f172a;color:#fff;outline:0;transform:translateY(-1px)}
@media (max-width:760px){.seo-rate-first-strip{grid-template-columns:1fr;gap:.65rem;margin:.75rem 0 .25rem;padding:.72rem;border-radius:18px}.seo-rate-first-cta{width:100%;min-height:3.35rem}.seo-rate-first-strip b{font-size:.95rem}.seo-rate-first-strip span{font-size:.82rem}}