/* Megacubo section — megacubo.tv
   Standalone stylesheet for the AEO-first section. No framework, no CDN, no icon font:
   everything here ships with the page so a reader (human or crawler) gets the layout
   in a single request. Dark theme matches the application's own dark purple UI. */

/* Two themes, because the shared Edenware shell (/edenware-nav.js) sets `data-theme` on
   <html> from the visitor's preference — a section that knew only one of them would show a
   light bar over a dark page. The dark palette is the product's own (it matches the app);
   the light one is the same layout with the values swapped, never a different design.
   Contrast, measured — dark: text 16.8:1, muted 8.5:1, brand 6.2:1 · light: text 18:1,
   muted 9.4:1, links 7.1:1, brand-ink on the orange button 6.4:1 (unchanged: the CTA keeps
   its own background in both themes). */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #110020;
  /* The page stays the darkest surface and every step above it gets lighter: cards are now
     #261238, which widens the gap to the page without inverting the elevation (a lighter
     page with darker cards reads as holes, not as raised blocks). */
  --surface: #261238;
  --surface-2: #301847;
  --line: #452663;
  --text: #f5effc;
  --muted: #c2b0d8;
  --brand: #fb7400;
  --brand-ink: #2a1200;
  /* Orange used as *text* or as a boundary, and the emphasis inside the definition sentence.
     In the dark theme both equal their surface-level values; the light theme darkens them,
     because white-on-white and 2.8:1 orange are the two ways to make a page unreadable. */
  --brand-text: #fb7400;
  --text-strong: #ffffff;
  --accent: #b3a2cd;
  --ok: #6ee7a8;
  --radius: 14px;
  --wrap: 1080px;
  /* The app capture is 998px of UI text, so it gets its own measure instead of the column's:
     full-bleed it filled a 1040px column (larger than the file itself, so upscaled and soft)
     and dominated the page on a wide screen. A figure, not a panel. */
  --shot-max: 820px;
  /* Gutter and vertical rhythm live in variables so no block has to re-declare either.
     Contrast against --bg (#110020): text 16.8:1, --muted 9.3:1, --brand 6.8:1,
     --brand-ink on --brand 6.4:1. Every pair used for text clears WCAG AA (4.5:1). */
  --gutter: 20px;
  --section-block: clamp(26px, 3.6vw, 40px);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ── Shell bridge ────────────────────────────────────────────────
     The global nav (/edenware-nav.js) and the global footer (/edenware-footer.js) paint
     themselves from these tokens, so re-declaring them here is what makes the two of them
     look like part of this page instead of another product (addons/memera does the same).
     Tokens that are just another section token are declared ONCE: `var()` resolves per
     theme, so the light block below carries only what has no section equivalent.
     `--ew-bg` maps to `--surface`, not to the page background: the section's own bars and
     cards are `--surface`, and the global nav sits right above `.product-bar`, so the two
     become one bar instead of two shades touching.
     `--ew-primary` keeps the shell's purple, and that is deliberate. The shell uses it both
     as a fill behind WHITE ink (.en-nav-user-avatar, .en-nav-btn.active) and as the outline
     button's border; the shell's link hovers no longer take this token, so on this dark page no single
     value clears 4.5:1 in both roles — measured: this section's #b3a2cd is 8.6:1 as text
     but 2.34:1 behind white, while #856bb0 is 4.53:1 as text and 4.44:1 behind white. The
     safe half is the fill (a broken fill is an unreadable button; a darker link is still a
     link), so the accent appears where it reads as this page's colour: the service name and
     the section's own links. `--ew-primary-bg` is left out on purpose — it is the fallback
     logo tile, which the shell disables for the real <img> and overrides with the gradient
     for the letter, so mapping it would be dead weight.
     `--ew-primary-light` is the service name in the bar and the text of the login link, so it
     takes the TEXT colour and not the accent: as the accent (#b3a2cd, 7.3:1 on the bar) it
     read as pink the moment the bar stopped being navy — the same reason the section's own
     brand is `--text`. */
  --ew-bg: var(--surface);
  --ew-border: var(--line);
  --ew-text: var(--text);
  --ew-text-secondary: var(--muted);
  --ew-text-muted: #a98fc4;
  --ew-primary: #856bb0;
  --ew-primary-light: var(--text);
  --ew-primary-gradient: linear-gradient(45deg, #4c1d95, #6d28d9);
  --ew-nav-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

/* Light palette: same layout, values swapped. Beyond the surfaces, four tokens change because
   their dark values do not survive a white background: the link (the dark lilac is 2.5:1),
   the “ok” green, the strong text inside the definition sentence (white on white) and the
   orange when it carries text or a boundary (2.8:1 on white — #b45309 brings it to 5:1).
   The CTA is untouched: orange with dark ink works on both backgrounds (6.4:1). */
[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f7f5fc;
  --surface-2: #eee9f8;
  --line: #d8d0ea;
  --text: #1b1030;
  --muted: #4d3f63;
  --brand-text: #b45309;
  --text-strong: #0f0a1e;
  --accent: #5F4785;
  --ok: #0f7a4e;

  /* Shell bridge, part two: only what the dark block cannot express with a section token.
     In the light theme `--ew-primary` can be the section's own accent, because #5F4785 is
     7.7:1 both as text on white AND behind white ink — the two roles of that token stop
     fighting here, so the footer hover and the nav's outline button become exactly the
     page's link colour. The muted grey is the shell's light default (#94A3B8, 2.6:1 on
     white, which fails AA): #6b5c85 is 6.0:1 and sits one step below `--muted`. */
  --ew-primary: #5F4785;
  --ew-text-muted: #6b5c85;
  --ew-nav-shadow: 0 2px 8px rgba(15, 10, 30, .06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--sans);
}

img { max-width: 100%; height: auto; }

a { color: var(--accent); }
a:hover { color: var(--text); }

:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  /* padding-INLINE on purpose: every block below sets only its vertical spacing, so a
     section can never flatten the gutter again. A `padding` shorthand here (or on a
     `section`) is the bug that made the content touch the edges on narrow screens. */
  padding-inline: var(--gutter);
}

/* Spacing utilities — replace the inline `style="margin-top:…"` used before. */
.mt { margin-top: 16px; }
.mt-sm { margin-top: 14px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: var(--brand-ink);
  padding: 10px 14px;
  z-index: 10;
}
.skip:focus { left: 12px; }

/* ── Product bar ────────────────────────────────────────────────────────
   The global Edenware nav (injected by /edenware-nav.js) is the page's header; this is the
   Megacubo bar that sits right under it: product identity, the section's internal links —
   which is what keeps the pages connected for a reader and for a crawler — and the
   download action. Not sticky: the global nav already is, and two stacked sticky bars eat
   the viewport on a phone. */
.product-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.product-bar .bar {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-block: 8px;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: .2px;
}
.brand img { width: 26px; height: 26px; }
.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-left: auto;
  font-size: 14px;
}
.main-nav a { color: var(--muted); text-decoration: none; }
.main-nav a:hover { color: var(--text); }
.main-nav a[aria-current="page"] { color: var(--text); font-weight: 600; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  /* Bold, not semibold: at 15px a system font's 600 is close enough to the surrounding
     body text that the action does not stand out on its own — the fill was carrying the
     whole hierarchy. Weight is orthogonal to the fill, so the outlined
     "Releases no GitHub" stays secondary even at the same weight. */
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
}
.btn:hover { border-color: var(--accent); }
.btn-primary {
  background: linear-gradient(180deg, #ff8f2e, var(--brand));
  border-color: transparent;
  color: var(--brand-ink);
}
.btn-primary:hover { color: var(--brand-ink); filter: brightness(1.06); }
.btn-sm { padding: 8px 14px; font-size: 14px; }
/* A plain link sitting next to a button (the hero's "other platforms"): it must not inherit the
   button's size, and it should read as a link, not as a second action. */
.btn-link { font-size: 14px; }

/* The hero carries the primary action. Measured before this existed: at 1366x768 the Windows
   button sat 76px BELOW the fold and at 390x844 it was 179px below it, so the first screen
   offered text only and the one visible action was a jump link in the product bar. */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 18px;
}

/* ── Layout blocks ──────────────────────────────────────────────────── */
main { display: block; }

.hero { padding-block: clamp(30px, 4.6vw, 48px) 30px; }
.eyebrow {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-text);
  margin: 0 0 10px;
}
h1 {
  font-size: clamp(28px, 4.6vw, 42px);
  line-height: 1.15;
  margin: 0 0 14px;
}
h2 { font-size: clamp(21px, 2.6vw, 27px); margin: 0 0 12px; }
h3 { font-size: 18px; margin: 0 0 8px; }
.lead { font-size: 18px; color: var(--text); max-width: 74ch; }
.lead strong { color: var(--text-strong); }
.sub { color: var(--muted); max-width: 74ch; }

/* Vertical rhythm only: `padding-block` keeps the horizontal gutter inherited from
   `.wrap`, which is what the sections are wrapped in. */
section { padding-block: var(--section-block); border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }

.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.card h3 { margin-bottom: 6px; }
.card p { margin: 0 0 12px; color: var(--muted); font-size: 15px; }
.card .btn { font-size: 14px; }
.card-note { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* The Premium page's price block: the amount is that page's single most important datum, so it
   gets a size nothing else on the site has. It is a `.card` with a measure, not a new component —
   and the number itself is in the HTML, so the page is true before any script runs. */
.price-card { max-width: 460px; }
.price-now { font-size: 34px; font-weight: 700; margin: 0 0 6px; }
.price-note { font-size: 14px; color: var(--muted); margin: 0 0 14px; }

/* One container owns the figure's measure, so the capture and its caption can never drift
   apart. `margin-block: 0` is load-bearing: the browser's default for <figure> is 40px of
   inline margin, which would fight the centring. */
.shot-figure {
  max-width: var(--shot-max);
  margin-block: 0;
  margin-inline: auto;
}
.shot {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: block;
  width: 100%;
}
.shot-caption { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* Numbered steps of a HowTo: the browser's own numbers are the right ones here (they match the
   `position` in the JSON-LD), and the list only needs the section's rhythm so a set of
   instructions does not look like a different website. */
ol.steps { padding-left: 22px; margin: 0; }
ol.steps li { margin-bottom: 8px; }

/* A `<details>` in the body of a page: the conclusion stays visible and the evidence is one
   click away. Nothing here is machine-only — the collapsed text is in the DOM, so it is read,
   indexed and quotable; it is simply not read aloud to someone who came for the button. */
.more { margin-top: 14px; }
.more > summary { cursor: pointer; font-size: 15px; color: var(--accent); }
.more > summary:hover { text-decoration: underline; }
.more > summary::marker { color: var(--brand-text); }

/* ── Tables & definition lists ──────────────────────────────────────── */
.table-scroll { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
caption {
  caption-side: top;
  text-align: left;
  color: var(--muted);
  font-size: 13px;
  padding-bottom: 8px;
}
th, td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
thead th { background: var(--surface-2); font-size: 14px; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td.yes { color: var(--ok); font-weight: 600; }
td.no { color: var(--muted); }

dl.facts { margin: 0; }
dl.facts > div {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 4px 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
dl.facts > div:last-child { border-bottom: 0; }
dl.facts dt { color: var(--muted); font-size: 15px; }
dl.facts dd { margin: 0; font-size: 15px; }

ul.check { list-style: none; padding: 0; margin: 0; }
ul.check li { padding-left: 26px; position: relative; margin-bottom: 8px; }
ul.check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ok);
  font-weight: 700;
}
ul.cross li::before { content: "×"; color: var(--brand-text); }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
}
.faq summary::marker { color: var(--brand-text); }
.faq details[open] summary { margin-bottom: 8px; }
.faq p { margin: 0; color: var(--muted); }

/* ── Callouts ───────────────────────────────────────────────────────── */
.callout {
  border-left: 3px solid var(--brand-text);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 18px;
}
.callout p:last-child { margin-bottom: 0; }

.surfaces { list-style: none; padding: 0; margin: 0; }
.surfaces li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.surfaces li:last-child { border-bottom: 0; }
.surfaces b { display: block; }

/* ── Section links and colophon ────────────────────────────────────────
   The page keeps its own links (facts, safety, download, EULA, PAD) instead of relying only
   on the global footer: they are what connects the pages of the section for a reader and for
   a crawler, and they are the section's own navigation. */
.section-links {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-block: 22px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 14px;
}
.section-links a { color: var(--muted); text-decoration: none; }
.section-links a:hover { color: var(--text); }
.colophon {
  /* `margin-block` only: the `margin` shorthand here would zero the inline margins that
     `.wrap` sets to `auto` (same specificity, later rule) and pin the colophon to the page
     edge while every other block stays centred. */
  margin-block: 0;
  padding-bottom: 34px;
  font-size: 13px;
  color: var(--muted);
}
.colophon a { color: var(--muted); }
.colophon a:hover { color: var(--text); }

@media (max-width: 640px) {
  .main-nav { display: none; }
  .lang-switch { margin-left: auto; }
  dl.facts > div { grid-template-columns: 1fr; gap: 0; }
  dl.facts dt { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
}

/* Windows High Contrast and other forced-colors modes: the system palette wins, and this
   is the one place where system colors are correct. The orange CTA would otherwise lose
   its contrast pair, so it becomes a plain system button with a visible border. */
@media (forced-colors: active) {
  .btn,
  .btn-primary {
    background: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonBorder;
  }
  .card,
  .callout,
  .faq details,
  table {
    border: 1px solid CanvasText;
  }
  .brand img,
  .shot {
    forced-color-adjust: none;
  }
}