/*
  StockRoom's header, footer, fonts and colours: the parts every public page
  shares.

  Split out of site-v2/site.css on 2026-09-17, when the free tools, the
  comparisons, the legal pages and the free stock count were brought into the
  new site's look. Those pages keep their own styles for what is on them, and
  several use the same class names as the home page for different things (their
  .cta is a boxed call to action, the home page's was the header button), so
  linking the whole of site.css would have restyled their insides. This file is
  only what is identical everywhere, and every rule in it is scoped to the
  header or the footer.

  The markup it styles is copied onto every page from site-v2/index.html by
  site-v2/chrome.mjs, so a change to the header or footer is made there, once.
*/

/* The live site's own self-hosted font files, so opening a page sends no
   visitor's address to Google. Archivo is one variable file; it is declared
   here as a range so the design's weight 800 is the real 800 rather than 700
   standing in for it. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/archivo-65449f16.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/ibm-plex-sans-d8b4e62d.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-bb87500e.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-d32f0e07.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Light only. The older pages followed the computer's dark setting, which is
   most of why they looked like a different site. */
:root{
  color-scheme:light;
  --paper:#F7F7F5; --card:#FFFFFF; --ink:#17191C; --dim:#4B505A;
  --line:#E2E1DC; --line2:#CFCEC7;
  --sig:#B94617; --sig-deep:#8F3512; --sig-tint:#FBEAE1;
  --fd:"Archivo",system-ui,sans-serif;
  --fb:"IBM Plex Sans",system-ui,sans-serif;
  --fm:"IBM Plex Mono",ui-monospace,monospace;
}

/* ── header ── */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;column-gap:28px;padding:18px 32px;background:rgba(247,247,245,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);font-family:var(--fb);line-height:1.5}
.brand{font-family:var(--fd);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
/* "Room" in the signal orange, as the wordmark has been on every version of
   the site and in the app's own top bar. */
.brand span{color:var(--sig)}
a.brand:hover{color:var(--ink)}
.top .nav{margin:0 0 0 auto;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.top .nav a{font-size:15px;font-weight:500;color:var(--dim);text-decoration:none}
.top .nav a:hover{color:var(--ink)}
.top .nav a[aria-current]{color:var(--ink);font-weight:600}
.top .cta{font-size:14px;font-weight:600;line-height:1.5;color:#fff;background:var(--sig);border:0;margin:0;padding:10px 18px;border-radius:4px;white-space:nowrap;flex-shrink:0;text-decoration:none}
.top .cta:hover{color:#fff;background:var(--sig-deep)}

/* ── footer ──
   Dark, with a way in and every page a visitor might want next. It was one
   line of links, three of them text that went nowhere. */
.foot{background:var(--ink);color:#C9C8C2;font-family:var(--fb);line-height:1.5;margin:0;padding:0;border:0;max-width:none}
.foot-in{max-width:1180px;margin:0 auto;padding:64px 32px 44px;display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:40px 32px}
.foot .brand{color:#fff;font-size:22px}
.foot a.brand:hover{color:#fff}
/* The signal orange is too dark to read on the footer's ink; this is the same
   hue lifted until it clears 4.5 to 1. */
.foot .brand span{color:#E8743F}
.foot-brand p{margin:12px 0 22px;max-width:320px;font-size:15px;line-height:1.6;color:#C9C8C2}
.foot-cta{display:flex;gap:10px;flex-wrap:wrap}
.foot .btn{font-size:15px;font-weight:600;line-height:1.2;padding:11px 18px;margin:0;min-height:44px;display:inline-flex;align-items:center;border-radius:6px;text-decoration:none}
.foot .btn.primary{color:#fff;background:var(--sig);border:1px solid var(--sig)}
.foot .btn.primary:hover{color:#fff;background:var(--sig-deep);border-color:var(--sig-deep)}
.foot .btn.ghost{color:#fff;background:transparent;border:1px solid rgba(255,255,255,.3)}
.foot .btn.ghost:hover{color:#fff;border-color:rgba(255,255,255,.65)}
.foot-h{font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#9A9993;margin:0 0 10px;line-height:1.5}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin:0;padding:0;max-width:none}
.foot-col a{display:inline-flex;align-items:center;min-height:36px;font-size:15px;line-height:1.35;color:#E6E5E0;text-decoration:none}
.foot-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* Both lines on the left: "Suggest a feature" (site/suggest.js) is fixed to the
   bottom right corner and sat on top of whatever ended the page there. */
.foot-base{max-width:1180px;margin:0 auto;padding:20px 32px 32px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px 32px}
.foot-base small{font-size:13px;color:#9A9993}

@media (max-width:960px){
  .foot-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}

/* ── the phone ── */
@media (max-width:720px){
  .top{flex-wrap:wrap;column-gap:12px;row-gap:0;padding:8px 16px 2px}
  .top .brand{min-height:44px;display:inline-flex;align-items:center}
  .top .cta{order:2;margin-left:auto;min-height:44px;display:inline-flex;align-items:center}
  .top .nav{order:3;margin-left:0;flex-basis:100%;gap:0 22px}
  .top .nav a{min-height:44px;display:inline-flex;align-items:center}

  .foot-in{padding:48px 20px 28px;gap:28px 20px}
  .foot-col a{min-height:44px}
  .foot-base{padding:18px 20px 88px}
}
@media (max-width:420px){
  .foot-in{grid-template-columns:minmax(0,1fr)}
}