/* Shared styles of the pages around the landing page (legal pages and the like). The look is the one of
   landing.css, taken from the MGx8 Tuner v0.1.2 design system: near-black surfaces with a faint blue tint,
   1 px hairlines instead of shadows, one 3 px corner radius, Inter for text, Barlow Condensed for the big
   titles, and blue only for interaction (primary button, links, focus).
   The tokens, the buttons, the header, the footer and the cookie banner are the same rules as in landing.css;
   keep the two files in step when one of them changes. */

:root{
  color-scheme:dark;
  --bg:#0b0d10;--panel-deep:#0d1014;--panel:#101318;--panel-header:#14181d;--raised:#161a20;
  --hover:#1c2128;--pressed:#252b33;
  --border:#222831;--border-strong:#343b46;--border-hover:#444c57;
  --text:#e8ebef;--soft:#b4bcc6;--muted:#98a2ae;--dim:#6b7480;
  --accent:#2f81f7;--accent-hover:#4a94fa;--accent-text:#8cbbff;
  --warning:#e3b341;
  --font:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  --display:"Barlow Condensed",Impact,"Arial Narrow",sans-serif;
  --mono:"Cascadia Mono",Consolas,ui-monospace,monospace;
  --r:3px;--header:56px;
}
*{box-sizing:border-box}
html{scroll-padding-top:var(--header);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,p,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r)}
.skip-link{position:fixed;z-index:300;top:-80px;left:16px;padding:10px 14px;background:var(--accent);color:#fff;border-radius:var(--r)}
.skip-link:focus{top:10px}
.shell{width:min(1320px,100% - clamp(40px,8vw,128px));margin-inline:auto}

/* ── Buttons ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--raised);color:var(--text);font:500 14px/1 var(--font);white-space:nowrap;transition:background .2s,border-color .2s}
.btn:hover{background:var(--hover);border-color:var(--border-hover)}
.btn:active{background:var(--pressed)}
.btn-primary{border-color:var(--accent);background:var(--accent);color:#fff;font-weight:600}
.btn-primary:hover{border-color:var(--accent-hover);background:var(--accent-hover)}
.btn-primary:active{background:var(--accent-hover)}
.btn-sm{min-height:34px;padding:0 14px;font-size:13px}

/* ── Header (the Tuner's title bar) ───────────────────── */
.site-header{position:fixed;z-index:80;inset:0 0 auto 0;height:var(--header);background:var(--bg);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;gap:20px;height:100%}
.brand img{width:104px;height:auto}
.header-nav{display:flex;gap:2px;margin-left:12px}
.header-nav a{padding:7px 12px;border-radius:var(--r);color:var(--muted);font:500 13.5px/1.2 var(--font);transition:background .2s,color .2s}
.header-nav a:hover,.header-nav a.is-active{background:var(--hover);color:var(--text)}
.header-cta{margin-left:auto}
.header-menu-toggle{display:none}

/* ── Footer (the Tuner's status bar) ──────────────────── */
.site-footer{border-top:1px solid var(--border);background:var(--panel)}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;min-height:56px;padding-block:14px}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 24px}
.footer-links a,.footer-links button{padding:0;border:0;background:none;color:var(--muted);font:400 13px/1.4 var(--font);transition:color .2s}
.footer-links a:hover,.footer-links button:hover{color:#fff}
.copyright{color:var(--dim);font-size:12.5px}

/* cookie banner, built like the Tuner's pop-ups */
.cookie-banner{position:fixed;z-index:200;right:20px;bottom:20px;display:grid;gap:14px;width:min(480px,calc(100% - 40px));padding:18px;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--raised)}
.cookie-banner strong{font-size:15px;font-weight:600}
.cookie-banner p{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.55}
.cookie-banner a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.cookie-actions{display:flex;justify-content:flex-end;gap:8px}
.cookie-actions button{min-height:32px;padding:0 16px;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--raised);color:var(--text);font:500 13px var(--font)}
.cookie-actions button:hover{background:var(--hover)}
.cookie-actions button:last-child{border-color:var(--accent);background:var(--accent);color:#fff;font-weight:600}
.cookie-actions button:last-child:hover{background:var(--accent-hover)}

/* ── Responsive ───────────────────────────────────────── */
@media(max-width:1080px){
  .header-menu-toggle{display:grid;place-items:center;flex:none;width:38px;height:34px;padding:0;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--raised)}
  .header-menu-toggle span,.header-menu-toggle span::before,.header-menu-toggle span::after{display:block;width:16px;height:2px;background:var(--text)}
  .header-menu-toggle span{position:relative}
  .header-menu-toggle span::before,.header-menu-toggle span::after{content:"";position:absolute;left:0}
  .header-menu-toggle span::before{top:-5px}.header-menu-toggle span::after{top:5px}
  .header-nav{position:absolute;top:calc(100% + 1px);right:20px;display:none;flex-direction:column;gap:0;width:min(260px,calc(100vw - 40px));margin:0;padding:4px;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--raised)}
  .header-nav.is-open{display:flex}
  .header-nav a{padding:11px 12px}
}
@media(max-width:760px){
  :root{--header:52px}
  .shell{width:calc(100% - 40px)}
  .brand img{width:92px}
  .header-cta{display:none}
  .header-menu-toggle{margin-left:auto}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .cookie-banner{right:10px;left:10px;bottom:10px;width:auto}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}