@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500&display=swap");
/* Zold theme for the shared app pages (launch / markets / market).
   White paper, ink type, warm gold accent, silver greys. Same tokens the site uses. */
:root{
  --pad-bg:#ffffff;
  --pad-surface:#f6f6f6;
  --pad-ink:#0a0a0a;
  --pad-ink-dim:#8b8b8b;
  --pad-rule:rgba(10,10,10,.12);
  --pad-accent:#c9a227;        /* warm gold */
  --pad-accent-ink:#0a0a0a;
  --pad-accent-text:#8f6f12;   /* gold as readable text on white */
  --pad-good:#2f7d4f;          /* up / ok */
  --pad-bad:#b3402a;           /* down / error */
  --pad-font:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --pad-font-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --pad-mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  --pad-radius:0px;            /* the site is square-cornered, pixel-stepped */
  --pad-max-width:min(1780px,93vw);

  /* the site's own tokens, so the pasted header/footer chrome resolves them */
  --paper:#ffffff; --ink:#0a0a0a; --muted:#8b8b8b; --line:rgba(10,10,10,.12); --line-2:rgba(10,10,10,.06);
  --cell:14px; --gutter:clamp(28px,3vw,60px); --maxw:min(1780px,93vw);
  --gold:#c9a227; --gold-pale:#e8c84a; --gold-deep:#8f6f12; --silver:#b8bcc2; --graphite:#3a3d42;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
}
html body.pad-body, body{
  background-color:var(--pad-bg);
  /* the 9px paper grid every page of the site sits on */
  background-image:repeating-linear-gradient(90deg,#fafafa 0 1px,transparent 1px 9px),repeating-linear-gradient(180deg,#fafafa 0 1px,transparent 1px 9px);
  font-feature-settings:"ss06" 1;
}
/* header chrome (mirrors the site's masthead) */
.masthead{position:relative; z-index:4; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:24px; padding:calc(var(--cell)*1.2) var(--gutter);}
.masthead .mh-l{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);}
.masthead .mh-l img{display:block; width:22px; height:22px;}
.masthead .mh-l .wm{font-family:var(--mono); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:500;}
.masthead .mh-r{justify-self:end; display:flex; flex-wrap:wrap; gap:6px 22px; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;}
.masthead .mh-r a{text-decoration:none; color:var(--ink); padding-bottom:2px; border-bottom:1px solid transparent; transition:border-color .2s;}
.masthead .mh-r a:hover{border-color:var(--ink);}
@media(max-width:680px){ .masthead{grid-template-columns:1fr; row-gap:10px;} .masthead .mh-r{justify-self:start; gap:6px 16px; font-size:11px;} }
/* footer chrome (mirrors the site's footer nav strip; the playable skyline stays on the marketing pages) */
.fnav{position:relative; z-index:2; padding:calc(var(--cell)*2) var(--gutter); border-top:1px solid var(--line); margin-top:calc(var(--cell)*4);}
.fnav .wrap{max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:12px 24px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.fnav nav{display:flex; flex-wrap:wrap; gap:8px 18px;}
.fnav a{text-decoration:none; color:var(--ink); transition:color .2s;} .fnav a:hover{color:var(--gold-deep);}
/* buttons on the app pages: the site's pixel-stepped corners */
.pad-btn, button.pad-primary{
  clip-path:polygon(10px 0, calc(100% - 10px) 0, calc(100% - 10px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 10px, 100% 10px, 100% calc(100% - 10px), calc(100% - 5px) calc(100% - 10px), calc(100% - 5px) calc(100% - 5px), calc(100% - 10px) calc(100% - 5px), calc(100% - 10px) 100%, 10px 100%, 10px calc(100% - 5px), 5px calc(100% - 5px), 5px calc(100% - 10px), 0 calc(100% - 10px), 0 10px, 5px 10px, 5px 5px, 10px 5px, 10px 0);
}