/* Noto Sans hierarchy: bold compact headings, regular body, medium supporting text. */
h1, h2, h3 { font-weight: 700; color: var(--text); }
h1 em, h2 em, h3 em { color: var(--red); }
.hero-copy h1 { letter-spacing: -.055em; }
.intro, .topbar nav, .top-button { font-weight: 500; }
.section-heading { max-width: 740px; margin-bottom: 64px; }
.section-heading h2,
.capture-section .section-heading h2 {
  font-size: clamp(36px, 4.1vw, 54px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.052em;
  margin: 18px 0 24px;
}
.section-heading h2 em { color: var(--red); }
.section-heading > p:last-child { max-width: 530px; font-size: 16px; line-height: 1.75; color: #89858b; }
.section-heading strong, .showcase-heading strong { color: inherit; font-weight: 500; }
.showcase-heading h3, .analysis-grid .showcase-heading h3 {
  font-size: clamp(26px, 2.6vw, 34px); font-weight: 700;
  line-height: 1.16; letter-spacing: -.045em;
}
.showcase-heading p, .analysis-grid .showcase-heading p { color: #8f8991; line-height: 1.75; }
.showcase-heading .micro-label { color: #a49aa0; }
.analysis-grid .showcase-heading { min-height: 165px; }
.feature-notes p { color: var(--muted); }
.feature-notes b { color: var(--text); }
.feature-notes p span { color: inherit; }
.feature-notes b { font-weight: 600; }
main .eyebrow { color: var(--muted); }
.closing-cta h2 { color: var(--text); font-size: clamp(36px, 4.6vw, 60px); font-weight: 700; line-height: 1.1; }
.closing-cta > p:not(.eyebrow) { font-size: 16px; color: #928b92; }

/* All product previews share the hero's light-stage treatment from
   site.css: a soft red bed and an angled, blurred silver/red reflection. */
.preview-ambience { position: relative; isolation: isolate; }
/* Spread the approved reflection across the top and carry softer light down
   both edges. Keep these layers behind the opaque preview, never over it. */
:is(.preview-ambience, .edit-showcase).light-stage::before {
  inset: -65px -65px -15px;
  background:
    radial-gradient(ellipse at 5% 30%, #e8e9ed38, transparent 45%),
    radial-gradient(ellipse at 95% 30%, #e8e9ed38, transparent 45%),
    radial-gradient(ellipse at 9% 42%, #e7474f30, transparent 48%),
    radial-gradient(ellipse at 91% 42%, #e7474f30, transparent 48%);
  filter: blur(40px);
  opacity: .55;
  /* A vertical mask alone clips the blurred layer at its left/right bounds.
     Fade both axes to zero before the mask surface ends. */
  mask-image:
    linear-gradient(to right, transparent, #000 65px, #000 calc(100% - 65px), transparent),
    linear-gradient(transparent, #000 12%, #000 48%, transparent 90%);
  mask-composite: intersect;
}
:is(.preview-ambience, .edit-showcase).light-stage::after {
  inset: -85px -5% auto;
  height: 200px;
  transform: rotate(-3deg);
  background: linear-gradient(108deg, transparent 3%, #e8e9ed52 22%,
    #eb4c567d 45%, #ef7c8826 58%, #e8e9ed52 78%, transparent 97%);
  filter: blur(30px);
  mask-image: radial-gradient(ellipse at 50% 60%, #000 25%, transparent 72%);
}
@media (max-width: 700px) {
  :is(.preview-ambience, .edit-showcase).light-stage::before {
    inset: -45px -28px -10px; filter: blur(30px);
  }
  :is(.preview-ambience, .edit-showcase).light-stage::after {
    top: -60px; height: 145px; filter: blur(26px);
  }
}

.closing-cta::before {
  inset: 18% 8% 0;
  background: radial-gradient(ellipse, #ffffff20, transparent 70%);
  filter: blur(60px);
}

/* Full-width outline of the official Redunar wordmark. */
footer.wordmark-footer {
  display: block; position: relative; isolation: isolate; max-width: 1440px;
  margin: 0 auto; padding: 30px 48px 64px; border-top: 1px solid #ffffff12;
}
.footer-utility { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-identity { display: flex; align-items: center; gap: 18px; font: 10px Mono, monospace; letter-spacing: .1em; color: #79747c; }
.footer-copyright { display: inline-flex; align-items: center; color: #8c878f; }
.wordmark-footer .footer-links { font-size: 11px; }
.footer-trademarks {
  max-width: 760px; margin-top: 14px; color: #656067;
  font: 9px/1.7 Mono, monospace; letter-spacing: .025em;
}
.footer-trademarks span { display: block; }
.footer-wordmark { display: block; position: relative; margin-top: 68px; padding: 20px 0; -webkit-tap-highlight-color: transparent; }
.footer-wordmark svg { display: block; width: 100%; height: auto; overflow: visible; }
.footer-wordmark::before {
  content: ''; position: absolute; inset: -40px 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, #bf485519, transparent 65%);
  filter: blur(22px); opacity: .3; transition: opacity .65s ease;
}
/* Brightness comes from the same loop as the pointer position, including exit. */
.wordmark-light { opacity: var(--wordmark-glow, 0); }
.footer-wordmark::before { opacity: calc(var(--wordmark-glow, 0) * .7); transition: none; }
/* This decorative graphic uses its illuminated letters as the keyboard focus
   cue, rather than drawing a rectangle around the SVG's bounding box. */
.footer-wordmark { outline: none; user-select: none; -webkit-user-select: none; caret-color: transparent; }
.footer-wordmark:focus-visible { outline: none; }
.footer-wordmark:focus-visible svg { filter: brightness(1.4); }
@media (max-width: 700px) {
  .section-heading { margin-bottom: 42px; }
  .section-heading h2, .capture-section .section-heading h2 { font-size: 36px; }
  .section-heading > p:last-child { font-size: 15px; }
  .showcase-heading h3, .analysis-grid .showcase-heading h3 { font-size: 27px; }
  .analysis-grid .showcase-heading { min-height: 0; }
  footer.wordmark-footer { padding: 26px 22px 40px; }
  .footer-utility { align-items: flex-start; }
  .footer-identity { align-items: flex-start; flex-direction: column; gap: 7px; font-size: 8px; letter-spacing: .06em; }
  .wordmark-footer .footer-links { gap: 16px; font-size: 10px; }
  .footer-trademarks { display: block; max-width: 560px; margin-top: 18px; font-size: 8px; line-height: 1.75; }
  .footer-wordmark { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark-light, .footer-wordmark::before { transition: none; }
}

/* Keep the two-part hero intact at narrow phone widths with Noto Sans. */
@media (max-width: 520px) { .hero-copy h1 { font-size: clamp(38px, 10.6vw, 54px); line-height: 1.06; } }

/* Match the Steam/AMD reference inside product illustrations; the surrounding
   website shares Noto Sans. Existing mono labels and native overlay art stay intact. */
.edit-showcase, .dashboard-detail, .history-detail {
  font-family: NotoSans, Arial, sans-serif;
}
.edit-showcase h3 { font-weight: 500; }