:root{
  --fg-ink:#15104D;
  --fg-muted:#808080;
  --fg-bar:#EAE8E8;
  --fg-btn:#606060;
  --fg-outline:#808080;
}

/* header */
.fg-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fg-bar);
}

.fg-header__inner{
  height: 56px;
  max-width: 375px;
  margin: 0 auto;
  padding: 16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-sizing:border-box;
}

.fg-logo img{ height:18px; }

.fg-iconbtn{
  background:none;
  border:0;
  padding:0;
  width:24px;
  height:24px;
  cursor:pointer;
}

/* menu overlay */
.fg-menu{
  position:fixed;
  inset:0;
  background:#fff;
  display:none;
  z-index:100;
}
.fg-menu.open{ display:block; }

.fg-menu__body{
  max-width:375px;
  margin:0 auto;
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* rows */
.fg-row{
  display:flex;
  align-items:center;
  gap:8px;
  font:600 16px/23px Inter, system-ui;
  color:var(--fg-ink);
  text-decoration:none;
}

.fg-icon{
  width:16px;
  height:16px;
  background:#D9D9D9;
}

.fg-divider{
  height:1px;
  background:var(--fg-outline);
}

/* sub links */
.fg-sub{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.fg-sub a{
  font:600 14px/23px Inter, system-ui;
  color:var(--fg-muted);
  text-decoration:none;
}

/* actions */
.fg-actions{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.fg-btn{
  height:49px;
  border-radius:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  font:600 14px/21px Inter, system-ui;
  letter-spacing:.25px;
  text-decoration:none;
}

.fg-btn--primary{
  background:var(--fg-btn);
  color:#F8F8FF;
}

.fg-btn--secondary{
  border:1px solid var(--fg-outline);
  color:var(--fg-muted);
}