/*
  eKoPlayer — shared styles. Bright, colourful, one file, served from every page.

  Copy rules live in docs/WEB-SITE.md and are binding. Nothing about the palette relaxes them.

  The gradient is the app's own mark — cyan, blue, violet, magenta, taken from the SVG's stops — so
  the site and the product are recognisably one thing. On a light ground it does the work a dark
  theme was doing with glow, and it stays legible printed or screenshotted, which a dark page does
  not.
*/

:root{
  --a:#00c2e8; --b:#2f82f7; --c:#7448ee; --d:#d322f1;
  --ink:#101534; --ink-2:#404a72; --ink-3:#6f78a0;
  --bg:#ffffff; --bg-2:#f5f7ff; --line:#e3e8fb;
  --ok:#0d9f6e; --warn:#b4690e;
  --grad:linear-gradient(100deg,var(--a),var(--b),var(--c),var(--d));
  --radius:14px;
  --shadow:0 1px 2px rgba(16,21,52,.05),0 12px 32px -12px rgba(47,130,247,.22);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--b)}

.wrap{max-width:1060px;margin:0 auto;padding:0 22px}

/* ---- header ---------------------------------------------------------------------------------- */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex:none}
.brand svg{width:30px;height:30px}
.brand b{font-size:19px;letter-spacing:-.01em}
.brand b span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
nav a{padding:7px 12px;border-radius:9px;text-decoration:none;color:var(--ink-2);
  font-size:14.5px;font-weight:600}
nav a:hover{background:var(--bg-2);color:var(--ink)}
nav a.cta{background:var(--grad);color:#fff}

/* Below ~640 px the five nav items and the brand cannot share a row, and `flex-wrap` alone breaks
   them into three ragged lines with the call to action stranded on its own. Give the nav the whole
   second row instead and let it scroll sideways within itself — the page body must never scroll
   sideways, but a strip deliberately may. */
@media (max-width:640px){
  .top .wrap{flex-wrap:wrap;gap:10px}
  nav{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav a{flex:none}
}

/* ---- type ------------------------------------------------------------------------------------ */
h1{font-size:clamp(30px,5.2vw,50px);line-height:1.1;letter-spacing:-.025em;margin:0 0 14px}
h2{font-size:clamp(21px,2.7vw,29px);line-height:1.2;letter-spacing:-.02em;margin:0 0 10px}
h3{font-size:17px;margin:0 0 5px;letter-spacing:-.01em}
.lede{font-size:clamp(16px,2vw,19.5px);color:var(--ink-2);max-width:62ch;margin:0}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 8px}
/* `.wrap >` and not a bare `section`. A bare element selector reaches every <section> on the page,
   including the two nested inside the activation card, which then drew a divider across the middle
   of the card and pushed its first line down by 52 px of page-level padding. Only a direct child of
   the page column is a page section; anything deeper is part of a component and styles itself. */
.wrap > section{padding:52px 0;border-top:1px solid var(--line)}
.wrap > section:first-of-type{border-top:0}
.muted{color:var(--ink-3);font-size:14px}

/* ---- pieces ---------------------------------------------------------------------------------- */
/* `min(…, 100%)` rather than a bare minimum: a bare `minmax(232px, 1fr)` keeps its floor even
   when the container is narrower than the floor, so the column sticks out of the page. At
   320 px this pushed four pages 2 px sideways. The base grid had the same latent bug as the
   two-column one and is fixed here rather than only where it was noticed. */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(232px,100%),1fr))}
/* At most two columns — a picture beside its explanation. Written here rather than inline as
   `1fr 1fr`, which was the first version: an inline value holds at EVERY width, so the download
   page's Downloader code pushed a 375 px viewport 41 px sideways. auto-fit gives up the second
   column when there is no room for it. */
.grid.two{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));align-items:start}
/* `align-items:start` because one column of a two-column pair is usually a fixed-aspect
   screenshot and the other is text. Stretching makes the picture box grow and leaves a
   panel of empty white under the image; the picture should simply be its own height. */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  box-shadow:var(--shadow)}
.card p{margin:0;color:var(--ink-2);font-size:14.5px}
.card .num{width:28px;height:28px;border-radius:9px;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:14px;margin-bottom:10px}

.btn{display:inline-block;padding:12px 20px;border-radius:11px;text-decoration:none;
  font-weight:700;font-size:15px;background:var(--grad);color:#fff;border:0;cursor:pointer}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn+.btn{margin-left:8px}

.pill{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink-3)}
.pill.on{background:var(--grad);color:#fff;border-color:transparent}
.pill.soon{background:var(--bg-2)}

.note{background:var(--bg-2);border:1px solid var(--line);border-left:4px solid var(--c);
  border-radius:12px;padding:18px;margin:18px 0;color:var(--ink-2);font-size:14.5px}
.note b{color:var(--ink)}
.note.warn{border-left-color:var(--warn)}

.shot{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}

details{border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:10px;background:#fff}
details+details{margin-top:0}
summary{cursor:pointer;font-weight:700;font-size:15.5px}
details p{color:var(--ink-2);font-size:14.5px;margin:8px 0 0}

code{background:var(--bg-2);border:1px solid var(--line);border-radius:7px;padding:2px 8px;
  font:700 15px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--c)}
/* A single character in a box picks up 8 px of padding on each side, which pushes the comma after
   it clear of the letter: "I , L , O and U". `.k` is for one-character mentions, where the mono
   face and the accent colour already do the work the box was doing. */
code.k{background:none;border:0;padding:0 1px}

/* ---- legal / long-form ------------------------------------------------------------------------ */
.doc{max-width:74ch}
.doc h2{margin-top:34px}
.doc h3{margin-top:22px;font-size:16px}
.doc p,.doc li{color:var(--ink-2);font-size:15.5px}
.doc ul{padding-left:20px}

/* ---- footer ----------------------------------------------------------------------------------- */
footer{border-top:1px solid var(--line);background:var(--bg-2);margin-top:16px}
footer .wrap{padding-top:34px;padding-bottom:34px;display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
footer h4{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
footer a{display:block;color:var(--ink-2);text-decoration:none;font-size:14.5px;padding:3px 0}
footer a:hover{color:var(--b)}
.legalbar{border-top:1px solid var(--line);padding:16px 0;color:var(--ink-3);font-size:13px}

/* ---- consent banner ---------------------------------------------------------------------------
   Fixed to the bottom rather than a modal over the page: this is a question, not a gate, and a
   full-screen interstitial on a legal site is the pattern that makes people click anything to make
   it go away. Both buttons are the same size for the same reason — a "reject" that is harder to hit
   than "accept" is the dark pattern regulators name by name. */
#consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:100;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -8px 32px -12px rgba(16,21,52,.25)}
#consent-banner .consent-inner{max-width:1060px;margin:0 auto;padding:16px 22px;display:flex;
  gap:18px;align-items:center;flex-wrap:wrap}
#consent-banner p{margin:0;flex:1 1 320px;font-size:14.5px;color:var(--ink-2)}
#consent-banner .consent-actions{display:flex;gap:10px;flex:0 0 auto}
#consent-banner .btn{padding:10px 18px;font-size:14.5px}
@media (max-width:560px){
  #consent-banner .consent-inner{padding:14px 18px}
  #consent-banner .consent-actions{width:100%}
  #consent-banner .btn{flex:1}
}