/* ============================================================
   SuperPlacer — shared site styles
   Used by: downloads.html, getting-started.html (and any future page).
   Change palette / --type-scale here once → every page updates.
   ============================================================ */

   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

   :root {
     --bg:         #0a0a0b;
     --bg-card:    #111113;
     --border:     #1e1e22;
     --border-hi:  #2e2e34;
     --text:       #e8e8ea;
     --muted:      #8d8d93;
     --accent:     #FFC400;
     --accent-dim: #a8cc3e;
     --font-mono:  'DM Mono', monospace;
     --font-sans:  'DM Sans', sans-serif;
     --max-w:      min(80vw, 1600px);
   
     /* ── TYPE SCALE ──────────────────────────────────────
        Single multiplier for ALL text on the page.
        Change this one number to scale every font-size at once.
        1 = original sizes · 2 = double · 1.5 = +50%, etc. */
     --type-scale: 2;
   }
   
   html { scroll-behavior: smooth; }
   
   body {
     background: var(--bg);
     color: var(--text);
     font-family: var(--font-sans);
     font-size: calc(16px * var(--type-scale));
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     overflow-x: hidden;
   }
   
   /* NAV (shared) */
   nav {
     position: sticky;
     top: 0;
     z-index: 100;
     border-bottom: 1px solid var(--border);
     background: rgba(10,10,11,0.90);
     backdrop-filter: blur(14px);
   }
   
   .nav-inner {
     max-width: var(--max-w);
     margin: 0 auto;
     height: 64px;
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   
   .nav-logo { display: flex; align-items: center; text-decoration: none; }
   .nav-logo img { height: 48px; width: auto; }
   
   .nav-logo-text {
     font-family: var(--font-mono);
     font-size: calc(18px * var(--type-scale));
     font-weight: 500;
     color: var(--text);
     letter-spacing: 0.08em;
   }
   
   .nav-right { display: flex; align-items: center; gap: 16px; }
   
   .nav-badge {
     font-family: var(--font-mono);
     font-size: calc(10px * var(--type-scale));
     color: var(--accent);
     background: rgba(212,255,92,0.07);
     border: 1px solid rgba(212,255,92,0.18);
     border-radius: 3px;
     padding: 3px 8px;
     letter-spacing: 0.1em;
     text-transform: uppercase;
   }
   
   .nav-back {
     font-family: var(--font-mono);
     font-size: calc(11px * var(--type-scale));
     font-weight: 500;
     letter-spacing: 0.09em;
     text-transform: uppercase;
     color: var(--muted);
     text-decoration: none;
     transition: color 0.15s;
   }
   
   .nav-back:hover { color: var(--text); }
   
   /* plain text nav link (e.g. Getting Started, next to Home / Download) */
   .nav-link {
     font-family: var(--font-mono);
     font-size: calc(11px * var(--type-scale));
     font-weight: 500;
     letter-spacing: 0.09em;
     text-transform: uppercase;
     color: var(--text);
     text-decoration: none;
     white-space: nowrap;
     transition: color 0.15s;
   }
   
   .nav-link:hover { color: var(--accent); }
   
   /* shared Download button (used in index nav) */
   .nav-download {
     font-family: var(--font-mono);
     font-size: calc(11px * var(--type-scale));
     font-weight: 500;
     letter-spacing: 0.09em;
     text-transform: uppercase;
     color: #0a0a0b;
     background: var(--accent);
     border: 1px solid var(--accent);
     border-radius: 5px;
     padding: 7px 16px;
     text-decoration: none;
     transition: background 0.15s, border-color 0.15s;
     white-space: nowrap;
   }
   
   .nav-download:hover { background: var(--accent-dim); border-color: var(--accent-dim); }
   
   /* WRAP */
   .wrap { max-width: var(--max-w); margin: 0 auto; }
   
   /* PAGE HEAD */
   .dl-head {
     padding: 72px 0 16px;
     animation: fadeUp 0.45s 0.05s ease both;
   }
   
   .dl-head .dl-eyebrow {
     font-family: var(--font-mono);
     font-size: calc(12px * var(--type-scale));
     letter-spacing: 0.16em;
     text-transform: uppercase;
     color: var(--accent);
     margin-bottom: 18px;
   }
   
   .dl-head h1 {
     font-size: calc(clamp(30px, 3.6vw, 46px) * var(--type-scale));
     font-weight: 300;
     letter-spacing: 0.02em;
     line-height: 1.25;
     margin-bottom: 20px;
   }
   
   .dl-head h1 strong { font-weight: 500; }
   
   /* head sub-lines: target by container so it works no matter the tag */
   .dl-head p,
   .dl-head h2,
   .dl-head h3 {
     font-size: calc(18px * var(--type-scale));
     font-weight: 300;
     color: var(--muted);
     max-width: 2560px;
   }
   
   .dl-head p + p,
   .dl-head h2 + h2,
   .dl-head h3 + h3 { margin-top: 8px; }
   
   /* INSTRUCTIONS */
   .instructions {
     padding: 48px 0 8px;
     display: flex;
     flex-direction: column;
     gap: 56px;
   }
   
   .eyebrow {
     font-family: var(--font-mono);
     font-size: calc(11px * var(--type-scale));
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: var(--accent);
     margin-bottom: 28px;
   }
   
   /* ── STEP ────────────────────────────────────────────────
      Vertical stack. The step heading (h3) always comes first,
      followed by description text and media in document order.
      Content width is capped so screenshots never exceed the
      width of the text column beside them. */
   .step {
     display: flex;
     flex-direction: column;
     gap: 24px;
     max-width: var(--step-w, 1100px);
   }
   
   .step-num {
     font-family: var(--font-mono);
     font-size: calc(12px * var(--type-scale));
     color: var(--muted);
     letter-spacing: 0.1em;
     margin-bottom: 12px;
   }
   
   .step-body h3 {
     font-size: calc(22px * var(--type-scale));
     font-weight: 400;
     margin-bottom: 12px;
     letter-spacing: 0.04em;
   }
   
   .step-body p { color: var(--muted); font-size: calc(15px * var(--type-scale)); }
   .step-body p + p { margin-top: 10px; }
   
   /* sub-heading inside a step (e.g. "Place Mode" / "Transform Mode") */
   .step-subhead {
     font-family: var(--font-mono);
     font-size: calc(14px * var(--type-scale));
     font-weight: 500;
     color: var(--accent);
     letter-spacing: 0.06em;
     margin: 8px 0 4px;
   }
   .step-body code {
     font-family: var(--font-mono);
     font-size: 0.9em;
     color: var(--text);
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: 4px;
     padding: 2px 7px;
     word-break: break-all;
   }
   
   /* media block - holds either a real screenshot or an empty placeholder */
   .step-media {
     width: 100%;
     max-width: 100%;
     border: 1px solid var(--border);
     border-radius: 8px;
     overflow: hidden;
     background: var(--bg-card);
   }
   
   /* real screenshot: shown in full, scales proportionally, never cropped */
   .step-media img {
     width: 100%;
     height: auto;
     display: block;
   }
   
   /* ── STEP GALLERY ────────────────────────────────────────
      Several screenshots inside a single step. Defaults to a
      vertical stack; add `.step-gallery--grid` for a 2-up grid.
      Each figure can carry an optional caption. */
   .step-gallery {
     display: flex;
     flex-direction: column;
     gap: 16px;
   }
   
   .step-gallery--grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 16px;
   }
   
   .step-gallery figure {
     margin: 0;
     border: 1px solid var(--border);
     border-radius: 8px;
     overflow: hidden;
     background: var(--bg-card);
   }
   
   .step-gallery figure img {
     width: 100%;
     height: auto;
     display: block;
   }
   
   .step-gallery figcaption {
     font-family: var(--font-mono);
     font-size: calc(11px * var(--type-scale));
     color: var(--muted);
     letter-spacing: 0.03em;
     padding: 10px 14px;
     border-top: 1px solid var(--border);
   }
   
   /* two-frame toggle: stack both images, show only the active one */
   .frame-toggle { position: relative; width: 100%; }
   .frame-toggle img {
     position: absolute;
     top: 0; left: 0;
     width: 100%;
     height: auto;
     opacity: 0;
   }
   /* first image stays in normal flow to give the box its height */
   .frame-toggle img:first-child { position: relative; }
   .frame-toggle img.is-on { opacity: 1; }
   
   /* empty placeholder needs a shape to fill since there is no image yet */
   .step-media:has(.media-empty) {
     aspect-ratio: 16/9;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .media-empty {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     color: var(--muted);
     font-family: var(--font-mono);
     font-size: calc(11px * var(--type-scale));
     letter-spacing: 0.05em;
   }
   
   /* ── YOUTUBE (lazy facade) ───────────────────────────────
      Renders a lightweight poster + play button. The heavy
      YouTube iframe is only injected on click, so the page
      stays fast and privacy-friendly until the user opts in. */
   .yt-embed {
     position: relative;
     width: 100%;
     max-width: var(--step-w, 1100px);
     aspect-ratio: 16 / 9;
     min-height: 200px; /* fallback if aspect-ratio unsupported → block never collapses */
     border: 1px solid var(--border-hi);
     border-radius: 8px;
     overflow: hidden;
     background: #000 center / cover no-repeat;
     cursor: pointer;
   }
   
   .yt-embed iframe {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     border: 0;
   }
   
   .yt-embed .yt-play {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(10,10,11,0.25);
     transition: background 0.15s;
   }
   
   .yt-embed:hover .yt-play { background: rgba(10,10,11,0.10); }
   
   /* play button: an SVG child inside .yt-play (reliable everywhere) */
   .yt-embed .yt-play svg {
     width: calc(64px * var(--type-scale) * 0.6);
     height: auto;
     filter: drop-shadow(0 6px 24px rgba(0,0,0,0.5));
     transition: transform 0.15s;
   }
   
   .yt-embed:hover .yt-play svg { transform: scale(1.06); }
   
   .yt-caption {
     font-family: var(--font-mono);
     font-size: calc(11px * var(--type-scale));
     color: var(--muted);
     letter-spacing: 0.03em;
     margin-top: 12px;
   }
   
   /* DIVIDER */
   .divider { border: none; border-top: 1px solid var(--border); margin: 64px 0 0; }
   
   /* DOWNLOADS GRID */
   .dl-section { padding: 64px 0 88px; }
   
   .dl-section .section-title {
     font-size: calc(clamp(22px, 3vw, 30px) * var(--type-scale));
     font-weight: 300;
     letter-spacing: -0.015em;
     margin-bottom: 12px;
   }
   
   .dl-section .section-sub {
     color: var(--muted);
     font-size: calc(15px * var(--type-scale));
     margin-bottom: 24px;
   }
   
   /* Getting Started callout — sits above the download grid */
   .gs-callout {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     margin-bottom: 40px;
     padding: 16px 20px;
     border: 1px solid var(--border-hi);
     border-radius: 8px;
     background: var(--bg-card);
     text-decoration: none;
     transition: border-color 0.15s, background 0.15s;
   }
   
   .gs-callout:hover { border-color: var(--accent); background: #141416; }
   
   .gs-callout-text {
     color: var(--text);
     font-size: calc(15px * var(--type-scale));
   }
   
   .gs-callout-arrow {
     font-family: var(--font-mono);
     font-size: calc(18px * var(--type-scale));
     color: var(--accent);
     flex-shrink: 0;
     transition: transform 0.15s;
   }
   
   .gs-callout:hover .gs-callout-arrow { transform: translateX(4px); }
   
   .dl-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
   }
   
   .dl-card {
     border: 1px solid var(--border);
     border-radius: 8px;
     background: var(--bg-card);
     padding: 28px 24px;
     display: flex;
     flex-direction: column;
     gap: 20px;
     transition: border-color 0.2s;
   }
   
   .dl-card:hover { border-color: var(--border-hi); }
   
   /* card primary line = the UE engine version (what the user picks by) */
   .dl-card-engine {
     font-size: calc(34px * var(--type-scale));
     font-weight: 300;
     letter-spacing: -0.02em;
     line-height: 1;
     color: var(--text);
     text-transform: none;
   }
   
   .dl-card-engine .ue-prefix { color: var(--muted); font-size: calc(16px * var(--type-scale)); }
   
   /* card secondary line = the plugin version (now small / muted) */
   .dl-card-version {
     font-family: var(--font-mono);
     font-size: calc(12px * var(--type-scale));
     letter-spacing: 0.04em;
     color: var(--muted);
   }
   
   .dl-card-meta {
     font-family: var(--font-mono);
     font-size: calc(11px * var(--type-scale));
     color: var(--muted);
     letter-spacing: 0.04em;
     min-height: 16px;
   }
   
   .dl-btn {
     margin-top: auto;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     background: var(--accent);
     color: #0a0a0b;
     border: 1px solid var(--accent);
     border-radius: 6px;
     padding: 12px 18px;
     font-family: var(--font-mono);
     font-size: calc(11px * var(--type-scale));
     font-weight: 500;
     letter-spacing: 0.09em;
     text-transform: uppercase;
     text-decoration: none;
     cursor: pointer;
     transition: background 0.15s, border-color 0.15s, opacity 0.15s;
   }
   
   .dl-btn:hover { background: var(--accent-dim); border-color: var(--accent-dim); }
   
   .dl-btn.is-loading,
   .dl-btn.is-error {
     background: transparent;
     color: var(--muted);
     border-color: var(--border-hi);
     cursor: default;
     pointer-events: none;
   }
   
   .dl-btn.is-error { color: #c25a4f; border-color: rgba(194,90,79,0.4); }
   
   /* ── EARLY ACCESS CTA ────────────────────────────────────
      Single large call-to-action that replaces the per-engine
      download grid on this page and routes to downloads.html. */
   .cta-section {
     padding: 56px 0 96px;
     display: flex;
     justify-content: center;
   }
   
   .cta-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: var(--accent);
     color: #0a0a0b;
     border: 1px solid var(--accent);
     border-radius: 8px;
     padding: 20px 40px;
     font-family: var(--font-mono);
     font-size: calc(15px * var(--type-scale));
     font-weight: 500;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     text-decoration: none;
     cursor: pointer;
     transition: background 0.15s, border-color 0.15s, transform 0.15s;
   }
   
   .cta-btn:hover {
     background: var(--accent-dim);
     border-color: var(--accent-dim);
     transform: translateY(-2px);
   }
   
   /* FOOTER (shared) */
   footer { border-top: 1px solid var(--border); padding: 28px 0; }
   
   .footer-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 10px;
   }
   
   .footer-copy {
     font-family: var(--font-mono);
     font-size: calc(11px * var(--type-scale));
     color: var(--muted);
     letter-spacing: 0.04em;
   }
   
   .footer-links { display: flex; gap: 20px; }
   
   .footer-links a {
     font-family: var(--font-mono);
     font-size: calc(11px * var(--type-scale));
     color: var(--muted);
     text-decoration: none;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     transition: color 0.15s;
   }
   
   .footer-links a:hover { color: var(--text); }
   
   /* social icons in footer (Discord, X) */
   .footer-social { display: inline-flex; align-items: center; gap: 16px; }
   
   .footer-social a {
     color: var(--muted);
     display: inline-flex;
     padding: 0;
     transition: color 0.15s;
   }
   
   .footer-social a svg { width: 16px; height: 16px; fill: currentColor; }
   .footer-social a:hover { color: var(--text); }
   
   /* ANIM */
   @keyframes fadeUp {
     from { opacity: 0; transform: translateY(14px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after { animation: none !important; }
   }
   
   /* RESPONSIVE */
   /* tablets: 4-up is too cramped → drop to a 2×2 grid */
   @media (max-width: 1100px) {
     .dl-grid { grid-template-columns: repeat(2, 1fr); }
   }
   
   @media (max-width: 880px) {
     .dl-grid { grid-template-columns: 1fr; }
     .step-gallery--grid { grid-template-columns: 1fr; }
   }
   
   @media (max-width: 700px) { :root { --max-w: 92vw; } }