/* Leonardo Amoyr — cyberpunk editorial system for /content/ */
:root {
  --ed-bg: #050508;
  --ed-surface: #0d0e15;
  --ed-surface-raised: #141620;
  --ed-surface-soft: #1a1c27;
  --ed-text: #f5f5f1;
  --ed-copy: #d5d6de;
  --ed-muted: #a7a9b5;
  --ed-cyan: #20e7ed;
  --ed-magenta: #ff4bd8;
  --ed-yellow: #efff4a;
  --ed-border: rgba(182, 229, 234, .21);
  --ed-border-strong: rgba(32, 231, 237, .46);
  --ed-shadow: 0 22px 58px rgba(0, 0, 0, .30);
}

html {
  color-scheme: dark;
  background: var(--ed-bg);
  scroll-padding-top: 92px;
}

body {
  color: var(--ed-copy) !important;
  background-color: var(--ed-bg) !important;
  background-image:
    linear-gradient(rgba(32,231,237,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,231,237,.03) 1px, transparent 1px),
    radial-gradient(circle at 88% 2%, rgba(255,75,216,.12), transparent 28%),
    radial-gradient(circle at 4% 28%, rgba(32,231,237,.07), transparent 22%) !important;
  background-size: 58px 58px, 58px 58px, 100% 100%, 100% 100% !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 18px;
  line-height: 1.76;
  overflow-wrap: break-word;
}

body::after { opacity: .04; }
::selection { color: #fff; background: var(--ed-magenta); }

.wrap {
  width: min(100% - 36px, 860px);
  margin-inline: auto;
}
.article-header.wrap, .content.wrap { width: min(100% - 36px, 860px); }

h1, h2, h3, h4,
.article-header h1, .content h2, .content h3,
.article-card h2, .article-card h3,
.cta h2, .related h2, .related h3,
.toc h2, .note h2, .video-box h2 {
  color: var(--ed-text) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  text-wrap: balance;
}

h1 { font-size: clamp(2.55rem, 7vw, 4.9rem) !important; line-height: .99 !important; }
h2 { font-size: clamp(1.85rem, 4.8vw, 2.8rem) !important; line-height: 1.08 !important; }
h3 { font-size: clamp(1.35rem, 3.2vw, 1.78rem) !important; line-height: 1.15 !important; }

.content h2 { margin: 58px 0 18px; }
.content h3 { margin: 38px 0 12px; }
.content h2::before { content: "// "; color: var(--ed-magenta); font-family: monospace; font-size: .62em; vertical-align: .12em; }

p, li,
.content p, .content li,
.content.wrap p, .content.wrap li,
.article-card p, .choice p,
.result p, .offer p, .faq p {
  color: var(--ed-copy) !important;
}

strong,
.content strong,
.footer-author,
.footer-author strong,
.result strong,
.price strong,
.offer strong,
.choice strong {
  color: var(--ed-text) !important;
}

.subtitle, .meta, .disclosure, .source-note,
.footer-disclaimer, .site-footer,
.article-card__meta, figcaption {
  color: var(--ed-muted) !important;
}

a, .content a, .article-card__read, .affiliate-link {
  color: var(--ed-cyan) !important;
  text-decoration-color: rgba(32,231,237,.50) !important;
  text-underline-offset: 3px;
}

a:hover { color: var(--ed-yellow) !important; }
a:focus-visible, button:focus-visible, summary:focus-visible,
iframe:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--ed-yellow) !important;
  outline-offset: 4px;
}

/* Editorial header */
.site-header, .page-header {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--ed-border) !important;
  background: rgba(5,5,8,.91) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.20) !important;
  backdrop-filter: blur(16px);
}

.site-header::before, .page-header::before { display: none !important; }
.site-header > .wrap,
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
}

.logo img,
.site-header img {
  width: min(138px, 44vw);
  height: auto;
  filter: grayscale(1) invert(1) brightness(2) drop-shadow(4px 3px 0 rgba(255,43,214,.48));
}

/* Article opening */
.article-header {
  padding: 62px 0 30px !important;
  color: var(--ed-copy) !important;
}

.kicker, .related__eyebrow, .article-card__meta,
.codex-hostinger-card__eyebrow {
  color: var(--ed-cyan) !important;
  font: 800 .77rem/1.3 monospace !important;
  letter-spacing: .13em !important;
}
.kicker::before { content: "// "; color: var(--ed-magenta); }

.subtitle {
  max-width: 760px;
  font-size: clamp(1.08rem, 2.5vw, 1.35rem) !important;
  line-height: 1.55;
}

.meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0 28px;
  border-color: var(--ed-border) !important;
  border-bottom: 1px solid var(--ed-border) !important;
  font-family: monospace;
  font-size: .8rem !important;
  letter-spacing: .02em;
}
.meta img, .footer-author img {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  flex: 0 0 44px;
  object-fit: cover;
  border-radius: 50% !important;
  border: 1px solid var(--ed-border-strong);
  box-shadow: 3px 3px 0 rgba(255,75,216,.18);
}
.footer-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.featured-image,
.article-visual,
.video-box iframe,
.content iframe,
.content video {
  border: 1px solid rgba(255,75,216,.36) !important;
  border-radius: 0 !important;
  background: #08090e !important;
  box-shadow: -8px 8px 0 rgba(32,231,237,.06), var(--ed-shadow) !important;
  clip-path: none !important;
}
.featured-image {
  display: block;
  width: min(100% - 36px, 1040px);
  margin: 0 auto 30px !important;
  overflow: hidden;
}
.featured-image img, .article-visual img {
  display: block;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}
.article-visual { margin: 34px 0; overflow: hidden; }
.article-visual figcaption {
  padding: 12px 16px;
  color: var(--ed-muted) !important;
  background: var(--ed-surface-raised) !important;
}

/* The email-kit article uses .hero on an image, not a page hero */
img.hero, .content img.hero, body > .hero {
  width: min(100% - 36px, 1040px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto 38px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,75,216,.36) !important;
  border-radius: 0 !important;
  background: #08090e !important;
  box-shadow: -8px 8px 0 rgba(32,231,237,.06), var(--ed-shadow) !important;
  clip-path: none !important;
  transform: none !important;
}
img.hero::before, body > .hero::before { display: none !important; }

/* Long-form reading */
.content {
  color: var(--ed-copy) !important;
  font-size: 1.04rem;
  line-height: 1.78;
}
.content > p { margin-block: 1.15em; }
.content ul, .content ol { padding-left: 1.35em; }
.content li { margin: .58em 0; }
.content img { height: auto; }
.content hr { border: 0; border-top: 1px solid var(--ed-border); margin: 44px 0; }

.mark {
  color: var(--ed-text) !important;
  background: linear-gradient(transparent 58%, rgba(239,255,74,.24) 58%) !important;
}

blockquote, .content blockquote {
  margin: 30px 0;
  padding: 21px 24px;
  color: var(--ed-copy) !important;
  border: 1px solid var(--ed-border) !important;
  border-left: 4px solid var(--ed-magenta) !important;
  background: var(--ed-surface-raised) !important;
  box-shadow: none !important;
}
blockquote p, .content blockquote p { color: var(--ed-copy) !important; }

/* Reusable editorial panels */
.toc, .tool-box, .related, .cta, .note, .video-box,
.disclosure, .choice, .offer, .result, .faq,
.codex-hostinger-card, .source-note {
  color: var(--ed-copy) !important;
  border: 1px solid var(--ed-border) !important;
  border-radius: 0 !important;
  background: rgba(13,14,21,.94) !important;
  box-shadow: none !important;
  clip-path: none !important;
}

.toc, .tool-box, .related, .note, .video-box,
.disclosure, .choice, .offer, .result, .faq {
  padding: 23px;
}

.toc { border-left: 4px solid var(--ed-cyan) !important; }
.toc h2 { margin: 0 0 10px !important; font-size: 1.5rem !important; }
.toc ol, .toc ul { margin: 0; }
.toc a { font-family: monospace; font-size: .91rem; }

.note, .disclosure, .source-note { border-left: 4px solid var(--ed-yellow) !important; }
.note p, .disclosure p, .source-note p { color: var(--ed-muted) !important; }
.video-box { border-left: 4px solid var(--ed-magenta) !important; }

.related { border-left: 4px solid var(--ed-magenta) !important; }
.related p { color: var(--ed-muted) !important; }
.related-links { display: grid; gap: 14px; margin-top: 18px; }
.related-links a {
  display: block;
  padding: 18px;
  color: var(--ed-copy) !important;
  border: 1px solid var(--ed-border);
  background: rgba(255,255,255,.035);
  text-decoration: none;
}
.related-links a:hover { border-color: var(--ed-cyan); }
.related-links strong { display: block; margin-bottom: 5px; }
.related-links span { color: var(--ed-muted); }

.tool-box { border-left: 4px solid var(--ed-cyan) !important; }
.tool-box p { color: var(--ed-copy) !important; }

/* CTAs */
.cta {
  margin: 48px 0;
  padding: clamp(26px, 5vw, 42px) !important;
  text-align: left;
  border-color: var(--ed-border-strong) !important;
  background:
    radial-gradient(circle at 92% 4%, rgba(255,75,216,.12), transparent 36%),
    #0b0c12 !important;
  box-shadow: -8px 8px 0 rgba(32,231,237,.06) !important;
}
.cta h2, .cta h3 { margin-top: 0 !important; }
.cta p { color: var(--ed-copy) !important; }

.button, a.button, .copy-button, button {
  color: #041012 !important;
  border: 1px solid var(--ed-cyan) !important;
  border-radius: 0 !important;
  background: var(--ed-cyan) !important;
  box-shadow: 4px 4px 0 rgba(255,75,216,.55) !important;
  clip-path: polygon(0 0, 95% 0, 100% 28%, 100% 100%, 5% 100%, 0 72%);
  font-family: monospace !important;
  font-weight: 900 !important;
  text-transform: uppercase;
}
.button:hover, a.button:hover, .copy-button:hover, button:hover {
  color: #070905 !important;
  border-color: var(--ed-yellow) !important;
  background: var(--ed-yellow) !important;
  transform: translate(2px,-2px);
  box-shadow: -4px 4px 0 rgba(255,75,216,.62) !important;
}
.button:active, a.button:active, .copy-button:active, button:active {
  transform: translateY(1px);
  box-shadow: 1px 1px 0 rgba(255,75,216,.5) !important;
}
.button.alt, a.button.alt {
  color: var(--ed-cyan) !important;
  border-color: var(--ed-cyan) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Steps and checklists */
.step-list, .steps, .checklist { color: var(--ed-copy); }
.step-list li, .steps li, .checklist li { color: var(--ed-copy) !important; }
.step-list li::before, .checklist li::before {
  color: #041012 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ed-cyan) !important;
}

/* Code snippets and copy action */
pre, code, .code-copy {
  color: #d8f7f8 !important;
  border-color: var(--ed-border) !important;
  background: #080a10 !important;
}
pre {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--ed-border);
  border-radius: 0 !important;
}
code { color: var(--ed-yellow) !important; }
.code-copy { border: 1px solid var(--ed-border) !important; border-radius: 0 !important; }
.code-copy__bar {
  color: var(--ed-muted) !important;
  border-color: var(--ed-border) !important;
  background: var(--ed-surface-raised) !important;
}
.copy-button { min-height: 38px; padding: 8px 12px; }

/* Hostinger promo card */
.codex-hostinger-card {
  overflow: hidden;
  border-color: rgba(255,75,216,.38) !important;
  background: linear-gradient(145deg, #14111a, #090a0f) !important;
}
.codex-hostinger-card::before { color: rgba(255,255,255,.045) !important; }
.codex-hostinger-card__eyebrow { color: var(--ed-yellow) !important; }
.codex-hostinger-card__copy, .codex-hostinger-card__note { color: var(--ed-copy) !important; }
.codex-hostinger-card__coupon {
  color: var(--ed-text) !important;
  border-color: rgba(239,255,74,.35) !important;
  background: rgba(239,255,74,.055) !important;
}
.codex-hostinger-card__coupon strong { color: var(--ed-yellow) !important; }

/* Comparison article */
.prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.price, .price.winner {
  color: var(--ed-copy) !important;
  border: 1px solid var(--ed-border) !important;
  border-radius: 0 !important;
  background: var(--ed-surface-raised) !important;
}
.price.winner {
  color: var(--ed-text) !important;
  border-color: rgba(239,255,74,.45) !important;
  box-shadow: inset 3px 0 0 var(--ed-yellow);
}
.result { border-left: 4px solid var(--ed-magenta) !important; }
.result h2, .result h3 { color: var(--ed-text) !important; }
.result-note { color: var(--ed-yellow) !important; border-color: var(--ed-border) !important; }
.choice, .offer { border-left: 4px solid var(--ed-cyan) !important; }
.affiliate-link {
  padding: 1px 3px;
  color: var(--ed-cyan) !important;
  background: linear-gradient(transparent 56%, rgba(32,231,237,.16) 56%) !important;
}

.faq details, details {
  color: var(--ed-copy) !important;
  border: 1px solid var(--ed-border) !important;
  border-radius: 0 !important;
  background: var(--ed-surface) !important;
}
summary { color: var(--ed-text) !important; }
details p { color: var(--ed-muted) !important; }

/* Tables */
.content table, table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--ed-border) !important;
  border-radius: 0 !important;
  color: var(--ed-copy) !important;
  background: var(--ed-surface) !important;
  -webkit-overflow-scrolling: touch;
}
.table-scroll { max-width: 100%; margin: 28px 0; overflow-x: auto; }
thead, tbody { min-width: 620px; }
th {
  color: #041012 !important;
  border-color: rgba(5,5,8,.16) !important;
  background: var(--ed-cyan) !important;
}
td { color: var(--ed-copy) !important; border-color: var(--ed-border) !important; }

/* Blog index */
.page-header {
  position: relative;
  padding: 66px 0 44px !important;
  border-bottom: 1px solid var(--ed-border) !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,75,216,.12), transparent 28%),
    rgba(5,5,8,.82) !important;
}
.page-header .kicker { margin-bottom: 12px; }
.articles { padding: 44px 0 72px; }
.article-card {
  display: grid;
  overflow: hidden;
  min-height: 100%;
  color: var(--ed-copy) !important;
  border: 1px solid var(--ed-border) !important;
  border-radius: 0 !important;
  background: rgba(13,14,21,.94) !important;
  box-shadow: none !important;
  clip-path: none !important;
}
.article-card:hover {
  border-color: var(--ed-border-strong) !important;
  transform: translateY(-4px);
  box-shadow: -6px 6px 0 rgba(255,75,216,.08), 0 18px 44px rgba(0,0,0,.24) !important;
}
.article-card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 0 !important;
  border-bottom: 1px solid var(--ed-border) !important;
  border-radius: 0 !important;
  background: #08090e !important;
  box-shadow: none !important;
}
.article-card__image img { width: 100%; height: 100%; object-fit: cover; }
.article-card__body { display: flex; flex-direction: column; padding: 23px; }
.article-card__body h2 { margin: 10px 0 12px !important; font-size: clamp(1.45rem, 3vw, 1.95rem) !important; }
.article-card__body p { color: var(--ed-muted) !important; }
.article-card__read { margin-top: auto; padding-top: 18px; font: 800 .8rem/1 monospace; letter-spacing: .05em; }

/* Figure captions and footer */
.article-visual figcaption {
  border-top: 1px solid var(--ed-border);
  background: var(--ed-surface-raised) !important;
}
.site-footer {
  margin-top: 48px;
  border-top: 1px solid var(--ed-border) !important;
  background: #050508 !important;
}
.site-footer p { color: var(--ed-muted) !important; }
.footer-author { color: var(--ed-text) !important; }

@media (max-width: 900px) {
  html { scroll-padding-top: 78px; }
  .articles { padding-top: 34px; }
  .content table, table { font-size: .88rem; }
}

@media (max-width: 600px) {
  body { font-size: 17px; line-height: 1.72; }
  .wrap, .article-header.wrap, .content.wrap { width: min(100% - 28px, 860px); }
  .article-header { padding: 44px 0 24px !important; }
  h1 { font-size: clamp(2.35rem, 11vw, 3.35rem) !important; }
  h2 { font-size: clamp(1.75rem, 8vw, 2.35rem) !important; }
  .content h2 { margin-top: 46px; }
  .featured-image, img.hero, .content img.hero, body > .hero { width: min(100% - 28px, 1040px) !important; }
  .toc, .tool-box, .related, .cta, .note, .video-box,
  .disclosure, .choice, .offer, .result, .faq { padding: 18px; }
  .article-card__body { padding: 19px; }
  .button, a.button { width: 100%; text-align: center; }
  pre { margin-inline: 0; font-size: .78rem; }
  blockquote, .content blockquote { padding: 18px; }
  .prices { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .wrap, .article-header.wrap, .content.wrap { width: min(100% - 20px, 860px); }
  h1 { font-size: 2.2rem !important; }
  .featured-image, img.hero, .content img.hero, body > .hero { width: min(100% - 20px, 1040px) !important; }
  .meta { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}