/* Free games and tools family: the shared public header and footer in the newsprint
   treatment, plus the Free games / Free tools row. Opt in with the `marketing-newsprint`
   body class (see docs/labs-styles.md). Header geometry stays exactly as in
   marketing-shell.css; only paper, ink, rule weight and button styling change. Tokens are
   local so the treatment is identical on pages with their own palettes. */
.marketing-newsprint {
  --np-hero-size: clamp(46px, 4.8vw, 62px);
  --np-paper: #fdfdfb;
  --np-panel: #f5f5f1;
  --np-ink: #292a26;
  --np-muted: #65665e;
  --np-line: #d7d8cf;
  --np-radius: 4px;
  --np-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --np-mono: "JetBrains Mono", ui-monospace, monospace;
}
.marketing-newsprint .marketing-chrome {
  --marketing-paper: var(--np-paper);
  --marketing-green: var(--np-ink);
  --marketing-ink: var(--np-ink);
  --marketing-muted: var(--np-muted);
  --marketing-line: var(--np-line);
  font-family: var(--np-body);
}
.marketing-newsprint .marketing-header-inner { border-bottom: 2px solid var(--np-ink); }
.marketing-newsprint .marketing-chrome .marketing-contact { border-color: var(--np-ink); border-radius: var(--np-radius); }
.marketing-newsprint .marketing-chrome .marketing-contact:hover { background: var(--np-panel); }
.marketing-newsprint .marketing-chrome a:focus-visible,
.marketing-newsprint .marketing-skip:focus-visible { outline-color: var(--np-ink); }
.marketing-newsprint .marketing-skip { background: var(--np-paper); color: var(--np-ink); }
.marketing-newsprint .marketing-chrome .marketing-footer-group h2 { font-family: var(--np-body); }
.marketing-newsprint .marketing-footer { border-top: 2px solid var(--np-ink); }

/* One headline scale for family marketing pages, based on the homepage. */
@media (max-width: 880px) { .marketing-newsprint { --np-hero-size: clamp(42px, 7vw, 56px); } }
/* Category destinations stay visible; product shortcuts are supplemental. */
.np-row-inner { max-width: 1240px; margin-inline: auto; padding: 0 48px; display: flex; align-items: center; border-bottom: 1px solid var(--np-line); font-family: var(--np-body); }
.np-link { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent; font-family: var(--np-body); color: var(--np-ink); text-decoration: none; white-space: nowrap; }
.np-link:hover { border-bottom-color: var(--np-line); }
.np-link[aria-current] { border-bottom-color: var(--np-ink); }
.np-label { color: var(--np-muted); white-space: nowrap; }
.np-row a:focus-visible { outline: 2px solid var(--np-ink); outline-offset: -3px; border-radius: 2px; }
/* One row at every width. Mobile uses the two directory destinations directly. */
.np-row-inner { overflow: visible; min-height: 48px; gap: 24px; position: relative; }
.np-categories { display: flex; flex: none; align-items: center; gap: 22px; }
.np-direct-links { display: flex; align-items: center; gap: 19px; border-left: 1px solid var(--np-line); padding-left: 24px; }
.np-product-group { display: flex; align-items: center; gap: 17px; }
.np-product-group + .np-product-group { border-left: 1px solid var(--np-line); padding-left: 19px; }
.np-label { display: inline-flex; align-items: center; min-height: 47px; text-decoration: none; border-bottom: 2px solid transparent; font: 650 14px/1 var(--np-body); text-transform: none; letter-spacing: 0; }
.np-label[aria-current] { color: var(--np-ink); border-bottom-color: var(--np-ink); }
.np-label:hover { color: var(--np-ink); }
.marketing-newsprint .np-link { font-size: 13px; font-weight: 550; }

@media (max-width: 1150px) { .np-direct-links { display: none; } }
@media (max-width: 880px) { .np-row-inner { padding-inline: 24px; } }
@media (max-width: 560px) { .np-row-inner { padding-inline: 20px; } .np-categories { gap: 23px; } }
@media (max-width: 360px) { .np-row-inner { padding-inline: 16px; } .np-categories { gap: 18px; } .np-label { font-size: 13px; } }