/* ============================================================================
   WDS Hosting — marketing chrome (landing, games, pricing, faq)
   theme.css owns the palette + the shared hover classes; this file owns the
   layout primitives the public pages share, so the pages themselves stay markup
   and copy instead of repeating the same inline styles four times.
   Every colour here is a theme.css token — nothing hard-codes light or dark.
   ========================================================================== */

/* The browser's own `[hidden] { display: none }` is a plain type-less rule, so
   any class here that sets `display` (grids, flex cards) silently beats it and
   the element stays visible. Every toggle on these pages — the plan grids, the
   filtered game cards, the FAQ answers — is the `hidden` attribute, so restate
   it with enough weight to win. */
[hidden] { display: none !important; }

/* ---- page shell -------------------------------------------------------- */
/* .m-wrap owns the horizontal gutter and nothing else, and every rhythm class
   below (.m-section, .m-pagehero, the page-level heroes) owns the vertical one.
   They are all single-class rules, so a `padding` shorthand in either half
   silently zeroes the other half's sides — which is how the public pages ended
   up flush against the screen edge on a phone. Keep both halves longhand, here
   and in the media queries, and inline `padding:` on an .m-wrap element too. */
.m-wrap      { width: 100%; max-width: 1360px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }
.m-section   { padding-top: 80px; padding-bottom: 80px; }
.m-section-t { padding-top: 80px; }
.m-section-b { padding-bottom: 96px; }
/* Anything with an id is an anchor target, and the nav is sticky: without this a
   jump to /#panel parks the section top under the nav and eats its heading.
   100px matches the offset the FAQ and privacy sections already use. */
.m-wrap[id] { scroll-margin-top: 100px; }

.m-head      { display: flex; flex-direction: column; gap: 10px; margin-bottom: 44px; }
.m-eyebrow   { font: 700 12.5px 'Inter', sans-serif; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; }
.m-title     { font: 800 36px/1.15 'Inter', sans-serif; letter-spacing: -0.02em; color: var(--text); margin: 0; }
.m-sub       { font: 400 16px/1.65 'Inter', sans-serif; color: var(--text-secondary); margin: 0; max-width: 640px; }

/* centered page hero used by /games, /pricing and /faq (the landing keeps its
   own split hero with the console mock) */
.m-pagehero       { padding-top: 72px; padding-bottom: 8px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.m-pagehero .m-sub { max-width: 620px; }
.m-pagehero-title { font: 800 50px/1.08 'Inter', sans-serif; letter-spacing: -0.035em; color: var(--text); margin: 0; }

/* ---- grids ------------------------------------------------------------- */
.m-grid      { display: grid; gap: 20px; }
.m-grid-2    { grid-template-columns: repeat(2, 1fr); }
.m-grid-3    { grid-template-columns: repeat(3, 1fr); }
.m-grid-4    { grid-template-columns: repeat(4, 1fr); }
.m-grid-auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ---- surfaces ---------------------------------------------------------- */
.m-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 1px 2px var(--shadow);
}
.m-card-pad  { padding: 30px 28px; }
.m-card-lift:hover {
    border-color: var(--accent-border);
    transform: translateY(-3px);
    box-shadow: 0 16px 36px -16px var(--shadow-hover);
}
.m-icon {
    width: 46px; height: 46px; border-radius: 12px;
    background: var(--accent-dim); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    flex: none;
}
.m-card-title { font: 700 18px 'Inter', sans-serif; letter-spacing: -0.01em; color: var(--text); margin: 0 0 7px; }
.m-card-body  { font: 400 14.5px/1.6 'Inter', sans-serif; color: var(--text-secondary); margin: 0; }

.m-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font: 600 11.5px 'Inter', sans-serif; letter-spacing: 0.02em;
    color: var(--text-secondary); background: var(--surface-raised);
    border: 1px solid var(--border); border-radius: 99px; padding: 4px 10px;
    white-space: nowrap;
    margin-block-end: 5px;
}
.m-pill-accent { color: var(--accent); background: var(--accent-dim); border-color: transparent; }

/* ---- buttons ----------------------------------------------------------- */
.m-btn {
    display: inline-block; text-decoration: none; text-align: center;
    font: 600 15px 'Inter', sans-serif; padding: 14px 24px; border-radius: 10px;
    border: 1px solid transparent; cursor: pointer;
}
.m-btn-primary { color: var(--on-accent); background: var(--accent); box-shadow: 0 6px 18px -8px var(--accent); }
.m-btn-ghost   { color: var(--text); background: transparent; border-color: var(--border); }
.m-btn-sm      { font-size: 14px; padding: 11px 18px; }

/* ---- nav (partials/marketing-nav.ejs) ---------------------------------- */
.wds-nav {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 48px;
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.wds-nav-links { display: flex; align-items: center; gap: 6px; }
.wds-nav-links a {
    font: 500 14.5px 'Inter', sans-serif; text-decoration: none;
    padding: 8px 12px; border-radius: 8px; color: var(--text-secondary);
}
.wds-nav-links a:hover, .wds-nav-auth.login:hover, .js-theme-toggle:hover { background: var(--accent-dim) !important; }
.wds-nav-links a[aria-current="page"] { color: var(--accent); background: var(--accent-dim); }
.wds-nav-auth.register:hover { filter: brightness(1.06); transform: translateY(-1px); }
.js-mobile-panel:not([hidden]) { display: flex; }

/* ---- footer ------------------------------------------------------------ */
.m-footer      { border-top: 1px solid var(--border); padding: 56px 0 34px; }
.m-footer-cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; margin-bottom: 40px; }
.m-footer h4   { font: 700 12.5px 'Inter', sans-serif; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 14px; }
.m-footer a    { font: 400 13.5px 'Inter', sans-serif; color: var(--text-secondary); text-decoration: none; display: block; padding: 5px 0; }
.m-footer-bar  { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--border); }
.m-footer-note { font: 400 12.5px 'Inter', sans-serif; color: var(--text-muted); margin: 0; }

/* ---- shared page bits -------------------------------------------------- */
/* stat band: four figures on one rule-separated row */
.m-stats  { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: 18px; background: var(--surface); overflow: hidden; }
.m-stat   { padding: 28px 26px; border-right: 1px solid var(--border); }
.m-stat:last-child { border-right: none; }
.m-stat-n { font: 800 30px 'Inter', sans-serif; letter-spacing: -0.02em; color: var(--text); display: block; }
.m-stat-l { font: 500 13px 'Inter', sans-serif; color: var(--text-muted); display: block; margin-top: 4px; }

/* closing call-to-action band */
.m-cta {
    border: 1px solid var(--accent-border); border-radius: 22px;
    background: var(--surface);
    background-image: radial-gradient(120% 140% at 50% -40%, var(--accent-dim), transparent 70%);
    padding: 60px 48px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 18px;
}

/* accordion (faq page + the landing's four-question preview) */
.m-acc { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.m-acc + .m-acc { margin-top: 12px; }
.m-acc-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px 24px; background: none; border: none; cursor: pointer; text-align: left;
    font: 600 15.5px/1.4 'Inter', sans-serif; color: var(--text);
}
.m-acc-q:hover { background: var(--surface-raised); }
.m-acc-chev { flex: none; color: var(--text-muted); transition: transform .18s ease; }
.m-acc.is-open .m-acc-chev { transform: rotate(180deg); color: var(--accent); }
.m-acc-a { padding: 0 24px 22px; font: 400 14.5px/1.7 'Inter', sans-serif; color: var(--text-secondary); margin: 0; max-width: 76ch; }

/* search field used by /games and /faq */
.m-search { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0 14px; }
.m-search input { flex: 1; border: none; background: none; outline: none; padding: 13px 0; font: 400 14.5px 'Inter', sans-serif; color: var(--text); }
.m-search input::placeholder { color: var(--text-muted); }
.m-empty { text-align: center; padding: 60px 20px; font: 400 15px 'Inter', sans-serif; color: var(--text-muted); }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 1000px) {
    .m-grid-4, .m-stats { grid-template-columns: repeat(2, 1fr); }
    .m-stat:nth-child(2) { border-right: none; }
    .m-stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    .m-footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .m-wrap { padding-left: 24px; padding-right: 24px; }
    .wds-nav { padding-left: 20px !important; padding-right: 20px !important; }
    .wds-nav-links, .wds-nav-auth { display: none !important; }
    .wds-hamburger { display: flex !important; }
    .m-grid-2, .m-grid-3, .m-grid-auto { grid-template-columns: 1fr; }
    .m-section { padding-top: 56px; padding-bottom: 56px; }
    .m-title { font-size: 28px; }
    .m-pagehero-title { font-size: 36px; }
    .m-cta { padding: 44px 24px; }
    .m-footer-bar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
    .m-grid-4, .m-stats, .m-footer-cols { grid-template-columns: 1fr; }
    .m-stat { border-right: none; border-bottom: 1px solid var(--border); }
    .m-stat:last-child { border-bottom: none; }
}